HTML Codes / Tags Chart
Place your message here
HTML Tags Chart
Tag Name Code Example Browser View
<!-- comment <!--This can be viewed in the HTML part of a document--> Nothing will show (Tip)
<A - anchor <A HREF="http://www.yourdomain.com/">Visit Our Site</A> Visit Our Site (Tip)
<B> bold <B>Example</B> Example
<BIG> big (text) <BIG>Example</BIG> Example (Tip)
body of
<BODY> <BODY>The content of your page</BODY> Contents of your webpage (Tip)
document
The contents of your page
<BR> line break The contents of your page<BR>The contents of your page
The contents of your page
<CENTER> center <CENTER>This will center your contents</CENTER>
This will center your contents
<DL>
<DT>Definition Term Definition Term
definition <DD>Definition of the term Definition of the term
<DD>
description <DT>Definition Term Definition Term
<DD>Definition of the term Definition of the term
</DL>
<DL> definition <DL> Definition Term
list <DT>Definition Term Definition of the term
<DD>Definition of the term Definition Term
<DT>Definition Term Definition of the term
<DD>Definition of the term
</DL>
<DL>
<DT>Definition Term Definition Term
definition <DD>Definition of the term Definition of the term
<DT>
term <DT>Definition Term Definition Term
<DD>Definition of the term Definition of the term
</DL>
<EM> emphasis This is an <EM>Example</EM> of using the emphasis tag This is an Example of using the emphasis tag
embed
<EMBED> <EMBED src="yourfile.mid" width="100%" height="60" align="center">
object (Tip)
embed <EMBED src="yourfile.mid" autostart="true" hidden="false" loop="false">
<EMBED>
object <noembed><bgsound src="yourfile.mid" loop="1"></noembed> 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.
<FONT> font <FONT FACE="Times New Roman">Example</FONT> Example (Tip)
<FONT> font <FONT FACE="Times New Roman" SIZE="4">Example</FONT> Example (Tip)
<FONT> font <FONT FACE="Times New Roman" SIZE="+3" COLOR="#FF0000">Example</FONT> Example (Tip)
<FORM action="mailto:you@yourdomain.com">
Name: (Tip)
Name: <INPUT name="Name" value="" size="10"><BR>
<FORM> form Email: <INPUT name="Email" value="" size="10"><BR> Email:
<CENTER><INPUT type="submit"></CENTER>
Submit
</FORM>
Heading 1 Example
<H1> heading 1 <H1>Heading 1 Example</H1>
<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
heading of
<HEAD> <HEAD>Contains elements describing the document</HEAD> Nothing will show
document
horizontal Contents of your webpage (Tip)
<HR> <HR>
rule
Contents of your webpage
Contents of your webpage
horizontal
<HR> <HR WIDTH="50%" SIZE="3">
rule
Contents of your webpage
Contents of your webpage
horizontal
<HR> <HR WIDTH="50%" SIZE="3" NOSHADE>
rule
Contents of your webpage
<HR> Contents of your webpage
horizontal
(Internet <HR WIDTH="75%" COLOR="#FF0000" SIZE="4">
rule
Explorer) Contents of your webpage
<HR> Contents of your webpage
horizontal
(Internet <HR WIDTH="25%" COLOR="#6699FF" SIZE="6">
rule
Explorer) Contents of your webpage
hypertext
<HTML><HEAD><META><TITLE>Title of your
<HTML> markup Contents of your webpage
webpage</TITLE></HEAD><BODY>Webpage contents</BODY></HTML>
language
<I> italic <I>Example</I> Example
<IMG SRC="Earth.gif" WIDTH="41" HEIGHT="41" BORDER="0" ALT="a sentence about
<IMG> image
your site"> (Tip)
Example 1:
Example 1: (Tip)
<INPUT> input field <FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<INPUT type="text" size="10" maxlength="30"> Submit
<INPUT type="Submit" VALUE="Submit">
</FORM>
Example 2:
Example 2: (Tip)
<INPUT> <FORM METHOD=post ACTION="/cgi-bin/example.cgi">
(Internet input field <INPUT type="text" STYLE="color: #FFFFFF; font-family: Verdana; font-weight: bold; font-
Explorer) size: 12px; background-color: #72A4D2;" size="10" maxlength="30"> Submit
<INPUT type="Submit" VALUE="Submit">
</FORM>
Example 3: Example 3: (Tip)
<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<INPUT> input field <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>
<INPUT> input field Example 4: Example 4: (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>
Submit Clear
Example 5:
<FORM METHOD=post ACTION="/cgi-bin/example.cgi">
<CENTER>
Select an option:
<SELECT> Example 5: (Tip)
<OPTION >option 1
<INPUT> input field <OPTION SELECTED>option 2
<OPTION>option 3 Select an option:
<OPTION>option 4 Submit
<OPTION>option 5
<OPTION>option 6
</SELECT><BR>
<INPUT type="Submit" VALUE="Submit"></CENTER>
</FORM>
<INPUT> input field 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
<INPUT type="radio" name="option"> Option 3
Option 2
<BR> Option 3
<BR>
Select an option:<BR>
<INPUT type="checkbox" name="selection"> Selection 1 Select an option:
<INPUT type="checkbox" name="selection" CHECKED> Selection 2 Selection 1
<INPUT type="checkbox" name="selection"> Selection 3
Selection 2
<INPUT type="Submit" VALUE="Submit">
</FORM> Selection 3
Submit
Example 1: (Tip)
Example 1:
List item 1
<MENU>
<LI type="disc">List item 1 o List item 2
<LI type="circle">List item 2
<LI type="square">List item 3 List item 3
</MENU>
<LI> list item
Example 2: Example 2:
<OL type="i">
<LI>List item 1 i. List item 1
<LI>List item 2 ii. List item 2
<LI>List item 3 iii. List item 3
<LI>List item 4
</OL>
iv. List item 4
<LINK> link Visit our <A HREF="http://www.yourdomain.com/">site</A> Visit our site
<MARQUEE>
scrolling <MARQUEE bgcolor="#CCCCCC" loop="-1" scrollamount="2" width="100%">Example
(Internet (Tip)
text Marquee</MARQUEE> @ Example
Explorer)
<MENU> List item 1
<LI type="disc">List item 1
<MENU> menu <LI type="circle">List item 2 o List item 2
<LI type="square">List item 3
</MENU>
List item 3
<META name="Description" content="Description of your site">
<META> meta Nothing will show (Tip)
<META name="keywords" content="keywords describing your site">
<META> meta <META HTTP-EQUIV="Refresh" CONTENT="4;URL=http://www.yourdomain.com/"> Nothing will show (Tip)
<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)
Example 1:
Example 1:
<OL> 1. List item 1
<LI>List item 1 2. List item 2
<LI>List item 2
<LI>List item 3
3. List item 3
<LI>List item 4 4. List item 4
</OL>
<OL> ordered list Example 2:
Example 2:
a. List item 1
<OL type="a"> b. List item 2
<LI>List item 1 c. List item 3
<LI>List item 2
<LI>List item 3
<LI>List item 4 d. List item 4
</OL>
<OPTION> listbox <FORM METHOD=post ACTION="/cgi-bin/example.cgi"> Select an option: (Tip)
option <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>
This is an example displaying the use of the paragraph tag. <P> This will create a line
This is an example displaying the use of the paragraph tag.
break and a space between lines.
Attributes: This will create a line break 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> displaying the use
of the paragraph tag.<BR> of the paragraph tag.
<BR>
Example 3:<BR>
Example 3:
<BR>
<P align="center">
This is an example
This is an example<BR>
displaying the use
displaying the use<BR>
of the paragraph tag.
of the paragraph tag.
<SMALL> small (text) <SMALL>Example</SMALL> Example (Tip)
strong
<STRONG> <STRONG>Example</STRONG> Example
emphasis
<TABLE> table Example 1: Example 1: (Tip)
<TABLE BORDER="4" CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD>Column 1</TD>
<TD>Column 2</TD>
</TR>
</TABLE>
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>
<TD>Column 2</TD> Column 1 Column 2
</TR>
</TABLE>
Example 3: Example 3: (Tip)
<TABLE CELLPADDING="2" CELLSPACING="2" WIDTH="100%"> Column 1 Column 2
<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>
<TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD>Column 1</TD>
<TD> table data
<TD>Column 2</TD> Column 1 Column 2
</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>
<TD>Row 2</TD> Column 1 Column 2 Column 3
</TR>
table Row 2 Row 2 Row 2
<TH> <TR>
header Row 3 Row 3 Row 3
<TD>Row 3</TD>
<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> <TITLE>Title of your webpage</TITLE> Title of your webpage will be viewable in the title bar. (Tip)
title
<TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD>Column 1</TD>
<TR> table row Column 1 Column 2
<TD>Column 2</TD>
</TR>
</TABLE>
<TT> teletype <TT>Example</TT> Example
<U> underline <U>Example</U> Example
<UL> unordered Example 1:<BR> Example 1:
<BR>
<UL>
<LI>List item 1 List item 1
<LI>List item 2 List item 2
</UL>
<BR>
Example 2:<BR>
list <UL type="disc"> Example 2:
<LI>List item 1
<LI>List item 2 List item 1
<UL type="circle"> List item 2
<LI>List item 3
o List item 3
<LI>List item 4
</UL>
</UL> o List item 4
