HTML Tags And Examples by State College of Florida Professor Floyd Jay Winters
Tags |  Characters |  Tables |  CSS |  Forms |  JavaScript 
Tag Name Example of Code Browser View
<!-- comment <!--Comments are only viewed in editor--> Nothing is seen in browser
<a - Anchor <a name="Top"></a> Set an "Internal" anchor
<a - Anchor <a href="http://www.scf.edu/">SCF</a> SCF
<a - Anchor <a href="http://www.scf.edu/" target="_blank">
<img src="images/SCF.gif" alt="SCF logo"></a>		 MCC logo and link to MCC Web site
<b> Bold <b>Bold text</b>  (deprecated, see <strong>) Bold text
<big> bigger text <big>Bigger Text</big> Bigger Text
<body> Body of page <body>The main content of page</body> or
<body style="background-color:#FFFFCC">		 The main content of page
<body style= Set Body Style and Background <body style="font-family: Arial, Helvetica, sans-serif; font-size:16px; font-weight: bold; color:#0000FF" background="images/BackgroundImage.jpg">

Sample new Body Style text
<br /> line Break Start new line<br / >Uses less space than <p> tag Start new line. Uses less space than <p> tag
<center> Center <center>Center This</center>
(Deprecated: replaced by align="center")
Center This
<div id=" Modifies a section of a Web page <div id="masthead">
<!-- All masthead content comes for .css -->
</div>		 The CSS for the code at left has the style code below:
#masthead {
background-image: url('images/BannerCGS2820.jpg');
height: 75px; background-repeat: no-repeat;
}

<dl>
<dt>
<dd>

Definition List
Definition Term
Definition Description

 <dl>
  <dt>Definition Term</dt>
  <dd>Definition of the term</dd>
  <dt>Definition Term</dt>
  <dd>Definition of the term</dd>
</dl>
Definition Term
Definition of the term
Definition Term
Definition of the term
<em> Emphasis <em>Emphasis</em> Emphasis
<embed> Embed object <embed src="media/FileName.mid" autostart="false" hidden="false" loop="false"></embed>
(This tag is being deprecated.)		 If it was used there would be a media player control here.
It increases the page load time considerably.
favicon.ico Puts icon in adress box <link rel="shortcut icon" href="images/favicon.ico" type="image/vnd.microsoft.icon" /> See Zoey in URL address box of this page
<font> Font <font Face="Arial" Size="5" Color="#0000FF"> Arial Text Size 5 </font>
(Deprecated: see Body Style and Style)		 Arial Text Size 5
<h1> Heading 1 <h1>Heading 1</h1>

Heading 1
<h2> Heading 2 <h2>Heading 2</h2>

Heading 2
<h3>...<h6> Heading 6 <h6>Heading 6</h6>
Heading 6
<head> Heading of document <head>Contains document Title and Meta tags</head> Title is seen in Taskbar
<hr>
(varies in browser)		 Horizontal Rule <hr style="background-color:blue; width:50%; text-align:center; height:3px;" /> Text Above Rule
Text Below Rule
<html> HyperText Markup Language <html>
<head><title>Web Page Title</title></head>
<body>Web Page contents</body>
</html>		 Start/end HTML code to display Web page
<i> Italic <i>Italicized text</i> (deprecated, see <em>) Italicized text
id ID <H2 id="TopOfPage" align="center"</h2>
<a href="#TopOfPage">Top</a> 		 
<img> Image Source <img src="images/monitor.gif" width="50" height="50" border="0" alt="Picture of monitor"> Picture of monitor
<link> Link <link href="winters.css" rel="stylesheet" type="text/css"> Link page to a Cascading Style Sheet
<mailto: email <a href="mailto:sam@domain.com>">Email me</a>  OR
<a href="mailto:sam@domain.com?Subject=Inquiry">Email me</a>		 Email me
<marquee> scrolling text <marquee bgcolor="C0C0C0" loop="-1" scrollamount="2" width="100%">Text</marquee> Text
<meta> Meta <meta name="author" content="Floyd Winters">
<meta name="description" content="Web Development syllabus">
<meta name="keywords" content="HTML tags, Web code, web programming ">		 Nothing is seen in browser.
Meta tags are used to help search engines.
<ol> Ordered List

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>

<ol style="list-style-type: lower-roman">
  <LI>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>

(Also <ol start=1 type=i> for Roman Numerals)
  1. List item 1
  2. List item 2
  3. List item 3
      
  1. List item 1
    2.   
  2. List item 2
    3.   
  3. List item 3
<p> Paragraph <p>Paragraph example - creates line break and a carriage return.</p>
<p style="text-align:center">This paragraph is centered</p>

Paragraph example - creates line break and a carriage return. More spacing than a <br> tag.

This paragraph is centered
<small> Smaller text <small>Smaller text</small> Smaller text
<span> Modifies a small section of a page This is a <span style="color:blue">blue</span> word This is a blue word
<strong> Strong emphasis <strong>Strong Text</strong> ( Replaces <b>) Strong Text
Style Used with h1, p, div, span, td, & body tags <p style="text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; color: red">Welcome</p>

Welcome
<TABLE>
<th>
<tr>
<td>		 Table
header
rows
data		 <table width="75%" style="border:4px solid blue; background-color:#FFFFFF" cellpadding="10" cellspacing="5">
<tr> <!-- Begin Row 1 -->
    <td colspan="3">Merged Cells</td>
</tr>
<tr> <!-- Begin Row 2 -->
    <td>Row 2, Col 1</td>
    <td nowrap>Row 2, Col 2</td>
    <td>Row 2, Col 3</td>
</tr>
<tr>
    <td>tr=Table Rows</td>
    <td>&nbsp;</td>
    <td rowspan="2">td=rowspan="2"</td>
</tr>
<tr>
    <td>Row 4, Col 1</td>
    <td>Row 4, Col 2</td>
</tr>
</table>
Merged Cells (<td=colspan="3">)
Row 2, Col 1 Row 2, Col 2 Row 2, Col 3
tr=Table Rows   td=rowspan="2"
Row 4, Col 1 Row 4, Col 2
<title> document Title <title>Title of your webpage</title> Title of your webpage (viewable in the titlebar)
<tt> TeleType <tt>Monospaced Text</tt> Monospaced Text (Teletype)
<u> Underline <u>Underlined Text (Avoid using! - Looks like link) </u> Underlined Text (Avoid using! - Looks like link)
<ul> Unordered List <ul style="list-style:square">
  <li>List item 1</li>
  <li>List item 2</li>
<ul style="list-style:circle">
  <li>List item 3</li>
  <li>List item 4</li>
</ul>
</ul>
  • List item 1
  • List item 2
    • List item 3
    • List item 4
    <ul style="list-style-image: url(images/point.gif)">
   <li> Item One</li>
   <li> Item Two</li>
</ul>
  •  Item One
  •  Item Two
 Top Tags |  Characters |  Tables |  CSS |  Forms |  JavaScript 
Last Update: August 1, 2009