HTML Tags Chart

Tag

Name

Code Example

Browser View

Nothing will show

<A - anchor <A HREF="http://www.yourdomain.com/"></A> Visit Our Site

<B> bold <B>Example</B> Example

<BODY> body of HTML document <BODY>The content of your HTML page</BODY> Contents of your web page

<BR> line break The contents of your page<BR>The contents of your page The contents of your web page
The contents of your web page

center

<CENTER>This will center your contents</CENTER>

This will center your contents

<DD>

definition description

<DL>
<DT>Definition Term
<DD>Definition of the term
<DT>Definition Term
<DD>Definition of the term
</DL>

Definition Term: Definition of the term
Definition Term: Definition of the term

<DL>

definition list

<DL>
<DT>Definition Term
<DD>Definition of the term
<DT>Definition Term
<DD>Definition of the term
</DL>

Definition Term: Definition of the term
Definition Term: Definition of the term

<DT>

definition term

<DL>
<DT>Definition Term
<DD>Definition of the term
<DT>Definition Term
<DD>Definition of the term
</DL>

Definition Term: Definition of the term
Definition Term: Definition of the term

<EM> emphasis This is an <EM>Example</EM> of using the emphasis tag This is an Example of using the emphasis tag

<FONT> font <FONT FACE="Times New Roman">Example</FONT> Example

<FONT> font <FONT FACE="Times New Roman" SIZE="4">Example</FONT> Example

<FONT> font <FONT FACE="Times New Roman" SIZE="+3" COLOR="#FF0000">Example</FONT> Example

<FORM>

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>

<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

<HEAD> heading of HTML document <HEAD>Contains elements describing the document</HEAD> Nothing will show

<HR>

horizontal rule

<HR>

Contents of your web page

<HR>

horizontal rule

<HR WIDTH="50%" SIZE="3">

Contents of your web page

<HR>

horizontal rule

<HR WIDTH="50%" SIZE="3" NOSHADE>

Contents of your web page

<HR>

horizontal rule

<HR WIDTH="75%" COLOR="#FF0000" SIZE="4">

Contents of your web page

<HTML> hypertext markup language <HTML><HEAD><META><TITLE>Title of your web page</TITLE></HEAD><BODY>HTML web page contents</BODY></HTML> Contents of your web page

<I> italic <I>Example</I> Example

<IMG> image <IMG SRC="html.jpg" WIDTH="55" HEIGHT="41" BORDER="0" ALT="a sentence of what your image is">

<INPUT>

input field

Example 1:

<FORM METHOD=post ACTION="index.html">
<INPUT type="text" size="10" maxlength="30">
<INPUT type="Submit" VALUE="Submit">
</FORM>

<INPUT>
(Internet Explorer)

input field

Example 2:

<FORM METHOD=post ACTION="index.html">
<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>

<INPUT>

input field

Example 3:

<FORM METHOD=post ACTION="index.html">
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>

<INPUT>

input field

Example 4:

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

<LI>

list item

Example 1:

<MENU>
<LI type="disc">List item 1
<LI type="circle">List item 2
<LI type="square">List item 3
</MENU>

Example 2:

<OL type="i">
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>

Example 1:

List item 1
List item 2
List item 3

Example 2:

List item 1
List item 2
List item 3
List item 4

<LINK> link Visit our <A HREF="http://www.yourdomain.com/">site</A> Visit our site

<MARQUEE>
(Internet
Explorer) scrolling text <MARQUEE bgcolor="#CCCCCC loop="-1" scrollamount="2" width="100%">Example Marquee</MARQUEE> Example Marquee

<MENU>

menu

<MENU>
<LI type="disc">List item 1
<LI type="circle">List item 2
<LI type="square">List item 3
</MENU>

List item 1
List item 2
List item 3

<META> meta <META name="Description" content="Description of your site">
<META name="keywords" content="keywords describing your site"> Nothing will show

<META> meta <META HTTP-EQUIV="Refresh" CONTENT="4;URL=http://www.yourdomain.com/"> Nothing will show

<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> meta <META NAME="ROBOTS" content="NOINDEX,FOLLOW"> Nothing will show

<OL>

ordered list

Numbered

<OL>
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>

Numbered Special Start

<OL start="5">
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>

Lowercase Letters

<OL type="a">
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>

Capital Letters

<OL type="A">
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>

Capital Letters Special Start

<OL type="A" start="3">
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>

Lowercase Roman Numerals

<OL type="i">
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>

Capital Roman Numerals

<OL type="I">
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>

Capital Roman Numerals Special Start

<OL type="I" start="7">
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>

Numbered

List item 1
List item 2
List item 3
List item 4

Numbered Special Start

List item 1
List item 2
List item 3
List item 4

Lowercase Letters

List item 1
List item 2
List item 3
List item 4

Capital Letters

List item 1
List item 2
List item 3
List item 4

Capital Letters Special Start

List item 1
List item 2
List item 3
List item 4

Lowercase Roman Numerals

List item 1
List item 2
List item 3
List item 4

Capital Roman Numerals

List item 1
List item 2
List item 3
List item 4

Capital Roman Numerals Special Start

List item 1
List item 2
List item 3
List item 4

listbox option

<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<CENTER>
Select an option:
<SELECT>
<OPTION>option 1
<OPTION SELECTED>option 2
<OPTION>option 3
<OPTION>option 4
<OPTION>option 5
<OPTION>option 6
</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.

This is an example displaying the use of the paragraph tag.

This will create a line break and a space between lines.

Attributes:

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.

<SMALL> small (text) <SMALL>Example</SMALL> Example

<STRONG> strong emphasis <STRONG>Example</STRONG> Example

<TABLE>

table

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

Example 1:

Column 1

Column 2

Example 2:

Column 1 Column 2

Example 3:

Column 1 Column 2

Row 2 Row 2

<TD>

table data

<TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD>Column 1</TD>
<TD>Column 2</TD>
</TR>
</TABLE>

Column 1

Column 2

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

Column 1	Column 2	Column 3
Row 2	Row 2	Row 2
Row 3	Row 3	Row 3
Row 4	Row 4	Row 4

<TITLE> document title <TITLE>Title of your HTML page</TITLE> Title of your web page will be viewable in the title bar.

<TR>

table row

<TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD>Column 1</TD>
<TD>Column 2</TD>
</TR>
</TABLE>

Column 1 Column 2

<TT> teletype <TT>Example</TT> Example

<U> underline <U>Example</U> Example

<UL>

unordered list

Example 1:<BR>
<BR>
<UL>
<LI>List item 1
<LI>List item 2
</UL>
<BR>
Example 2:<BR>
<UL type="disc">
<LI>List item 1
<LI>List item 2
<UL type="circle">
<LI>List item 3
<LI>List item 4
</UL>
</UL>

Example 1:

List item 1
List item 2

Example 2:

List item 1
List item 2
- List item 3
- List item 4