HTML Tag Chart:-
Tag Name Code Example Browser View
<!--This can be viewed in the HTML part of a
<!-- comment Nothing will show
document-->
<a href="http://www.yourdomain.com/">Visit Our
<a - anchor Visit Our Site
Site</a>
<b> bold <b>Example</b> Example
<big> big (text) <big>Example</big> Example
body of
<body> <body>Page Contents</body> Page Contents
document
Page Contents
<br> line break Page Contents<br>Page Contents
Page Contents
<center> center <center>This is centrally aligned</center> This is centrally aligned
<dl>
<dt>This is defined as: This is defined as:
definition <dd>This is defined as: This is defined as:
<dd>
description <dt>This is defined as: This is defined as:
<dd>This is defined as: This is defined as:
</dl>
<dl>
<dt>This is defined as: This is defined as:
definition <dd>This is defined as: This is defined as:
<dl>
list <dt>This is defined as: This is defined as:
<dd>This is defined as: This is defined as:
</dl>
<dl>
<dt>This is defined as: This is defined as:
This is <dd>This is defined as: This is defined as:
<dt>
defined as: <dt>This is defined as: This is defined as:
<dd>This is defined as: This is defined as:
</dl>
This is an <em>Example</em> of using the emphasis This is an Example of using
<em> emphasis
tag the emphasis tag
embed <embed src="yourfile.mid" width="100%" height="60"
<embed>
object align="center">
<embed src="yourfile.mid" autostart="true" Music will begin playing when your
hidden="false" loop="false"> page is loaded and will only play
embed
<embed> <noembed><bgsound src="yourfile.mid" one time. A control panel will be
object
loop="1"></noembed> displayed to enable your visitors to
stop the music.
<font> font <font face="Times New Roman">Example</font> Example
<font face ="Times New Roman"
<font> font
SIZE="4">Example</font> Example
<font face ="Times New Roman" size="+3"
<font> font
color="#FF0000">Example</font> Example
<form> form <form action="mailto:you@yourdomain.com"> Name:
1
Tag Name Code Example Browser View
Name: <input name="Name" value="" size="10"><br>
Email: <input name="Email" value="" size="10"><br> Email:
<center><input type="submit"></center> Submit Query
</form>
<h1> heading 1 <h1>Heading 1 Example</h1>
Heading 1
Example
<h2> heading 2 <h2>Heading 2 Example</h2>
Heading 2
Example
<h3> heading 3 <h3>Heading 3 Example</h3> Heading 3 Example
<h4> heading 4 <h4>Heading 4 Example</h4> Heading 4 Example
<h5> heading 5 <h5>Heading 5 Example</h5> Heading 5 Example
<h6> heading 6 <h6>Heading 6 Example</h6> Heading 6 Example
heading of <head>Contains elements describing the
<head> Nothing will show
document document</head>
Contents of your webpage
horizontal
<hr> <hr>
rule
Contents of your webpage
Contents of your webpage
horizontal
<hr> <hr width="50%" size="3">
rule
Contents of your webpage
Contents of your webpage
horizontal
<hr> <hr width="50%" size="3" noshade>
rule
Contents of your webpage
<hr> Contents of your webpage
horizontal
(Internet <hr width="75%" color="#FF0000" size="4">
rule
Explorer) Contents of your webpage
<hr> Contents of your webpage
horizontal
(Internet <hr width="25%" color="#6699FF" size="6">
rule
Explorer) Contents of your webpage
hypertext <html><head><meta><title>Title of your
<html> markup webpage</title></head><body>Webpage Contents of your webpage
language contents</body></html>
<i> italic <i>Example</i> Example
<img src="Earth.gif" width="41" height="41"
<img> image
border="0" alt="a sentence about your site">
Example 1: Example 1:
<input> input field <form method=post action="/cgi-bin/example.cgi"> Submit
<input type="text" size="10" maxlength="30">
<input type="submit" value="submit">
</form>
2
Tag Name Code Example Browser View
Example 2: Example 2:
<form method=post action="/cgi-bin/example.cgi"> Submit
<input> <input type="text" style="color: #FFFFFF; font-
(Internet input field family: Verdana; font-weight: bold; font-size: 12px;
Explorer) background-color: #72A4D2;" size="10"
maxlength="30">
<input type="Submit" value="Submit">
</form>
Example 3: Example 3:
<form method=post action="/cgi-bin/example.cgi">
Enter Your Comments:<br>
<input> input field <textarea wrap="virtual" name="Comments" rows=3
cols=20 maxlentgh=100></textarea><br>
<input type="Submit" value="Submit">
<input type="reset" value="Clear">
</form> Submit Clear
Example 4: Example 4:
<form method=post action="/cgi-bin/example.cgi"> option 2
<center> Select an option:
Select an option: Submit
<selected>
<option>option 1
<input> input field <option selected>option 2
<option>option 3
<option>option 4
<option>option 5
<option>option 6
</select><br>
<input type="Submit" value="Submit"></center>
</form>
Example 1: Example 1:
<menu> • List item 1
<li type="disc">List item 1 o List item 2
<li type="circle">List item 2 List item 3
<li type="square">List item 3
</menu> Example 2:
<li> list item Example 2:
i. List item 1
<ol type="i"> ii. List item 2
<li>List item 1 iii. List item 3
<li>List item 2 iv. List item 4
<li>List item 3
<li>List item 4
</ol>
3
Tag Name Code Example Browser View
<a href = "http://www.yourdomain.com/"> Visit our
<link> link Visit our site
site </a>
<marquee> <marquee bgcolor="#CCCCCC" loop="-1"
scrolling scrollamount="2" width="100%">Example Marquee
(Internet
text
Explorer) </marquee>
<menu> • List item 1
<li type="disc">List item 1 o List item 2
<menu> menu <li type="circle">List item 2 List item 3
<li type="square">List item 3
</menu>
<meta name="Description" content="Description of
your site">
<meta> meta Nothing will show
<meta name="keywords" content="keywords
describing your site">
<meta HTTP-EQUIV="Refresh"
<meta> meta Nothing will show
CONTENT="4;URL=http://www.yourdomain.com/">
<meta> meta <meta http-equiv="Pragma" content="no-cache"> Nothing will show
<meta> meta <meta name="rating" content="General"> Nothing will show
<meta> meta <meta name="ROBOTS" content="all"> Nothing will show
<meta name="ROBOTS"
<meta> meta Nothing will show
content="NOINDEX,FOLLOW">
Example 1: Example 1:
<ol> 1. List item 1
<li>List item 1 2. List item 2
<li>List item 2
<li>List item 3
3. List item 3
<li>List item 4 4. List item 4
</ol>
<ol> ordered list Example 2:
Example 2:
a. List item 1
<ol type="a"> b. List item 2
<li>List item 1 c. List item 3
<li>List item 2 d. List item 4
<li>List item 3
<li>List item 4
</ol>
<form method=post action="/cgi-bin/example.cgi"> Select an option:
<center> option 2
Select an option:
<select>
<option>option 1
listbox
<option> <option selected>option 2
option
<option >option 3
<option >option 4
<option >option 5
<option >option 6
</select><br>
4
Tag Name Code Example Browser View
</center>
</form>
This is an example displaying the use of the paragraph This is an example displaying the
tag. <p> This will create a line break and a space use of the paragraph tag.
between lines.
This will create a line break and a
Attributes: space between lines.
Example 1:<br> Attributes:
<br>
<p align="left">
This is an example<br> Example 1:
displaying the use<br>
of the paragraph tag.<br> This is an example
<br> displaying the use
<p> paragraph of the paragraph tag.
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 (text) <small>Example</small> Example
strong Example
<strong> <strong>Example</strong>
emphasis
Example 1: Example 1:
<table border="4" cellpadding="2" cellspacing="2" Column 1 Column 2
width="100%">
<tr> Example 2:
<td>Column 1</td>
<td>Column 2</td>
</tr> Column 1 Column 2
<table> table </table>
Example 2: Example 3:
<table border="2" bordercolor="#336699" Column 1 Column 2
cellpadding="2" cellspacing="2" width="100%">
<tr> Row 2 Row 2
<td>Column 1</td>
<td>Column 2</td>
</tr>
5
Tag Name Code Example Browser View
</table>
Example 3:
<table cellpadding="2" cellspacing="2" width="100%">
<tr>
<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> Column 1 Column 2
<td> table data <td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
<div align="center">
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td> Column 1 Column 2 Column 3
table </tr> Row 2 Row 2 Row 2
<th>
header <tr> Row 3 Row 3 Row 3
<td>Row 3</td> Row 4 Row 4 Row 4
<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>
document Title of your webpage will be
<tltle> <title>Title of your webpage</title>
title viewable in the title bar.
<table border="2" cellpadding="2" cellspacing="2"
width="100%">
<tr> table row <tr>
<td>Column 1</td> Column 1 Column 2
<td>Column 2</td>
6
Tag Name Code Example Browser View
</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 • List item 1
<li>List item 2 • List item 2
</ul>
<br>
unordered Example 2:<br>
<ul> Example 2:
list <ul type="disc">
<li>List item 1
<li>List item 2 • List item 1
<ul type="circle"> • List item 2
<li>List item 3 o List item 3
<li>List item 4 o List item 4
</ul>
</ul>
