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> |
body of
document |
<BODY>The content of your
page</BODY> |
Contents of your
webpage
(Tip) |
<BR> |
line break |
The contents of your
page<BR>The contents of your page |
The contents of your
page The
contents of your page |
<CENTER> |
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 |
<EMBED>
|
embed
object |
<EMBED
src="yourfile.mid" width="100%" height="60"
align="center"> |
|
<EMBED> |
embed
object |
<EMBED
src="yourfile.mid" autostart="true" hidden="false"
loop="false"> <noembed><bgsound
src="yourfile.mid" loop="1"></noembed> |
|
<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> |
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
document |
<HEAD>Contains elements describing the
document</HEAD> |
Nothing will
show |
<HR> |
horizontal
rule |
<HR> |
Contents of your
webpage
(Tip)
Contents of your
webpage |
<HR> |
horizontal
rule |
<HR
WIDTH="50%" SIZE="3"> |
Contents of your
webpage
Contents of your
webpage |
<HR> |
horizontal
rule |
<HR
WIDTH="50%" SIZE="3" NOSHADE> |
Contents of your
webpage
Contents of your
webpage |
<HR> (Internet Explorer) |
horizontal
rule |
<HR
WIDTH="75%" COLOR="#FF0000" SIZE="4"> |
Contents of your
webpage
Contents of your
webpage |
<HR> (Internet Explorer) |
horizontal
rule |
<HR
WIDTH="25%" COLOR="
SIZE="6"> |
Contents of your
webpage
Contents of your
webpage |
<HTML> |
hypertext markup
language |
<HTML><HEAD><META><TITLE>Title
of your webpage</TITLE></HEAD><BODY>Webpage
contents</BODY></HTML> |
Contents of your
webpage |
<I> |
italic |
<I>Example</I> |
Example |
<IMG> |
image |
<IMG
SRC="Earth.gif" WIDTH="41" HEIGHT="41" BORDER="0" ALT="a
sentence about your site"> |
(Tip) |
<INPUT> |
input field |
Example
1:
<FORM
METHOD=post
ACTION="/cgi-bin/example.cgi"> <INPUT
type="text" size="10" maxlength="30"> <INPUT
type="Submit" VALUE="Submit"> </FORM> |
|
<INPUT> (Internet Explorer) |
input field |
Example
2:
<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> |
|
<INPUT> |
input field |
Example
3:
<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> |
|
<INPUT> |
input field |
Example
4:
<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> |
|
<INPUT> |
input field |
Example
5:
<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> <INPUT
type="Submit"
VALUE="Submit"></CENTER> </FORM> |
|
<INPUT> |
input field |
Example
6:
<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:
(Tip)
- 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> |
(Tip) |
<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
(Tip) |
<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 revent the users browser from storing a webpage in their cache file. The cache file stores webpages for quicker loading the next time the user visits the website. If you make changes to your webpage and you choose not to use the no-cache tag, the user would not see your changes, but the original page that would be loaded from the cache file. ', STICKY, CAPTION, 'META Tags', LEFT);"
onmouseout=nd();
href="javascript:void(0);">(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) |
<OL> |
ordered
list |
Example
1:
<OL> <LI>List item
1 <LI>List item 2 <LI>List item
3 <LI>List item
4 </OL>
Example 2:
<OL
type="a"> <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
- List item 4
Example 2:
- List item 1
- List item 2
- List item 3
- List item 4
|
<OPTION> |
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
(Tip) |
<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="
onmouseover="dcc('This is the HTML color code. Click here to view the color chart and get the code for 216 colors.','HTML Color Code'); return true;"
onmouseout="nd(); return true;"
href="http:/color_chart.htm">#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="
onmouseover="dcc('This is the HTML color code. Click here to view the color chart and get the code for 216 colors.','HTML Color Code'); return true;"
onmouseout="nd(); return true;"
href="http:///216_color_chart.htm">#CCCCCC">Column
1</TD> <TD BGCOLOR="
onmouseover="dcc('This is the HTML color code. Click here to view the color chart and get the code for 216 colors.','HTML Color Code'); return true;"
onmouseout="nd(); return true;"
href="http://www.web-source.net/216_color_chart.htm">#CCCCCC">Column
2</TD> </TR> <TR> <TD>Row
2</TD> <TD>Row
2</TD> </TR> </TABLE>
|
Example 1:
(Tip)
Example 2:
(Tip)
Example 3:
(Tip)
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> |
|
<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
webpage</TITLE> |
Title of your webpage
will be viewable in the title bar.
(Tip) |
<TR> |
table row |
<TABLE BORDER="2"
CELLPADDING="2" CELLSPACING="2"
WIDTH="100%"> <TR> <TD>Column
1</TD> <TD>Column
2</TD> </TR> </TABLE> |
|
<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:
Example
2:
|
MouseOver PopUps provided by:
|