HTML Tags Chart

HTML Tags Chart
To use any of the following HTML tags, simply select the HTML code you'd like and copy and paste it into
your web page.
Tag Name Code Example Browser View


<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
<body> HTML Contents of your web page (Tip)
page</body>
document
The contents of your page<br>The contents of The contents of your web page
<br> line break
your page The contents of your web page
<center>This will center your
<center> center This will center your contents
contents</center>
<dl>
<dt>Definition Term</dt> Definition Term
definition
<dd>Definition of the term</dd> Definition of the term
<dd> descriptio
n
</dl>
<dl>
definition <dd>Definition of the term</dd> Definition of the term
<dl>
list <dt>Definition Term</dt> Definition Term
</dl>
<dl>
definition <dd>Definition of the term</dd> Definition of the term
<dt>
term <dt>Definition Term</dt> Definition Term
</dl>
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 when
embed hidden="false" loop="false">
<embed> your page is loaded and will only
object <noembed><bgsound src="yourfile.mid"
play one time. A control panel
loop="1"></noembed>
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> font
<font face="Times New Roman" size="+3"
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>
<center><input type="submit"></center> Submit Query
</form>
<h1> heading 1 <h1>Heading 1 Example</h1>

heading of
<head>Contains elements describing the
<head> HTML Nothing will show
document</head>
document
horizontal Contents of your web page (Tip)

<hr> <hr />
rule
Contents of your web page
horizontal
<hr> <hr width="50%" size="3" />
rule
horizontal
<hr> <hr width="50%" size="3" noshade />
rule
<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)
<input> input field Example 1: Example 1: (Tip)
<form method=post action="/cgi-

Submit
bin/example.cgi">
<input type="text" size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>
Example 2:

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

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

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="Reset" value="Clear"> Submit Clear
</form>
Example 5:

bin/example.cgi">
<center>
Select an option:
<select> Example 5: Tip)
<option >option 1</option>
<input> input field <option selected>option 2</option> Select an option:
<option>option 3</option>
<option>option 5</option> Submit
</select><br>
<input type="Submit"
value="Submit"></center>
</form>
<input> input field 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>
<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
<input type="checkbox" name="selection"> Selection 3
Selection 3
<input type="Submit" value="Submit"> Submit
</form>
Example 1: (Tip)
Example 1:  List item 1
<menu> o List item 2

<li type="disc">List item 1</li>
<li type="circle">List item 2</li>
<li type="square">List item 3</li>  List item 3
</MENU>
<li> list item
Example 2:
Example 2:
<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>
<li>List item 4</li> iii. List item 3
</ol>
iv. List item 4
<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>
<menu> menu <li type="circle">List item 2</li> o List item 2
<li type="square">List item 3</li>
</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 HTTP-EQUIV="Refresh"
<meta> meta CONTENT="4;URL=http://www.yourdomain.com Nothing will show (Tip)
/">
<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> meta <meta name="robots" Nothing will show (Tip)
content="noindex,follow">
<ol> ordered Numbered Numbered
list 1. List item 1
<ol> 2. List item 2
<li>List item 2</li> 3. List item 3
</ol>
Numbered Special Start
Numbered Special Start
<ol start="5"> 5. List item 1

</ol> 8. List item 4
Lowercase Letters Lowercase Letters
<ol type="a"> a. List item 1

<li>List item 1</li> b. List item 2
c. List item 3
</ol>
d. List item 4
Capital Letters
Capital Letters
<ol type="A">
<li>List item 1</li> A. List item 1
<li>List item 2</li> B. List item 2
<li>List item 4</li> C. List item 3
</ol>
D. List item 4
Capital Letters Special Start
Capital Letters Special Start
<ol type="A" start="3">
<li>List item 1</li> C. List item 1
<li>List item 2</li> D. List item 2
<li>List item 4</li> E. List item 3
</ol>
F. List item 4
Lowercase Roman Numerals
Lowercase Roman Numerals

<ol type="i">
<li>List item 2</li> i. List item 1
<li>List item 3</li> ii. List item 2
</ol> iii. List item 3
Capital Roman Numerals iv. List item 4
<ol type="I"> Capital Roman Numerals

<li>List item 2</li> I. List item 1
<li>List item 3</li> II. List item 2
III. List item 3
IV. List item 4

</ol>
Capital Roman Numerals Special Start Capital Roman Numerals

Special Start
<ol type="I" start="7">

<li>List item 1</li> VII. List item 1
<li>List item 2</li> VIII. List item 2
<li>List item 4</li> IX. List item 3
</ol>
X. List item 4
bin/example.cgi">
<center>
Select an option:
<select>
Select an option: (Tip)
listbox <option selected>option 2</option>
<option>
option <option>option 3</option>
</select><br>
</center>
</form>
This is an example displaying the use of the This is an example displaying the
paragraph tag. <p> This will create a line break use of the paragraph tag.
and a space between lines.
This will create a line break and
Attributes: 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>
<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
<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>
Column 1 Column 2
Example 2: (Internet Explorer)
<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>
<tr>
<td> table data <td>Column 1</td>
Column 1 Column 2
<td>Column 2</td>
</tr>
</table>
<th> table <div align="center"> Column 1 Column 2 Column 3
header <table> Row 2 Row 2 Row 2
<tr> Row 3 Row 3 Row 3
<th>Column 1</th>
Row 4 Row 4 Row 4
<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>
document Title of your web page will be
<title> <title>Title of your HTML page</title>
title viewable in the title bar. (Tip)
<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:
Example 1:<br>
<br>
<ul>  List item 1
<li>List item 1</li>  List item 2
</ul>
<br>
unordered Example 2:<br> Example 2:
<ul>
list <ul type="disc">
<li>List item 1</li>  List item 1
<ul type="circle">  List item 2
<li>List item 4</li> o List item 3
</ul>
</ul> o List item 4
Table of Contents
1. INTRODUCTORY MATERIAL
o What is unique about this guide
o Which HTML tags are included
o How this document is formatted (including a description of symbols and

abbreviations)
2. HTML TAGS
o basic elements (all HTML documents should have these)
o structural definition (appearance controlled by the browser's preferences)
o presentation formatting (author specifies text appearance)
o links, graphics, and sounds
o positioning
o dividers
o lists
o backgrounds and colors
o special characters
o forms
o tables
o frames
o scripts and java
o miscellaneous
Important: If you are not clear about the differences between the various versions of
HTML, I suggest that you read my discussion of the development of HTML, or the
World Wide Web Consortium HTML activity statement.
BASIC ELEMENTS
Document Type <HTML></HTML> (beginning and end of file)
Title <TITLE></TITLE> (must be in header)
Header <HEAD></HEAD> (descriptive info, such as title)
Body <BODY></BODY> (bulk of the page)
STRUCTURAL DEFINITION
Heading <H?></H?> (the spec. defines 6 levels)
<H? ALIGN=LEFT|CENTER|
Align Heading RIGHT></H?>
Division <DIV></DIV>
Align Division <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
4.0 Defined Content <SPAN></SPAN>
Block Quote <BLOCKQUOTE></BLOCKQUOTE> (usually indented)
4.0 Quote <Q></Q> (for short quotations)
4.0 Citation <Q CITE="URL"></Q>
Emphasis <EM></EM> (usually displayed as italic)
Strong Emphasis <STRONG></STRONG> (usually displayed as bold)
Citation <CITE></CITE> (usually italics)
Code <CODE></CODE> (for source code listings)
Sample Output <SAMP></SAMP>
Keyboard Input <KBD></KBD>
Variable <VAR></VAR>
Definition <DFN></DFN> (not widely implemented)
Author's
<ADDRESS></ADDRESS>
Address
Large Font Size <BIG></BIG>
Small Font Size <SMALL></SMALL>
4.0 Insert <INS></INS> (marks additions in a new version)
4.0 Time of Change <INS DATETIME=":::"></INS>
4.0 Comments <INS CITE="URL"></INS>
4.0 Delete <DEL></DEL> (marks deletions in a new version)
4.0 Time of Change <DEL DATETIME=":::"></DEL>
4.0 Comments <DEL CITE="URL"></DEL>
4.0 Acronym <ACRONYM></ACRONYM>
4.0 Abbreviation <ABBR></ABBR>
PRESENTATION FORMATTING
Bold <B></B>
Italic <I></I>
4.0* Underline <U></U> (not widely implemented)
Strikeout <STRIKE></STRIKE> (not widely implemented)
4.0* Strikeout <S></S> (not widely implemented)
Subscript <SUB></SUB>
Superscript <SUP></SUP>
Typewriter <TT></TT> (displays in a monospaced font)
Preformatted <PRE></PRE> (display text spacing as-is)
Width <PRE WIDTH=?></PRE> (in characters)
Center <CENTER></CENTER> (for both text and images)
N1 Blinking <BLINK></BLINK> (the most derided tag ever)
Font Size <FONT SIZE=?></FONT> (ranges from 1-7)
Change Font <FONT
SIZE="+|-?"></FONT>
Size
<FONT COLOR="#$$$$$
Font Color $"></FONT>
4.0* Select Font <FONT FACE="***"></FONT>
<FONT POINT-SIZE=?
N4 Point size ></FONT>
N4 Weight <FONT WEIGHT=?></FONT>
4.0* Base Font Size <BASEFONT SIZE=?> (from 1-7; default is 3)
MS Marquee <MARQUEE></MARQUEE>
POSITIONING
N3 Multi-Column <MULTICOL COLS=?></MULTICOL>
N3 Column Gutter <MULTICOL GUTTER=?></MULTICOL>
N3 Column Width <MULTICOL WIDTH=?></MULTICOL>
N3 Spacer <SPACER>
<SPACER TYPE=HORIZONTAL|
N3 Spacer Type VERTICAL|BLOCK>
N3 Size <SPACER SIZE=?>
N3 Dimensions <SPACER WIDTH=? HEIGHT=?>
N3 Alignment <SPACER ALIGN=LEFT|RIGHT|
CENTER>
N4 Layer <LAYER></LAYER>
N4 Name <LAYER ID="***"></LAYER>
N4 Location <LAYER LEFT=? TOP=?></LAYER>
<LAYER PAGEX=? PAGEY=?
N4 Rel. Position ></LAYER>
N4 Source File <LAYER SRC="***"></LAYER>
N4 Stacking <LAYER Z-INDEX=?></LAYER>
<LAYER ABOVE="***"
N4 Stack Position BELOW="***"></LAYER>
<LAYER HEIGHT=? WIDTH=?
N4 Dimensions ></LAYER>
N4 Clipping Path <LAYER CLIP=,,,></LAYER>
N4 Visible? <LAYER VISIBILITY=SHOW|HIDDEN|INHERIT></LAYER>
<LAYER BACKGROUND="$$$$$
N4 Background $"></LAYER>
<LAYER BGCOLOR="$$$$$
N4 Color $"></LAYER>
(takes same attributes as
N4 Inline Layer <ILAYER></ILAYER>
LAYER)
N4 Alt. Content <NOLAYER></NOLAYER>
LINKS, GRAPHICS, AND SOUNDS

Link Something <A HREF="URL"></A>
Link to Location <A HREF="URL#***"></A> (if in another document)
<A HREF="#***"></A> (if in current document)
4.0* Target Window <A HREF="URL" TARGET="***"></A>
4.0* Action on Click <A HREF="URL" ONCLICK="***"></A> (Javascript)
Mouseover
4.0* <A HREF="URL" ONMOUSEOVER="***"></A> (Javascript)
Action
Mouse out
4.0* <A HREF="URL" ONMOUSEOUT="***"></A> (Javascript)
Action
Link to Email <A HREF="mailto:@"></A>
N,
Specify Subject <A HREF="mailto:@?SUBJECT=***"></A> (use a real question mark)
MS
Define Location <A NAME="***"></A>
Display Image <IMG SRC="URL">
Alignment <IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT>
<IMG SRC="URL" ALIGN=TEXTTOP|ABSMIDDLE|BASELINE|
N1 Alignment ABSBOTTOM>
Alternate <IMG SRC="URL" ALT="***"> (if image not displayed)
Dimensions <IMG SRC="URL" WIDTH=? HEIGHT=?> (in pixels)
(as percentage of page
<IMG SRC="URL" WIDTH=% HEIGHT=%>
width/height)
Border <IMG SRC="URL" BORDER=?> (in pixels)
Runaround
<IMG SRC="URL" HSPACE=? VSPACE=?> (in pixels)
Space
N1 Low-Res Proxy <IMG SRC="URL" LOWSRC="URL">
Imagemap <IMG SRC="URL" ISMAP> (requires a script)
Imagemap <IMG SRC="URL" USEMAP="URL">
<IMG DYNSRC="***" START="***" LOOP=?
MS Movie Clip >
Background
MS <BGSOUND SRC="***" LOOP=?|INFINITE>
Sound
Client-Side Map <MAP NAME="***"></MAP> (describes the map)
<AREA SHAPE="DEFAULT|RECT|CIRCLE|POLY" COORDS=",,,"
Map Section HREF="URL"|NOHREF>
N1 Client Pull <META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">
N2 Embed Object <EMBED SRC="URL"> (insert object into page)
N2 Object Size <EMBED SRC="URL" WIDTH=? HEIGHT=?>
4.0 Object <OBJECT></OBJECT>
4.0 Parameters <PARAM>
DIVIDERS
Paragraph <P></P> (closing tag often unnecessary)
<P ALIGN=LEFT|CENTER|
Align Text RIGHT></P>
N Justify Text <P ALIGN=JUSTIFY></P>
Line Break <BR> (a single carriage return)
Clear Textwrap <BR CLEAR=LEFT|RIGHT|ALL>
Horizontal Rule <HR>
<HR ALIGN=LEFT|RIGHT|
Alignment CENTER>
Thickness <HR SIZE=?> (in pixels)
Width <HR WIDTH=?> (in pixels)
Width Percent <HR WIDTH="%"> (as a percentage of page width)
Solid Line <HR NOSHADE> (without the 3D cutout look)
N1 No Break <NOBR></NOBR> (prevents line breaks)
N1 Word Break <WBR> (where to break a line if needed)
LISTS
Unordered List <UL><LI></UL> (before each list item)
Compact <UL COMPACT></UL>
<UL TYPE=DISC|CIRCLE|
Bullet Type SQUARE> (for the whole list)
<LI TYPE=DISC|CIRCLE|
Bullet Type SQUARE> (this & subsequent)
Ordered List <OL><LI></OL> (before each list item)
Compact <OL COMPACT></OL>
Numbering Type <OL TYPE=A|a|I|i|1> (for the whole list)
Numbering Type <LI TYPE=A|a|I|i|1> (this & subsequent)
Starting Number <OL START=?> (for the whole list)
Starting Number <LI VALUE=?> (this & subsequent)
Definition List <DL><DT><DD></DL> (<DT>=term, <DD>=definition)
Compact <DL COMPACT></DL>
Menu List <MENU><LI></MENU> (before each list item)
Compact <MENU COMPACT></MENU>
Directory List <DIR><LI></DIR> (before each list item)
Compact <DIR COMPACT></DIR>
BACKGROUNDS AND COLORS

Tiled Bkground <BODY BACKGROUND="URL">
<BODY
MS Watermark BGPROPERTIES="FIXED">
Bkground Color <BODY BGCOLOR="#$$$$$$"> (order is red/green/blue)
Text Color <BODY TEXT="#$$$$$$">
Link Color <BODY LINK="#$$$$$$">
Visited Link <BODY VLINK="#$$$$$$">
Active Link <BODY ALINK="#$$$$$$">
(More info at http://werbach.com/web/wwwhelp.html#color)
SPECIAL CHARACTERS
Special
&#?; (where ? is the ISO 8859-1 code)
Character
< <
> >
& &
" "
Registered TM ®
Registered TM ®
Copyright ©
Copyright ©
Non-Breaking

Space
(Complete list at http://www.htmlhelp.com/reference/charset)
FORMS
<FORM ACTION="URL"
Define Form METHOD=GET|POST></FORM>
4.0* File Upload <FORM ENCTYPE="multipart/form-data"></FORM>
<INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO|
Input Field FILE|BUTTON|IMAGE|HIDDEN|SUBMIT|RESET">
Field Name <INPUT NAME="***">
Field Value <INPUT VALUE="***">
Checked? <INPUT CHECKED> (checkboxes and radio boxes)
Field Size <INPUT SIZE=?> (in characters)
Max Length <INPUT MAXLENGTH=?> (in characters)
4.0 Button <BUTTON></BUTTON>
<BUTTON
4.0 Button Name NAME="***"></BUTTON>
4.0 Button Type <BUTTON TYPE="SUBMIT|RESET|BUTTON"></BUTTON>
<BUTTON
4.0 Default Value VALUE="***"></BUTTON>
4.0 Label <LABEL></LABEL>
<LABEL
4.0 Item Labelled FOR="***"></LABEL>
Selection List <SELECT></SELECT>
<SELECT
Name of List NAME="***"></SELECT>
# of Options <SELECT SIZE=?></SELECT>
Multiple Choice <SELECT MULTIPLE> (can select more than one)
Option <OPTION> (items that can be selected)
Default Option <OPTION SELECTED>
Option Value <OPTION VALUE="***">
<OPTGROUP
4.0 Option Group LABEL="***"></OPTGROUP>
<TEXTAREA ROWS=? COLS=?
Input Box Size ></TEXTAREA>
<TEXTAREA
Name of Box NAME="***"></TEXTAREA>
N2 Wrap Text <TEXTAREA WRAP=OFF|HARD|SOFT></TEXTAREA>
4.0 Group elements <FIELDSET></FIELDSET>
4.0 Legend <LEGEND></LEGEND> (caption for fieldsets)
4.0 Alignment <LEGEND ALIGN="TOP|BOTTOM|LEFT|RIGHT"></LEGEND>
TABLES
Define Table <TABLE></TABLE>
4.0* Table Alignment <TABLE ALIGN=LEFT|RIGHT|CENTER>
Table Border <TABLE BORDER></TABLE> (either on or off)
Table Border <TABLE BORDER=?></TABLE> (you can set the value)
Cell Spacing <TABLE CELLSPACING=?>
Cell Padding <TABLE CELLPADDING=?>
Desired Width <TABLE WIDTH=?> (in pixels)
Width Percent <TABLE WIDTH=%> (percentage of page)
4.0* Table Color <TABLE BGCOLOR="$$$$$$"></TABLE>
<TABLE FRAME=VOID|ABOVE|BELOW|HSIDES|LHS|RHS|
4.0 Table Frame VSIDES|BOX|BORDER></TABLE>
4.0 Table Rules <TABLE RULES=NONE|GROUPS|ROWS|COLS|ALL></TABLE>
<TABLE BORDERCOLOR="$$$$$
MS Border Color $"></TABLE>
<TABLE BORDERCOLORDARK="$$$$$
MS Dark Border $"></TABLE>
<TABLE BORDERCOLORLIGHT="$$$$$
MS Light Border $"></TABLE>
Table Row <TR></TR>
Alignment <TR ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM>
(must appear within table
Table Cell <TD></TD>
rows)
Alignment <TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>
No linebreaks <TD NOWRAP>
Columns to Span <TD COLSPAN=?>
Rows to Span <TD ROWSPAN=?>
4.0* Desired Width <TD WIDTH=?> (in pixels)
N3 Width Percent <TD WIDTH="%"> (percentage of table)
4.0* Cell Color <TD BGCOLOR="#$$$$$$">
(same as data, except bold
Header Cell <TH></TH>
centered)
Alignment <TH ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM>
No Linebreaks <TH NOWRAP>
Columns to Span <TH COLSPAN=?>
Rows to Span <TH ROWSPAN=?>
4.0* Desired Width <TH WIDTH=?> (in pixels)
N3 Width Percent <TH WIDTH="%"> (percentage of table)
4.0* Cell Color <TH BGCOLOR="#$$$$$$">
4.0 Table Body <TBODY>
4.0 Table Footer <TFOOT></TFOOT> (must come before THEAD>
4.0 Table Header <THEAD></THEAD>
Table Caption <CAPTION></CAPTION>
<CAPTION ALIGN=TOP|BOTTOM|LEFT|
Alignment RIGHT>
4.0 Column <COL></COL> (groups column attributes)
Columns
4.0 <COL SPAN=?></COL>
Spanned
4.0 Column Width <COL WIDTH=?></COL>
4.0 Width Percent <COL WIDTH="%"></COL>
4.0 Group columns <COLGROUP></COLGROUP> (groups column structure)
Columns
4.0 <COLGROUP SPAN=?></COLGROUP>
Spanned
4.0 Group Width <COLGROUP WIDTH=?></COLGROUP>
4.0 Width Percent <COLGROUP WIDTH="%"></COLGROUP>
FRAMES
Frame
4.0* <FRAMESET></FRAMESET> (instead of <BODY>)
Document
<FRAMESET
4.0* Row Heights ROWS=,,,></FRAMESET> (pixels or %)
<FRAMESET
4.0* Row Heights ROWS=*></FRAMESET> (* = relative size)
<FRAMESET
4.0* Column Widths COLS=,,,></FRAMESET> (pixels or %)
<FRAMESET
4.0* Column Widths COLS=*></FRAMESET> (* = relative size)
4.0* Borders <FRAMESET FRAMEBORDER="yes|no"></FRAMESET>
<FRAMESET BORDER=?
4.0* Border Width ></FRAMESET>
4.0* Border Color <FRAMESET BORDERCOLOR="#$$$$$$"></FRAMESET>
<FRAMESET FRAMESPACING=?
N3 Frame Spacing ></FRAMESET>
4.0* Define Frame <FRAME> (contents of an individual frame)
Display
4.0* <FRAME SRC="URL">
Document
4.0* Frame Name <FRAME NAME="***"|_blank|_self|_parent|_top>
4.0* Margin Width <FRAME MARGINWIDTH=?> (left and right margins)
4.0* Margin Height <FRAME MARGINHEIGHT=?> (top and bottom margins)
<FRAME SCROLLING="YES|NO|
4.0* Scrollbar? AUTO">
4.0* Not Resizable <FRAME NORESIZE>
<FRAME FRAMEBORDER="yes|
4.0* Borders no">
<FRAME BORDERCOLOR="#$$$$$
4.0* Border Color $">
Unframed
4.0* <NOFRAMES></NOFRAMES> (for non-frames browsers)
Content
4.0 Inline Frame <IFRAME></IFRAME> (takes same attributes as FRAME)
<IFRAME WIDTH=? HEIGHT=?
4.0 Dimensions ></IFRAME>
<IFRAME WIDTH="%"
4.0 Dimensions HEIGHT="%"></IFRAME>
SCRIPTS AND JAVA

Script <SCRIPT></SCRIPT>
<SCRIPT
Location SRC="URL"></SCRIPT>
<SCRIPT
Type TYPE="***"></SCRIPT>
<SCRIPT
Language LANGUAGE="***"></SCRIPT>
4.0* Other Content <NOSCRIPT></NOSCRIPT> (if scripts not supported)
Applet <APPLET></APPLET>
File Name <APPLET CODE="***">
Parameters <APPLET PARAM NAME="***">
Location <APPLET CODEBASE="URL">
Identifier <APPLET NAME="***"> (for references)
Alt Text <APPLET ALT="***"> (for non-Java browsers)
<APPLET ALIGN="LEFT|RIGHT|
Alignment CENTER">
Size <APPLET WIDTH=? HEIGHT=?> (in pixels)
Spacing <APPLET HSPACE=? VSPACE=?> (in pixels)
N4 Server Script <SERVER></SERVER>
MISCELLANEOUS
Comment  (not displayed by the browser)
Prologue <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
Searchable <ISINDEX> (indicates a searchable index)
Prompt <ISINDEX PROMPT="***"> (text to prompt input)
Send Search <A HREF="URL?***"></a> (use a real question mark)
URL of This File <BASE HREF="URL"> (must be in header)
Base Window
4.0* <BASE TARGET="***"> (must be in header)
Name
<LINK REV="***"
Relationship REL="***" HREF="URL"> (in header)
<LINK TYPE="***"
N4 Linked File SRC="***"></LINK>
Meta
<META> (must be in header)
Information
Style Sheets <STYLE></STYLE> (implementations vary)
4.0 Bidirect Off <BDO DIR=LTR|RTL></BDO> (for certain character sets)
If you're looking for web design tips, this section is for you.
Developing a professional web site will play an important role in your success. However,
finding web design tips to assist you can be difficult.
Although HTML tutorials will provide you with an overview of HTML and web site design,
unfortunately, that's about it. They usually don't provide you with the little web site design
tips and tricks that are used to create special effects within your web pages.
Although learning HTML and some basic web site design techniques is very important, if you
want to add special effects to your web pages, you will need to learn some additional coding
techniques, such as using CSS and JavaScript.
The following web design tips provide a wealth of information to assist you in many aspects
of web site design. You will find web design tips and advice, HTML tips and codes, CSS
codes and JavaScript codes to assist you in creating special effects within your web pages.
However, please ensure that you use these web design tips and codes cautiously. Make sure
you don't overdo it and use too many special effects, as you don't want to offend your
visitors. The key to creating a successful web site is to only use tips and codes that will
enhance your visitors experience on your web site.
When you're ready to begin, simply click on the links below to find the web design tips and
codes you're looking for. Once you locate a special code, copy and paste it into the HTML
portion of your web page where indicated within the instructions on each web page.
Web Page Text HTML Forms
• Displaying HTML Web Page Text in a Specific Font • HTML Forms: Creating a Default Option
Style • HTML Forms: Adding a Color Background to Input
• HTML Heading Tags Boxes
• Enlarging Text Size within a Web Page • HTML Forms: Customizing the Size of an Input
• Highlighting HTML Web Page Text Box
• Wrapping Text Around an Image within an HTML • HTML Forms: Specifying Maximum Text Typed
Web Page within an Input Box
• Indenting Text within a Web Page • HTML Forms: Displaying Default Text within an
• Using Superscripts and Subscripts Input Box
• Creating a Radio or Checkbox HTML Form
• Formatting an HTML Web Page Form
HTML Links • Using an Image as a Submit Button within an
HTML Web Page
• Creating an HTML Status Bar Link Description • Disappearing HTML Web Page Form Input Box
• Creating an HTML Mouseover Text Description Text
• Creating an HTML Escape from Frames Link • Flashing Cursor within an HTML Form Input Box on
• Creating HTML Links within the same Web Page Web Page Load
• Removing an HTML Web Page Link Underline • Tabbing Through HTML Web Page Form Input
• Changing an HTML Web Page Link Color Boxes
• Auto Fill an Email Subject
• Creating HTML Hyperlinks within a Web Page
• Highlighting HTML Web Page Links
HTML Lists
• Creating a Web Page Download Link
• How to Display an Email Address on a Web Page • Customizing HTML List Item Bullets
and Protect it From Spammers • Creating Customized HTML Bulleted Lists
• Creating Custom Non-Indented HTML Web Page
List Item Bullets
Web Page Windows
• Web Site Browser Compatibility

Web Page Tips
• Open a Web Page Link in a New Window
• Creating a First Visit Web Page Pop Up Window • Setting HTML Web Page Margins
HTML Tables • Specifying the Background Color of an HTML Web
Page
• Specifying the Link Colors within an HTML Web
• Display HTML Table Borders within Empty Table Page
Cells • Displaying an Image Background within an HTML
• Displaying an Image Background within HTML Web Page
Table Cells • Organizing HTML Web Page Code with the
• Customizing HTML Table Background Color Comment Tag
• Customizing HTML Table Border Colors • Adding Audio (Sound) to a Web Page
• Setting HTML Table and Column Widths • Creating Audio (Sound) Files for a Web Page
• Decrease or Speed up Web Page Load Time
HTML Special Effects • Best Background Color and Font Styles for a Web
Page
• Increasing Your Web Site Sales
• Creating a Stationary HTML Web Page Background • Increase Your Web Site Sales by Building Your
• Creating Horizontal and Vertical Lines in HTML Credibility
• Creating an HTML Marquee / Scrolling Text • Increase Sales with a Professional Looking Web
• Changing HTML Bullet Styles Site
• Resizing Images, Graphics or Photos within HTML • Using JavaScript to Navigate a Web Site
Web Pages • Selecting the Best Quality Web Host for a Web Site
• Creating Glowing Web Page Links • Registering a Domain Name as a Trademark
• Using HTML Frames within a Web Site • How to Download a PDF (Portable Document
• Using Scripts to Spice up Your Web Page Format) File
• Creating a Web Page Back and Forward History • Protect Web Page Content - Text and Graphics
Button • Preloading Images within a Web Page
• Creating a Web Page on Mouseover Alert Box • Creating a Favicon (Favorite Icon) for a Web Page
• Displaying the Last Modified Date within a Web
Page
• Display an Alert Message on Web Page Load HTML Horizontal Rule
• Creating a Print Web Page Button
• HTML Horizontal Rule: Changing the Height or Size
Cascading Style Sheets - CSS • HTML Horizontal Rule: Specifying the Width
• Using CSS (Cascading Style Sheets) Style Tags to Web Page Meta Tags
Customize Links
• Using Cascading Style Sheets (CSS) to Specify • Preventing Web Page Browser Cache
Web Page Fonts • Redirect Visitors to a New Web Page
• Using CSS to Customize Your HTML Web Page • Preventing Search Engines From Indexing a Web
Form Scroll Bar Colors Page
• Using CSS to Customize Your HTML Web Page • Using META Tags for Web Page Transitions
Form Background Color
• Using CSS to Highlight Web Page Links on Mouse
Over Miscellaneous Tips
• Using CSS to Display a Non-Tiling Background
Image within a Web Page
• Viewing File Extensions in Windows 2000, XP and
• Using CSS to Create a Drop Capital Effect within a
Vista
Web Page
When you begin designing your HTML web pages, you may find that many HTML courses fall short when it comes
to providing you with special effect HTML codes and tips.
However, there are many special effect HTML codes that will enable you to enhance your visitors experience
tremendously.
When trying to decide what HTML codes to use within your web pages, keep in mind, if it doesn't enhance your
web page, it's probably best to leave it out, as the more special effects you add to your page, the longer your page
will take to load.
In addition, prior to using any of these HTML codes and tips within your web pages, you must ensure that the
effect you're trying to achieve doesn't irritate your visitors.
For example, using HTML codes that load web pages within web pages may crash your visitors browser. In
addition, using excessive pop up windows, frames and placing scrolling text within the status bar can be very
irritating and cause your visitors to leave your web site and never return.
Please ensure you select your special HTML codes very carefully and use them to your fullest advantage.
Web Design Mistakes
Confusing
Pop up messages
Poor load time
Over use of Java
Poor overall appearance
Poor use of HTML tables
Spelling/Grammar mistakes
Poor organization
Inconsistent page design
No contact information
No 'about us' page
No privacy policy
Different backgrounds on each page
Poor content
Poor navigation
Over powering music set to auto play
Broken HTML code links and graphics
Poor browser compatibility
Large slow loading graphics
Too many graphics
Large Welcome banners
Flashing banners
Pages scrolling to oblivion
Multiple colored text
Multiple use of animated graphics
Text difficult to read
Animated bullets
No Meta tags
Too many graphic and/or line dividers
Multiple use of different fonts
Under construction signs
Busy, distracting backgrounds
Scrolling text in the status bar
Multiple banners and buttons
Large scrolling text across the page
Poor use of HTML code frames
Large fonts
Poor use of mouse over effect
When you begin designing your web site, try to keep your main HTML page as small as possible. For example,
instead of trying to cram all your information into a single web page, consider creating sections for your content.
These sections can contain highlights of your content with a link to further information. You can set up your
content sections in HTML tables with colored heading sections for information, such as articles, products or
whatever you'd like.
To keep your main HTML page smaller, it is much better to keep it down to the most essential elements. You can
then use links to additional pages to provide the detailed information. A good rule of thumb is Less is More.
To enhance your web page, you can format your text using bold headlines, colored HTML table cells, and
graphic bullets and/or arrows.
If you use the same graphic bullets and arrows throughout your page, you can enhance your page's
appearance, but you won't add any additional time to your web page load time. When you reuse an
image, your image only has to load once. When the image has loaded, it will instantly be displayed in all
of the other locations.
If you're looking for some HTML codes and tips to spice up your web site, you've come to the right place.
You will find a variety of HTML codes and tips below. Simply click on the links and copy and paste the
codes into your web page according to the instructions.
Changing Table Background Colors on Mouseover Replacing Your Standard Bullets With Graphic Bullets
Embedding Web Pages within Web Pages Creating a Placeholder for an Empty Table Cell
Create a Gradient Background Effect Displaying Text With An Image
Auto Fill Email Subject and Body Creating an Email Form
Open A New Window on Page Unload Removing Link Underline
Spacing Between Images Changing Link Colors
Protect Your Email Address From Spam Robots Linking To a Specific Location on a Page
Open A Web Page In A New Window Escape From Frame Link
Redirect Visitors To Another Page Resizing Your Images
Colored Text Boxes Changing Web Page Margins
Using An Image "submit" button Mouseover Text Description
Customizing Horizontal Rules - Line Dividers Status Bar Link Description
Creating an HTML Vertical Rule - Line Divider Auto Fill Email Subject
Adding Color To Your Table Background Highlighting FFA Links
Adding An Image Background To Your Tables Ad Tracking With a Link
Adding Color To Your Table Borders Preventing Browser Cache
Using Style Tags For Mouse Over Link Effects Preventing Search Engine Indexing
How to Make Your Background Image Stationary

HTML Tags Chart

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Tags Chart

Uploaded by

Copyright:

Available Formats

HTML Tags Chart

Tag Name Code Example Browser View

<big> big (text) <big>Example</big> Example (Tip)

<embed src="yourfile.mid" autostart="true"

<h1> heading 1 <h1>Heading 1 Example</h1>

horizontal Contents of your web page (Tip)

<img src="Earth.gif" width="41" height="41"

<form method=post action="/cgi-

<form method=post action="/cgi-

<form method=post action="/cgi-

<form method=post action="/cgi-

<form method=post action="/cgi-

<form method=post action="/cgi- Select an option:

<menu> o List item 2

<ol start="5"> 5. List item 1

Lowercase Letters Lowercase Letters

<ol type="a"> a. List item 1

Lowercase Roman Numerals

Capital Roman Numerals iv. List item 4

<ol type="I"> Capital Roman Numerals

IV. List item 4

Capital Roman Numerals Special Start Capital Roman Numerals

<ol type="I" start="7">

Example 1:<br> Attributes:

<table border="2" bordercolor="#336699"

Example 3: Example 3: (Tip)

<table cellpadding="2" cellspacing="2"

o Which HTML tags are included

o How this document is formatted (including a description of symbols and

o structural definition (appearance controlled by the browser's preferences)

o presentation formatting (author specifies text appearance)

o links, graphics, and sounds

o backgrounds and colors

o scripts and java

LINKS, GRAPHICS, AND SOUNDS

BACKGROUNDS AND COLORS

SCRIPTS AND JAVA

Web Page Text HTML Forms

• Web Site Browser Compatibility

Web Design Mistakes

Create a Gradient Background Effect Displaying Text With An Image

Auto Fill Email Subject and Body Creating an Email Form

Open A New Window on Page Unload Removing Link Underline

Spacing Between Images Changing Link Colors

Open A Web Page In A New Window Escape From Frame Link

Redirect Visitors To Another Page Resizing Your Images

Colored Text Boxes Changing Web Page Margins

Using An Image "submit" button Mouseover Text Description

Customizing Horizontal Rules - Line Dividers Status Bar Link Description

Adding Color To Your Table Background Highlighting FFA Links

Adding An Image Background To Your Tables Ad Tracking With a Link

Adding Color To Your Table Borders Preventing Browser Cache

How to Make Your Background Image Stationary

You might also like