H T M L

PAGE (4 of 8)

Table of HTML Tags

General HTML Tag Conventions

HTML tags are enclosed in < > characters.
Most HTML tags come in pairs. There is a tag to start the formatting and another to end that particular formatting. The closing tag is the same as the opening tag with the addition of a slash (/). For example, to make text bold you enclose the text you want bolded between and .
Whitespace is generally ignored.
Tags may be written in either upper or lower case.
Never overlap opening and closing tags. This means that if a tag is opened inside of another, be sure to close that tag before closing the one preceding it.
This is wrong.
-  Don't overlap opening and closing tags.
This is right,
```
Don't 
	overlap opening and closing tags.
	
```

Below is a very basic listing of HTML tags with a description and example for each where possible.

Attributes are listed in the white boxes. Those attributes in BOLD type are required attributes.

The Skeleton

<HTML>

Tells the browser that this is an HTML-formatted file

<HEAD>

Header tags surrounding information about the document like <TITLE>

<TITLE>

Puts a title for the document at the left of the top bar of the browser window. This must be inside the <HEAD> tag.

<BODY>

BGCOLOR

Sets the background color for the body of the document

TEXT

Sets the general text color for the body of the document

VLINK

Sets the color of the visited links for the document

LINK

Sets the color of the links not yet visited

BACKGROUND

Designates the image file to load as the background image. If the image does not fill the screen, it will be tiled to fill it.

<BODY BGCOLOR="#AA44EE" TEXT="#558855" BACKGROUND="bgimage.gif"> Document body text here </BODY>

Basics:



Comment: Text inside this tag is not displayed in the browser. Use this for internal comments on your code. There is no closing tag for this.

<HR>

Draws a horizontal rule across the document. No closing tag.

WIDTH

Sets the width in pixels or percentage of the screen.

SIZE

Sets the thickness of the line in pixels

<HR WIDTH=85%>

<HR WIDTH=100 SIZE=10>

<!- H1-6 -->

<H1>...<H6>

Headings: 1 through 6 designate the level of heading, where 1 is the highest level and thus largest.

<H3>This is a third level heading</H3>

This is a third level heading



Designates a new paragraph in the text. A closing tag is optional.

 

Adds a line break in the text. This doesn't need a closing tag.

Text with a linebreak in it.

Text with a linebreak
in it.

<IMG>

Inserts an image into the document.

SRC

Tells the browser where to find the image file

ALT

Alternate description for browsers with no image capabilities.

WIDTH

Use of this attribute is highly recommended. Sets the width (in pixels or as a percentage of the screen). Use of this attribute allows text to display in the browser while images are loading. Otherwise, readers must wait for all images to load before they can read any text - a painful experience.

HEIGHT

Sets the height (in pixels or as a percentage). Recommended: See WIDTH.

<IMG SRC="button.gif" ALT="Button Image" WIDTH=60 HEIGHT=60>

<A>

Anchor, otherwise known as a link

HREF

Reference location - where to retrieve the file from for this link.

Beware of case sensitivity with filenames!

Over the internet, it matters whether you use uppercase and lowercase letters. MyFile.html is different from myfile.html

<A HREF="http://www.cs.vt.edu/">Link to VT CS department's home page></A>Link to VT CS department's home page

Text Style:



SIZE

Sets the size of the font. Range from 1-7 with 7 as the largest.

COLOR

Sets the color of the text. See the table below for hexadecimal color codes.

Display a large font
Display a large font



For bold text.
Make this text bold
Make this text bold



For italic text.
Make this text italic
Make this text italic



For underlined text.
Underline this text
Underline this text



For emphasis on text.
Give this text emphasis
Give this text emphasis

Alignment:

<CENTER>

Centers text or object in relation to surrounding text.
<CENTER>Centered text</CENTER>

Centered text

<ALIGN>

<VALIGN>

ALIGN and VALIGN (vertical align) are attributes for tags such as TABLE, TD, TR, IMG, H1..H6, HR. Some values that can be assigned to these follow:

CENTER

Centers the text or object

TOP

Aligns the text or object with the top

LEFT

Left justifies the text or object

RIGHT

Right justifies the text or object

MIDDLE

Vertically aligns the text or object in the middle

BOTTOM

Vertically aligns the text or object at the bottom

<PRE>

Designates pre-formatted text. Preserves carriage returns, spaces and tabs.

<PRE>Preformatted text</PRE>

Preformatted text

<CODE>

Designates source code listing

<BLOCKQUOTE>

Indents the text on the right and left.
<BLOCKQUOTE> Blockquoted text is indented on the right and left-hand sides. </BLOCKQUOTE>

Blockquoted text is indented on the right and left-hand sides.

Lists:

<OL>

Formats an ordered list

<UL>

Formats an unordered list

<LI>

Designates a list item within an ordered or unordered list. Unordered list items get a bullet, while an ordered list item is numbered. Nested lists are allowed

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

Ordered List:

List item a

List item b

List item c

Unordered List:

List item a

List item b

List item c

Tables

<TABLE>

CELLPADDING

Specifies the amount of space to put between a cell's edge and its contents.

CELLSPACING

Specifies the amount of space to put between cells.

BORDER

Specifies the width of the table border. 0 designates no border.

WIDTH

Sets the width of the table (in pixels or as a percentage of the screen.

ALIGN

Sets the alignment of the table in relation to the surrounding document.

<TR>

ROWSPAN

Designates the number of rows the given cell should span across.

<TD>

COLSPAN

Designates the number of columns the given cell should span across.

Common Colors Table

Color

Associated
Hex Code

Color

Associated
Hex Code

Red

#FF0000

Turquoise

#00FFFF

Light Blue

#0000FF

Dark Blue

#0000A0

Light Purple

#FF0080

Dark Purple

#800080

Yellow

#FFFF00

Pastel Green

#00FF00

Pink

#FF00FF

White

#FFFFFF

Light Grey

#C0C0C0

Dark Grey

#808080

Black

#000000

Orange

#FF8040

Brown

#804000

Burgundy

#800000

ForestGreen

#808000

Grass Green

#408080

Common Colors Table
Color	Associated Hex Code	Color	Associated Hex Code
Red	#FF0000	Turquoise	#00FFFF
Light Blue	#0000FF	Dark Blue	#0000A0
Light Purple	#FF0080	Dark Purple	#800080
Yellow	#FFFF00	Pastel Green	#00FF00
Pink	#FF00FF	White	#FFFFFF
Light Grey	#C0C0C0	Dark Grey	#808080
Black	#000000	Orange	#FF8040
Brown	#804000	Burgundy	#800000
ForestGreen	#808000	Grass Green	#408080

For A More Detailed Description of HTML Tags, see:

The Barebones Guide to HTML

This is a very extensive description of tags and their usage. Includes all the tags in the HTML 3.2 specification, as well as Netscape extensions included in versions of Netscape Navigator up to 3.0b5.

The Ten Commandments of HTML FAQ is also a good link describing some of the quirks of browsers and how they treat HTML files differently.

Courseware Web - HTML from ChalkSoft Software is a very good free downloadable HTML tutorial. Just download it, execute it to decompress it and open the index.html in your Web browser to use it.