Example: HTML Tags Chart
Uploaded by
sumanthExample: HTML Tags Chart
Uploaded by
sumanthHTML tags
HTML Tags Chart
To use any of the following HTML tags, simply select the HTML code you'd like and copy a nd paste it into your web
page.
Tag Name Code Example Browser View
<!--This can be viewed in the HTML part of a
<!-- comment Nothing will show (Tip)
document-->
<a href="http://www.domain.com/">
<a - anchor Visit Our Site (Tip)
Visit Our Site</a>
<b> bold <b>Example</b> Example
<big> big (text) <big>Example</big> Example (Tip)
body of
Contents of your web page
<body> HTML <body>The content of your HTML page</body>
(Tip)
document
The contents of your page<br>The contents of your The contents of your web page
<br> line break
page The contents of your web page
<center> center <center>This will center your contents</center> This will center your contents
<dl> Definition Term
<dt>Definition Term</dt> Definition of the
definition <dd>Definition of the term</dd> term
<dd>
description <dt>Definition Term</dt> Definition Term
<dd>Definition of the term</dd> Definition of the
</dl> term
<dl>
<dt>Definition Term</dt> Definition Term
definition <dd>Definition of the term</dd> Definition of the term
<dl>
list <dt>Definition Term</dt> Definition Term
<dd>Definition of the term</dd> Definition of the term
</dl>
<dl>
<dt>Definition Term</dt> Definition Term
definition <dd>Definition of the term</dd> Definition of the term
<dt>
term <dt>Definition Term</dt> Definition Term
<dd>Definition of the term</dd> Definition of the term
</dl>
This is an <em>Example</em> of using This is an Example of using
<em> emphasis
the emphasis tag the emphasis tag
embed <embed src="yourfile.mid" width="100%"
<embed>
object height="60" align="center"> (Tip)
<embed src="yourfile.mid" autostart="true" Music will begin playing when
embed hidden="false" loop="false"> your page is loaded and will
<embed>
object <noembed><bgsound src="yourfile.mid" only play one time. A control
loop="1"></noembed> panel will be displayed to
enable your visitors to stop the
music.
<font> font <font face="Times New Roman">Example</font> Example (Tip)
<font face="Times New Roman"
<font> font Example (Tip)
size="4">Example</font>
<font face="Times New Roman" size="+3"
<font> font
color="#ff0000">Example</font> Example (Tip)
<form action="mailto:you@yourdomain.com">
Name: <input name="Name" value="" Name: (Tip)
size="10"><br>
<form> form Email: <input name="Email" value="" Email:
size="10"><br> Submit Query
<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>
Sumanth Naga
1
HTML tags
heading of
<head>Contains elements describing the
<head> HTML Nothing will show
document</head>
document
Contents of your web page
horizontal
<hr> <hr /> (Tip)
rule
Contents of your web page
Contents of your web page
horizontal
<hr> <hr width="50%" size="3" />
rule
Contents of your web page
Contents of your web page
horizontal
<hr> <hr width="50%" size="3" noshade />
rule
Contents of your web page
<hr> Contents of your web page
horizontal
(Internet <hr width="75%" color="#ff0000" size="4" />
rule
Explorer) Contents of your web page
<hr> Contents of your web page
horizontal
(Internet <hr width="25%" color="#6699ff" size="6" />
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="Earth.gif" width="41" height="41"
<img> image
border="0" alt="text describing the image" />
(Tip)
Example 1:
Example 1: (Tip)
<form method=post action="/cgi-bin/example.cgi">
<input> input field
<input type="text" size="10" maxlength="30"> Submit
<input type="Submit" value="Submit">
</form>
Example 2:
<form method=post action="/cgi-bin/example.cgi"> Example 2: (Tip)
<input> <input type="text" style="color: #ffffff; font-
(Internet input field family: Verdana; font-weight: bold; font-size: 12px; Submit
Explorer) background-color: #72a4d2;" size="10"
maxlength="30">
<input type="Submit" value="Submit">
</form>
Example 3:
<form method=post action="/cgi-bin/example.cgi">
<table border="0" cellspacing="0" Example 3: (Tip)
cellpadding="2"><tr><td
<input> input field bgcolor="#8463ff"><input type="text" size="10"
maxlength="30"></td><td bgcolor="#8463ff"
valign="Middle"> <input type="image"
name="submit" src="yourimage.gif"></td></tr>
</table>
</form>
Example 4: (Tip)
Example 4:
<form method=post action="/cgi-bin/example.cgi">
Enter Your Comments:<br>
<input> input field <textarea wrap="virtual" name="Comments"
rows=3 cols=20 maxlength=100></textarea><br>
<input type="Submit" value="Submit">
<input type="Reset" value="Clear"> Submit Clear
</form>
Sumanth Naga
2
HTML tags
Example 5:
<form method=post action="/cgi-bin/example.cgi">
<center> Example 5: Tip)
Select an option:
<select> Select an option:
<option >option 1</option> option 2
<input> input field <option selected>option 2</option>
<option>option 3</option> Submit
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select><br>
<input type="Submit" value="Submit"></center>
</form>
Example 6: Example 6: (Tip)
<form method=post action="/cgi-bin/example.cgi"> Select an option:
Select an option:<br>
<input type="radio" name="option"> Option 1 Option 1
<input type="radio" name="option" checked>
Option 2 Option 2
<input type="radio" name="option"> Option 3
Option 3
<br>
<input> input field <br>
Select an option:
Select an option:<br>
<input type="checkbox" name="selection"> Selection 1
Selection 1
<input type="checkbox" name="selection" Selection 2
checked> Selection 2
<input type="checkbox" name="selection"> Selection 3
Selection 3 Submit
<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="style.css" />
</head>
<marquee> <marquee bgcolor="#cccccc" loop="-1"
scrolling
(Internet scrollamount="2" width="100%">Example
text (Tip)
Explorer) Marquee</marquee>
<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 Nothing will show (Tip)
CONTENT="4;URL=http://www.yourdomain.com/">
<meta> meta <meta http-equiv="Pragma" content="no-cache"> Nothing will show (Tip)
<meta> meta <meta name="rating" content="General"> Nothing will show (Tip)
<meta> meta <meta name="robots" content="all"> Nothing will show (Tip)
<meta> meta <meta name="robots" content="noindex,follow"> Nothing will show (Tip)
Sumanth Naga
3
HTML tags
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>
a. List item 1
Lowercase Letters 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>
Capital Letters
<li>List item 3</li>
<li>List item 4</li>
</ol> A. List item 1
B. List item 2
Capital Letters C. List item 3
D. List item 4
<ol type="A">
<li>List item 1</li> Capital Letters Special Start
<li>List item 2</li>
<li>List item 3</li> C. List item 1
<li>List item 4</li> D. List item 2
</ol> E. List item 3
ordered F. List item 4
<ol>
list Capital Letters Special Start
Lowercase Roman Numerals
<ol type="A" start="3">
<li>List item 1</li> i. List item 1
<li>List item 2</li> ii. List item 2
<li>List item 3</li> iii. List item 3
<li>List item 4</li> iv. List item 4
</ol>
Capital Roman Numerals
Lowercase Roman Numerals
I. List item 1
<ol type="i">
II. List item 2
<li>List item 1</li>
III. List item 3
<li>List item 2</li>
IV. List item 4
<li>List item 3</li>
<li>List item 4</li>
</ol> Capital Roman Numerals
Special Start
Capital Roman Numerals
VII. List item 1
<ol type="I"> VIII. List item 2
<li>List item 1</li> IX. List item 3
<li>List item 2</li> X. List item 4
<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>
Sumanth Naga
4
HTML tags
<form method=post action="/cgi-bin/example.cgi">
<center>
Select an option:
<select>
<option>option 1</option>
<option selected>option 2</option> Select an option: (Tip)
listbox
<option> <option>option 3</option> option 2
option
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select><br>
</center>
</form>
This is an example displaying the use of the This is an example displaying
paragraph tag. <p> This will create a line break and the use of the paragraph tag.
a space between lines.
This will create a line break
Attributes: and a space between lines.
Example 1:<br> Attributes:
<br>
<p align="left"> Example 1:
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.
<p> paragraph
Example 2:<br>
<br>
Example 2:
<p align="right">
This is an example<br>
This is an example
displaying the use<br>
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> Ex am ple (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)
Column 1 Column 2
Example 2: (Internet Explorer)
<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"
Column 1 Column 2
width="100%">
<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>
Sumanth Naga
5
HTML tags
<table border="2" cellpadding="2" cellspacing="2"
width="100%">
<tr>
<td> table data <td>Column 1</td>
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>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td> Column Column Column
<td>Row 2</td> 1 2 3
table </tr> Row 2 Row 2 Row 2
<th>
header <tr>
<td>Row 3</td> Row 3 Row 3 Row 3
<td>Row 3</td> Row 4 Row 4 Row 4
<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 web page will be
<title> <title>Title of your HTML page</title>
title viewable in the 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>
unordered Example 2:<br>
<ul> Example 2:
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>
Color Color Code Color Color Code
Red #FF0000 W hite #FFFFFF
Turquoise #00FFFF Light Grey #C0C0C0
Light Blue #0000FF Dark Grey #808080
Dark Blue #0000A0 Blac k #000000
Light Purple #FF0080 Orange #FF8040
Dark Purple #800080 Brown #804000
Y ellow #FFFF00 Burgundy #800000
Pastel Green #00FF00 Forest Green #808000
Pink #FF00FF Grass Green #408080
Sumanth Naga
6
HTML tags
Sumanth Naga
7
HTML tags
Sumanth Naga
8