HTML Tags Chart
Tag Name Code Example
<!-- comment <!--This can be viewed in the HTML part of a document-->
<a href="http://www.domain.com/">
<a - anchor
Visit Our Site</a>
<b> bold <b>Example</b>
<big> big (text) <big>Example</big>
body of
<body> HTML <body>The content of your HTML page</body>
document
<br> line break The contents of your page<br>The contents of your page
<center> center <center>This will center your contents</center>
<dl>
<dt>Definition Term</dt>
definition <dd>Definition of the term</dd>
<dd>
description <dt>Definition Term</dt>
<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>
<em> emphasis This is an <em>Example</em> of using the emphasis tag
embed
<embed> <embed src="yourfile.mid" width="100%" height="60" align="center">
object
embed <embed src="yourfile.mid" autostart="true" hidden="false" loop="false">
<embed>
object <noembed><bgsound src="yourfile.mid" loop="1"></noembed>
<font> font <font face="Times New Roman">Example</font>
<font> font <font face="Times New Roman" size="4">Example</font>
<font face="Times New Roman" size="+3"
<font> font
color="#ff0000">Example</font>
<form action="mailto:
[email protected]">
Name: <input name="Name" value="" size="10"><br>
<form> form Email: <input name="Email" value="" 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
<head> HTML <head>Contains elements describing the document</head>
document
horizontal
<hr> <hr />
rule
horizontal
<hr> <hr width="50%" size="3" />
rule
horizontal
<hr> <hr width="50%" size="3" noshade />
rule
<hr>
horizontal
(Internet <hr width="75%" color="#ff0000" size="4" />
rule
Explorer)
<hr>
horizontal
(Internet <hr width="25%" color="#6699ff" size="6" />
rule
Explorer)
<html>
<head>
<meta>
hypertext
<title>Title of your web page</title>
<html> markup
</head>
language
<body>HTML web page contents
</body>
</html>
<i> italic <i>Example</i>
<img src="Earth.gif" width="41" height="41" border="0" alt="text
<img> image
describing the image" />
Example 1:
<form method=post action="/cgi-bin/example.cgi">
<input> input field
<input type="text" size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>
Example 2:
<form method=post action="/cgi-bin/example.cgi">
<input>
<input type="text" style="color: #ffffff; font-family: Verdana; font-
(Internet input field
weight: bold; font-size: 12px; background-color: #72a4d2;" size="10"
Explorer)
maxlength="30">
<input type="Submit" value="Submit">
</form>
Example 3:
<form method=post action="/cgi-bin/example.cgi">
<table border="0" cellspacing="0" cellpadding="2"><tr><td
<input> input field
bgcolor="#8463ff"><input type="text" size="10"
maxlenght="30"></td><td bgcolor="#8463ff" valign="Middle"> <input
type="image" name="submit" src="yourimage.gif"></td></tr> </table>
</form>
<input> input field Example 4:
<form method=post action="/cgi-bin/example.cgi">
Enter Your Comments:<br>
<textarea wrap="virtual" name="Comments" rows=3 cols=20
maxlenght=100></textarea><br>
<input type="Submit" value="Submit">
<input type="Reset" value="Clear">
</form>
Example 5:
<form method=post action="/cgi-bin/example.cgi">
<center>
Select an option:
<select>
<option >option 1</option>
<input> input field <option selected>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select><br>
<input type="Submit" value="Submit"></center>
</form>
Example 6:
<form method=post action="/cgi-bin/example.cgi">
Select an option:<br>
<input type="radio" name="option"> Option 1
<input type="radio" name="option" checked> Option 2
<input type="radio" name="option"> Option 3
<input> input field <br>
<br>
Select an option:<br>
<input type="checkbox" name="selection"> Selection 1
<input type="checkbox" name="selection" checked> Selection 2
<input type="checkbox" name="selection"> Selection 3
<input type="Submit" value="Submit">
</form>
Example 1:
<menu>
<li type="disc">List item 1</li>
<li type="circle">List item 2</li>
<li type="square">List item 3</li>
</MENU>
<li> list item
Example 2:
<ol type="i">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
<head>
<link> link <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<marquee
> <marquee bgcolor="#cccccc" loop="-1" scrollamount="2"
scrolling text
(Internet width="100%">Example Marquee</marquee>
Explorer)
<menu>
<li type="disc">List item 1</li>
<menu> menu <li type="circle">List item 2</li>
<li type="square">List item 3</li>
</menu>
<meta name="Description" content="Description of your site">
<meta> meta
<meta name="keywords" content="keywords describing your site">
<meta HTTP-EQUIV="Refresh"
<meta> meta
CONTENT="4;URL=http://www.yourdomain.com/">
<meta> meta <meta http-equiv="Pragma" content="no-cache">
<meta> meta <meta name="rating" content="General">
<meta> meta <meta name="robots" content="all">
<meta> meta <meta name="robots" content="noindex,follow">
<ol> ordered list Numbered
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
Numbered Special Start
<ol start="5">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
Lowercase Letters
<ol type="a">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
Capital Letters
<ol type="A">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
Capital Letters Special Start
<ol type="A" start="3">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
Lowercase Roman Numerals
<ol type="i">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
Capital Roman Numerals
<ol type="I">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</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/example.cgi">
<center>
Select an option:
<select>
<option>option 1</option>
<option selected>option 2</option>
listbox
<option> <option>option 3</option>
option
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select><br>
</center>
</form>
<p> paragraph This is an example displaying the use of the paragraph tag. <p> This will
create a line break and a space between lines.
Attributes:
Example 1:<br>
<br>
<p align="left">
This is an example<br>
displaying the use<br>
of the paragraph tag.<br>
<br>
Example 2:<br>
<br>
<p align="right">
This is an example<br>
displaying the use<br>
of the paragraph tag.<br>
<br>
Example 3:<br>
<br>
<p align="center">
This is an example<br>
displaying the use<br>
of the paragraph tag.
<small> small (text) <small>Example</small>
<strike> deleted text <strike>Example</strike>
strong
<strong> <strong>Example</strong>
emphasis
Example 1:
<table border="4" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
Example 2: (Internet Explorer)
<table border="2" bordercolor="#336699" cellpadding="2"
cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<table> table <td>Column 2</td>
</tr>
</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>
<td>Column 1</td>
<td> table data
<td>Column 2</td>
</tr>
</table>
<th> table header <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>
</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>
document
<title> <title>Title of your HTML page</title>
title
<table border="2" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<tr> table row
<td>Column 2</td>
</tr>
</table>
<tt> teletype <tt>Example</tt>
<u> underline <u>Example</u>
Example 1:<br>
<br>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<br>
unordered Example 2:<br>
<ul>
list <ul type="disc">
<li>List item 1</li>
<li>List item 2</li>
<ul type="circle">
<li>List item 3</li>
<li>List item 4</li>
</ul>
</ul>
E- Commerce
Submitted by
Rajku
mar s
2008
PEcMB108
