HTML Tags
Name
HTML Tag
HTML Code Example
Browser View
HTML Comment
<!--
<!--This can be viewed in the HTML part of a
document-->
Nothing will show (Tip)
HTML Anchor
<a>
<a href="http://www.domain.com/">
Visit Our Site</a>
Visit Our Site (Tip)
HTML Bold
<b>
<b>Example</b>
Example
HTML Big (Text)
<big>
<big>Example</big>
Example (Tip)
Body of HTML
Document
<body>
<body>The content of your HTML page</body>
Contents of your web page (Tip)
HTML Line Break <br>
The contents of your page<br>The contents of your page
The contents of your page
The contents of your page
HTML Center
<center>
<center>This will center your contents</center>
<dd>
<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
<dl>
<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
<dl>
<dt>Definition Term</dt>
<dd>Definition of the term</dd>
<dt>Definition Term</dt>
Definition Term
Definition of the term
Definition Term
Definition of the term
HTML Definition
Description
HTML Definition
List
HTML Definition
Term
<dt>
This will center your contents
<dd>Definition of the term</dd>
</dl>
This is an Example of using the emphasis
tag
HTML Emphasis
<em>
This is an <em>Example</em> of using the emphasis tag
HTML Embed
Object
<embed>
<embed src="yourfile.mid" width="100%" height="60"
align="center">
HTML Embed
Object
<embed>
<embed src="yourfile.mid" autostart="true"
hidden="false" loop="false">
<noembed><bgsound src="yourfile.mid"
loop="1"></noembed>
HTML Font
<font>
<font face="Times New Roman">Example</font>
Example (Tip)
HTML Font
<font>
<font face="Times New Roman"
size="4">Example</font>
Example (Tip)
HTML Font
<font>
<font face="Times New Roman" size="+3"
color="#ff0000">Example</font>
Example (Tip)
Name:
<form>
<form action="mailto:you@yourdomain.com">
Name: <input name="Name" value="" size="10"><br>
Email: <input name="Email" value="" size="10"><br>
<center><input type="submit"></center>
</form>
HTML Form
Name
HTML Tag
HTML Code Example
(Tip)
Music will begin playing when your page is
loaded and will only play one time. A
control panel will be displayed to enable
your visitors to stop the music.
(Tip)
Email:
Browser View
HTML Heading 1
HTML Heading 2
HTML Heading 3
HTML Heading 4
HTML Heading 5
HTML Heading 6
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<h1>Heading 1 Example</h1>
<h2>Heading 2 Example</h2>
<h3>Heading 3 Example</h3>
<h4>Heading 4 Example</h4>
<h5>Heading 5 Example</h5>
<h6>Heading 6 Example</h6>
Heading of HTML
<head>
Document
<head>Contains elements describing the
document</head>
HTML Horizontal
<hr>
Rule
<hr />
Nothing will show
Contents of your web page (Tip)
Contents of your web page
Contents of your web page
HTML Horizontal
<hr>
Rule
<hr width="50%" size="3" />
HTML Horizontal
<hr>
Rule
<hr width="50%" size="3" noshade />
<hr>
HTML Horizontal
(Internet
Rule
Explorer)
<hr>
HTML Horizontal
(Internet
Rule
Explorer)
HTML Hypertext <html>
Markup Language
Contents of your web page
Contents of your web page
Contents of your web page
Contents of your web page
<hr width="75%" color="#ff0000" size="4" />
Contents of your web page
Contents of your web page
<hr width="25%" color="#6699ff" size="6" />
Contents of your web page
<html>
<head>
<meta>
<title>Title of your web page</title>
</head>
<body>HTML web page contents
</body>
Contents of your web page
</html>
HTML Italic
<i>
<i>Example</i>
HTML Image
<img>
<img src="Earth.gif" width="41" height="41"
border="0" alt="text describing the image" />
Example
(Tip)
Example:
HTML Input Field <input>
HTML Input
Password
<input>
<form method=post action="/cgi-bin/example.cgi">
<input type="text" size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>
Example: (Tip)
<form method=post action="/cgi-bin/example.cgi">
<input type="password" size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>
Example:
HTML Input
(Background
Color)
<input>
(Internet
Explorer)
<form method=post action="/cgi-bin/example.cgi">
<input type="text" style="color: #ffffff; font-family:
Verdana; font-weight: bold; font-size: 12px;
background-color: #72a4d2;" size="10"
maxlength="30">
<input type="Submit" value="Submit">
</form>
Example: (Tip)
Example:
HTML Input
(Image Submit
Button)
HTML Input
(Comment Box)
<input>
<input>
<form method=post action="/cgi-bin/example.cgi">
<table border="0" cellspacing="0"
cellpadding="2"><tr><td 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:
Example: (Tip)
Example: (Tip)
<form method=post action="/cgi-bin/example.cgi">
Enter Your Comments:<br>
<textarea wrap="virtual" name="Comments" rows=3
cols=20 maxlength=100></textarea><br>
<input type="Submit" value="Submit">
<input type="Reset" value="Clear">
</form>
Example:
HTML Input
(Radio Button)
<input>
Select an option:
<form method=post action="/cgi-bin/example.cgi">
Option 1
Select an option:<br>
<input type="radio" name="option"> Option 1
Option 2
<input type="radio" name="option" checked> Option 2
<input type="radio" name="option"> Option 3
<input type="Submit" value="Submit">
Option 3
</form>
Example:
HTML Input
(Checkbox)
<input>
HTML List Item
<li>
Example: (Tip)
Example: (Tip)
<form method=post action="/cgi-bin/example.cgi">
Select an option:
Select an option:<br>
Selection 1
<input type="checkbox" name="selection"> Selection 1
<input type="checkbox" name="selection" checked>
Selection 2
Selection 2
<input type="checkbox" name="selection"> Selection 3
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>
Example 2:
Example 1: (Tip)
List item 1
o List item 2
List item 3
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>
HTML Link
<link>
i.
List item 1
ii.
List item 2
iii.
List item 3
iv.
List item 4
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
(Tip)
HTML Scrolling
Text
HTML Menu
<marquee> <marquee bgcolor="#cccccc" loop="-1"
(Internet
scrollamount="2" width="100%">Example
Explorer)
Marquee</marquee>
<menu>
<menu>
<li type="disc">List item 1</li>
<li type="circle">List item 2</li>
<li type="square">List item 3</li>
</menu>
List item 1
o List item 2
List item 3
HTML Meta
<meta>
<meta name="Description" content="Description of
your site">
Nothing will show (Tip)
<meta name="keywords" content="keywords describing
your site">
HTML Meta
<meta>
<meta HTTP-EQUIV="Refresh"
CONTENT="4;URL=http://www.yourdomain.com/">
Nothing will show (Tip)
HTML Meta
<meta>
<meta http-equiv="Pragma" content="no-cache">
Nothing will show (Tip)
HTML Meta
<meta>
<meta name="rating" content="General">
Nothing will show (Tip)
HTML Meta
<meta>
<meta name="robots" content="all">
Nothing will show (Tip)
HTML Meta
<meta>
<meta name="robots" content="noindex,follow">
Nothing will show (Tip)
Name
HTML Ordered
List
HTML Tag
<ol>
HTML Code Example
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>
Browser View
Numbered
1. List item 1
2. List item 2
3. List item 3
4. List item 4
Numbered Special Start
5. List item 1
6. List item 2
7. List item 3
8. List item 4
Lowercase Letters
a. List item 1
b. List item 2
c. List item 3
d. List item 4
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
Capital Letters
A. List item 1
B. List item 2
Capital Letters Special Start
C. List item 3
<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>
D. List item 4
Capital Letters Special Start
C. List item 1
Lowercase Roman Numerals
D. List item 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>
E. List item 3
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>
F. List item 4
Lowercase Roman Numerals
i.
List item 1
ii.
List item 2
iii.
List item 3
iv.
List item 4
Capital Roman Numerals
I.
List item 1
II.
List item 2
III.
List item 3
IV.
List item 4
Capital Roman Numerals Special Start
<li>List item 3</li>
<li>List item 4</li>
</ol>
HTML Listbox
Option (Drop
Down Box)
<option>
<form method=post action="/cgi-bin/example.cgi">
<center>
Select an option:
<select>
<option>option 1</option>
<option selected>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select><br>
</center>
</form>
HTML Mailto
Email Link
<a>
<a href="mailto:you@yourdomain.com">Email
Link</a>
HTML
Paragraph
<p>
This is an example displaying the use of the paragraph
tag. <p> This will create a line break and a space
between lines.
Attributes:
<p align="left">
VII.
List item 1
VIII.
List item 2
IX.
List item 3
X.
List item 4
Select an option: (Tip)
Email Link
This is an example displaying the use of the
HTML paragraph tag.
This will create a line break and a space
between lines.
Attributes:
Example 1:<br />
<br />
This is an example<br>
displaying the use<br>
of the paragraph tag.</p>
<p align="right">
Example 2:<br>
<br>
This is an example<br>
displaying the use<br>
of the paragraph tag.</p>
<p align="center">
Example 3:<br>
<br>
This is an example<br>
displaying the use<br>
of the paragraph tag.</p>
Example 1:
This is an example
displaying the use
of the paragraph tag.
Example 2:
This is an example
displaying the use
of the paragraph tag.
Example 3:
This is an example
displaying the use
of the paragraph tag.
HTML Small
(Text)
<small>
<small>Example</small>
Example
HTML Deleted
Text
<strike>
<strike>Example</strike>
Example
HTML Strong
<strong>
<strong>Example</strong>
Example
Example 1:
Example 1: (Tip)
HTML Table
<table>
<table border="4" cellpadding="2" cellspacing="2"
width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
(Tip)
Column 1
Column 2
Example 2: (Tip)
Column 1
Column 2
Example 2: (Internet Explorer)
<table border="2" bordercolor="#336699"
cellpadding="2" cellspacing="2" width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
HTML Table
Data
HTML Table
Header
<td>
<th>
Example 3:
Example 3: (Tip)
<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>
Column 1
Row 2
Column 2
Row 2
Column 1
Column 2
<table border="2" cellpadding="2" cellspacing="2"
width="100%">
<tr>
<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>
Column 1
Row 2
Row 3
Row 4
Column 2
Row 2
Row 3
Row 4
Column 3
Row 2
Row 3
Row 4
<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>
HTML
Document Title
<title>
<title>Title of your HTML page</title>
Title of your web page will be viewable in the
title bar. (Tip)
HTML Table
Row
<tr>
<table border="2" cellpadding="2" cellspacing="2"
width="100%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
Column 1
HTML Teletype
<tt>
<tt>Example</tt>
Example
HTML Underline <u>
<u>Example</u>
Example
HTML
Unordered List
Example 1:<br>
<br>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<br>
Example 2:<br>
Example 1:
<ul>
List item 1
List item 2
Column 2
<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>
http://www.web-source.net/html_codes_chart.htm
for detailed sample of codes and output
http://www.quackit.com/html/tutorial/html_links.cfm
http://www.quackit.com/html/examples/
Example 2:
List item 1
List item 2
o List item 3
o List item 4
