You are on page 1of 9

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
<body>The content of your HTML Contents of your web page
<body> HTML
page</body> (Tip)
document
The contents of your web
The contents of your page<br>The contents of page
<br> line break
your page The contents of your web
page
<center>This will center your This will center your
<center> center
contents</center> contents
<dl> Definition Term
<dt>Definition Term</dt> Definition of the
definition
<dd>Definition of the term</dd> term
<dd> descriptio
<dt>Definition Term</dt> Definition Term
n
<dd>Definition of the term</dd> Definition of the
</dl> term
<dl> Definition Term
<dt>Definition Term</dt> Definition of the
definition <dd>Definition of the term</dd> term
<dl>
list <dt>Definition Term</dt> Definition Term
<dd>Definition of the term</dd> Definition of the
</dl> term
<dl> Definition Term
<dt>Definition Term</dt> Definition of the
definition <dd>Definition of the term</dd> term
<dt>
term <dt>Definition Term</dt> Definition Term
<dd>Definition of the term</dd> Definition of the
</dl> term
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


embed hidden="false" loop="false"> when your page is loaded
<embed>
object <noembed><bgsound src="yourfile.mid" and will only play one time.
loop="1"></noembed> A control panel will be
displayed to enable your
visitors to stop the music.
<font face="Times New
<font> font Example (Tip)
Roman">Example</font>
<font face="Times New Roman"
<font> font
size="4">Example</font> Example (Tip)
<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>

heading
<head>Contains elements describing the
<head> of 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 Submit
<input type="text" size="10"
maxlength="30">
<input type="Submit" value="Submit">
</form>
Example 2:

<form method=post action="/cgi-


Example 2: (Tip)
bin/example.cgi">
<input>
<input type="text" style="color: #ffffff; font-
(Internet input field Submit
family: Verdana; font-weight: bold; font-size:
Explorer)
12px; background-color: #72a4d2;" size="10"
maxlength="30">
<input type="Submit" value="Submit">
</form>
Example 3:

<form method=post action="/cgi-


bin/example.cgi">
Example 3: (Tip)
<table border="0" cellspacing="0"
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: Example 4: (Tip)

<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>

Example 5:

<form method=post action="/cgi-


Example 5: Tip)
bin/example.cgi">
<center>
Select an option:
Select an option:
<select> option 2
<input> input field
<option >option 1</option>
Submit
<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:
Example 6: (Tip)
<form method=post action="/cgi-
Select an option:
bin/example.cgi">
Select an option:<br> Option 1
<input type="radio" name="option"> 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
Selection 3
<input type="checkbox" name="selection">
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
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=http://www.yourdomain.co Nothing will show (Tip)
m/">
<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>
a. List item 1
Lowercase Letters b. List item 2
c. List item 3
ordered <ol type="a"> d. List item 4
<ol>
list <li>List item 1</li>
<li>List item 2</li> Capital Letters
<li>List item 3</li>
<li>List item 4</li>
A. List item 1
</ol>
B. List item 2
C. List item 3
Capital Letters
D. List item 4

<ol type="A">
Capital Letters Special
<li>List item 1</li>
Start
<li>List item 2</li>
<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> Numerals
<li>List item 2</li>
<li>List item 3</li> i. List item 1
<li>List item 4</li> ii. List item 2
</ol> iii. List item 3
iv. List item 4
Lowercase Roman Numerals
Capital Roman Numerals
<ol type="i">
<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
Capital Roman Numerals
Special Start

<ol type="I">
VII. List item 1
<li>List item 1</li>
VIII. List item 2
<li>List item 2</li>
IX. List item 3
<li>List item 3</li>
X. List item 4
<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> Select an option: (Tip)
listbox <option selected>option 2</option> option 2
<option>
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 displaying the use of the This is an example
paragraph tag. <p> This will create a line break displaying the use of the
and a space between lines. paragraph tag.

Attributes: This will create a line break


<p> paragraph 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
<br> displaying the use
Example 2:<br> of the paragraph tag.
<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 Column 1 Column 2
<td>Column 2</td>
</tr>
</table>
Example 3: (Tip)
Example 3:

<table cellpadding="2" cellspacing="2" Column 1 Column 2


width="100%"> Row 2 Row 2
<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>
<td> table data <table border="2" cellpadding="2"
cellspacing="2" width="100%">
Column 1 Column 2
<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>
<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>
Title of your web page will
document
<title> <title>Title of your HTML page</title> be viewable in the title bar.
title
(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> Example 1:
<br>
<ul>
<li>List item 1</li> • List item 1
<li>List item 2</li> • List item 2
</ul>
unordered
<ul> <br>
list
Example 2:<br> Example 2:
<ul type="disc">
<li>List item 1</li>
• List item 1
<li>List item 2</li>
<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>

You might also like