HTML Tags Chart
Tag Name Code Example
<!--This can be viewed in the HTML part of a document-->
<!-- comment
<a href="[Link] Visit Our Site</a>
<a - anchor
<b> bold <b>Example</b>
<big> big (text) <big>Example</big>
body of
HTML <body>The content of your HTML page</body>
<body>
documen
t
line The contents of your page<br>The contents of your page
<br>
break
<center>This will center your contents</center>
<center> center
<dl>
<dt>Definition Term</dt>
definition
<dd>Definition of the term</dd>
<dd> descripti
<dt>Definition Term</dt>
on
<dd>Definition of the term</dd>
</dl>
<dl>
<dt>Definition Term</dt>
definition <dd>Definition of the term</dd>
<dl>
list <dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>
<dl>
<dt>Definition Term</dt>
definition <dd>Definition of the term</dd>
<dt>
term <dt>Definition Term</dt>
<dd>Definition of the term</dd>
</dl>
This is an <em>Example</em> of using the emphasis tag
<em> emphasis
embed <embed src="[Link]" width="100%" height="60" align="center">
<embed>
object
<embed src="[Link]" autostart="true" hidden="false" loop="false">
embed <noembed><bgsound src="[Link]" loop="1"></noembed>
<embed>
object
<font face="Times New Roman">Example</font>
<font> font
<font face="Times New Roman"
<font> font Example
size="4">Example</font>
<font face="Times New Roman" size="+3"
<font> font
color="#ff0000">Example</font> Example
<form action="[Link]
"> Name:
Name: <input name="Name" value=""
size="10"><br> Email:
<form> form
Email: <input name="Email" value=""
Submit
size="10"><br>
<center><input type="submit"></center>
</form>
<h1> heading 1 <h1>Heading 1 Example</h1>
<h2> heading 2 <h2>Heading 2 Example</h2>
<h3> heading 3 <h3>Heading 3 Example</h3>
<h4> heading 4 <h4>Heading 4 Example</h4>
<h5> heading 5 <h5>Heading 5 Example</h5>
<h6> heading 6 <h6>Heading 6 Example</h6>
heading
of HTML <head>Contains elements describing the
<head> Nothing will show
documen document</head>
t
Contents of your web
horizonta
<hr> <hr /> page
l rule
Contents of your web page
Contents of your web page
horizonta
<hr> <hr width="50%" size="3" />
l rule
Contents of your web page
Contents of your web page
horizonta
<hr> <hr width="50%" size="3" noshade />
l rule
Contents of your web page
<hr> Contents of your web page
horizonta <hr width="75%" color="#ff0000" size="4"
(Internet
l rule />
Explorer) Contents of your web page
<hr> Contents of your web page
horizonta <hr width="25%" color="#6699ff" size="6"
(Internet
l rule />
Explorer) Contents of your web page
<html>
<head>
<meta>
hypertext
<title>Title of your web page</title>
<html> markup Contents of your web page
</head>
language
<body>HTML web page contents
</body>
</html>
<i> italic <i>Example</i> Example
<img src="[Link]" width="41"
<img> image height="41" border="0" alt="text describing
the image" />
Example 1:
Example 1:
<form method=post action="/cgi-
input bin/[Link]">
<input>
field <input type="text" size="10" Submit
maxlength="30">
<input type="Submit" value="Submit">
</form>
Example 2:
<form method=post action="/cgi- Example 2:
bin/[Link]">
<input>
input <input type="text" style="color: #ffffff;
(Internet
field font-family: Verdana; font-weight: bold; font- Submit
Explorer)
size: 12px; background-color: #72a4d2;"
size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>
<form method=post action="/cgi- Select an option:
bin/[Link]">
Select an option:<br> Option 1
<input type="radio" name="option"> Option
1 Option 2
<input type="radio" name="option"
Option 3
checked> Option 2
<input type="radio" name="option"> Option
Select an option:
3
<br> Selection 1
<br>
Select an option:<br> Selection 2
<input type="checkbox" name="selection">
Selection 1 Selection 3
<input type="checkbox" name="selection" Submit
checked> Selection 2
<input type="checkbox"
name="selection"> Selection 3
<input type="Submit" value="Submit">
</form>
Example 1: Example 1: (Tip)
<menu>
<li type="disc">List item 1</li> • List item 1
<li type="circle">List item 2</li> o List item 2
<li type="square">List item 3</li> ▪ List item 3
</MENU>
<li> list item
Example 2: Example 2:
<ol type="i"> i. List item 1
<li>List item 1</li> ii. List item 2
<li>List item 2</li> iii. List item 3
<li>List item 3</li> iv. List item 4
<li>List item 4</li>
</ol>
<head>
<link rel="stylesheet" type="text/css"
<link> link
href="[Link]" />
</head>
<marquee
<marquee bgcolor="#cccccc" loop="-1"
> scrolling
scrollamount="2" width="100%">Example
(Internet text
Marquee</marquee>
Explorer)
(Tip)
<menu> • List item 1
<li type="disc">List item 1</li>
o List item 2
<menu> menu <li type="circle">List item 2</li>
▪ List item 3
<li type="square">List item 3</li>
</menu>
<meta name="Description"
content="Description of your site">
<meta> meta Nothing will show (Tip)
<meta name="keywords"
content="keywords describing your site">
<meta HTTP-EQUIV="Refresh"
<meta> meta CONTENT="4;URL=[Link] Nothing will show (Tip)
om/">
<meta http-equiv="Pragma" content="no-
<meta> meta Nothing will show (Tip)
cache">
<meta> meta <meta name="rating" content="General"> Nothing will show (Tip)
<meta> meta <meta name="robots" content="all"> Nothing will show (Tip)
<meta name="robots"
<meta> meta Nothing will show (Tip)
content="noindex,follow">
Numbered Numbered
<ol> 1. List item 1
<li>List item 1</li> 2. List item 2
<li>List item 2</li> 3. List item 3
<li>List item 3</li> 4. List item 4
<li>List item 4</li>
</ol>
Numbered Special Start
Numbered Special Start
5. List item 1
<ol start="5"> 6. List item 2
<li>List item 1</li> 7. List item 3
<li>List item 2</li> 8. List item 4
<li>List item 3</li>
<li>List item 4</li> Lowercase Letters
</ol>
Lowercase Letters a. List item 1
b. List item 2
c. List item 3
<ol type="a">
d. List item 4
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li> Capital Letters
<li>List item 4</li>
</ol> A. List item 1
ordered B. List item 2
<ol> Capital Letters C. List item 3
list
D. List item 4
<ol type="A">
<li>List item 1</li> Capital Letters Special
<li>List item 2</li> Start
<li>List item 3</li>
<li>List item 4</li>
C. List item 1
</ol>
D. List item 2
E. List item 3
Capital Letters Special Start
F. List item 4
<ol type="A" start="3">
Lowercase Roman
<li>List item 1</li>
<li>List item 2</li> Numerals
<li>List item 3</li>
<li>List item 4</li> i. List item 1
</ol> ii. List item 2
iii. List item 3
Lowercase Roman Numerals iv. List item 4
<ol type="i"> Capital Roman Numerals
<li>List item 1</li>
<li>List item 2</li> I. List item 1
<li>List item 3</li> II. List item 2
<li>List item 4</li> III. List item 3
</ol> IV. List item 4
Capital Roman Numerals Capital Roman Numerals
Special Start
<ol type="I">
<li>List item 1</li> VII. List item 1
<li>List item 2</li> VIII. List item 2
<li>List item 3</li> IX. List item 3
<li>List item 4</li> X. List item 4
</ol>
Capital Roman Numerals Special Start
<ol type="I" start="7">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
<form method=post action="/cgi-
bin/[Link]">
<center>
Select an option:
<select>
<option>option 1</option> Select an option: (Tip)
listbox <option selected>option 2</option>
<option> option 2
option <option>option 3</option>
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select><br>
</center>
</form>
This is an example
This is an example displaying the use of the
displaying the use of the
paragraph tag. <p> This will create a line
paragraph tag.
break and a space between lines.
Attributes: This will create a line break
and a space between lines.
Example 1:<br>
<br> Attributes:
<p align="left">
This is an example<br> Example 1:
displaying the use<br>
of the paragraph tag.<br> This is an example
paragrap <br> displaying the use
<p> of the paragraph tag.
h Example 2:<br>
<br>
<p align="right"> Example 2:
This is an example<br>
displaying the use<br> This is an example
of the paragraph tag.<br> displaying the use
<br> of the paragraph tag.
Example 3:<br>
<br>
Example 3:
<p align="center">
This is an example<br>
This is an example
displaying the use<br>
displaying the use
of the paragraph tag.
of the paragraph tag.
small
<small> <small>Example</small> Example (Tip)
(text)
deleted
<strike> <strike>Example</strike> Example
text
strong
<strong> <strong>Example</strong> Example
emphasis
Example 1:
<table border="4" cellpadding="2"
cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
Example 1: (Tip)
Example 2: (Internet Explorer) Column 1 Column 2
<table border="2" bordercolor="#336699"
cellpadding="2" cellspacing="2"
width="100%"> Example 2: (Tip)
<tr>
<td>Column 1</td>
<table> table
<td>Column 2</td> Column 1 Column 2
</tr>
</table>
Example 3: Example 3: (Tip)
<table cellpadding="2" cellspacing="2"
width="100%"> Column 1 Column 2
<tr> Row 2 Row 2
<td bgcolor="#cccccc">Column 1</td>
<td bgcolor="#cccccc">Column 2</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
</tr>
</table>
<table border="2" cellpadding="2"
cellspacing="2" width="100%">
<tr>
table
<td> <td>Column 1</td>
data Column 1 Column 2
<td>Column 2</td>
</tr>
</table>
<div align="center">
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th> Colum Colum Colum
</tr> n1 n2 n3
table <tr>
<th> Row 2 Row 2 Row 2
header <td>Row 2</td>
<td>Row 2</td> Row 3 Row 3 Row 3
<td>Row 2</td> Row 4 Row 4 Row 4
</tr>
<tr>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
</tr>
</table>
</div>
Title of your web page will
documen
<title> <title>Title of your HTML page</title> be viewable in the title
t title
bar.(Tip)
<table border="2" cellpadding="2"
cellspacing="2" width="100%">
<tr>
<tr> table row <td>Column 1</td> Column 1 Column 2
<td>Column 2</td>
</tr>
</table>
<tt> teletype <tt>Example</tt> Example
<u> underline <u>Example</u> Example
Example 1:<br>
<br> Example 1:
<ul>
<li>List item 1</li> • List item 1
<li>List item 2</li> • List item 2
</ul>
<br>
unordere Example 2:<br>
<ul> Example 2:
d list <ul type="disc">
<li>List item 1</li>
<li>List item 2</li> • List item 1
<ul type="circle"> • List item 2
<li>List item 3</li> o List item 3
<li>List item 4</li> o List item 4
</ul>
</ul>