Chapter Four: Laying Out an Effective Web Page

HyperText Markup Language (HTML) Reference
Cascading Style Sheets (CSS) Reference


HyperText Markup Language (HTML) Reference

This reference covers HTML document structure and syntax, and includes a comprehensive quick reference listing of most HTML tags and their attributes.

HTML document structure
An HTML document consists of text, which makes up the content of the document, and tags, which define the structure and appearance of the page.  Here is the bare-bones outline of an HTML document.  Every web page should have these tags in this order.

<HTML>
<HEAD>
<TITLE>Your page title goes here</TITLE>
</HEAD>
<BODY>
The contents of your page go here
</BODY>
</HTML>

Within the head you list the title of the document, and also indicate other parameters the browser may use when displaying the document.  These include <META> tags.

The body is where you put the actual content of the web page, including text and tags that describe how to display the text, tags to indicate placement of images, movies and sounds, and tags to indicate hyperlinks (also known as anchors) that link your document to other web pages.

HTML Syntax
Each HTML tag is made up of a tag name, sometimes followed by a list of one or more attributes, all placed between opening and closing brackets.  There are no spaces within a tag name, or within an attribute, but tag names are separated from attributes by a space.  Some tags have many attributes, most of which are optional.  Here is an example of a tag with three attributes listed:

<IMG SRC="picture1.jpeg" HEIGHT="200" WIDTH=100">

HTML is not case sensitive; <HEAD> is the same as <head>.  It is much easier to distinguish the tags if they are in upper case, and that is the convention we have followed in this book.

Although the tags are not case sensitive, some of the information in the attributes is.  To most web servers, "picture1.jpeg" is not the same as "Picture1.jpeg", nor is it the same as "picture1.JPEG".  When listing attribute values, case is important.

Most HTML tags consist of a start and end tags that enclose text or other tags.  End tags have the same name as start tags, with the name preceded by a forward slash (/), and never contain attributes.  Some tags, such as the <IMG> tag that indicates placement of an image, do not have ending tags.  Other examples of these standalone tags are the <HR> tag and the <BR> tag, which indicate the placement of a horizontal rule and a line break, respectively.

HTML Quick Reference Chart
This chart lists the most common tags and their attributes.

HTML quick reference chart

This chart lists the most common tags and their attributes.

Words in italics indicate information that the web designer supplies. 

Number indicates a numeral

URL is used to indicate a filename either within your own site or on an external web site. 

You can specify a color by a hexadecimal code, which is preceded by a pound sign (#) or by a color name; thus "#FF00FF" indicates the same color as "magenta".

JavaScript indicates a call to a JavaScript function

A list is a comma-delimited list of word or names

Sections

Page tags

<HTML></HTML>

Beginning and ending tags to an HTML document

<HEAD></HEAD>

Begins and ends the HEAD of a document

<TITLE></TITLE>

Indicates the HTML page title

<META>

Meta-information resides in the HEAD of a document

 

   NAME="Keywords" CONTENT="list"

Provides a list of keywords for search engines that recognize the <META> tag

   NAME="Description" CONTENT="description"

Provides a short description of your web site for search engines that recognize the <META> tag

<BODY></BODY>

Identifies the main section of an HTML document

   BACKGROUND="URL"

Specifies an image to be tiled in the background of the page

   BGCOLOR="color"

Specifies the page's background color.  This is superceded by the BACKGROUND attribute.

   TEXT="color"

Specifies the default text color for the page

   LINK="color"

Specifies the color of hypertext (linked text and the borders around linked images)

   VLINK="color"

Specifies the color of hypertext whose link has been visited.

   ALINK="color"

Specifies the color of hypertext when the link is activated (clicked on)

   MARGINWIDTH="0" MARGINEHIGHT="0"

Sets the left and top margins of the page to zero for Netscape

   LEFTMARGIN="0" TOPMARGIN="0"

Sets the left and top margins of the page to zero for Internet Explorer

   ONLOAD="JavaScript"

Initiates a call to a JavaScript function when the page loads

Text tags

<BASEFONT SIZE="number">

Specifies the font size from 1 to 7 for normal-sized text throughout the document (the default is 3)

<Hnumber></H>

Size of headings from <H1> (largest) to <H6> (smallest)

<B></B>

Bold text

<I></I>

Italicized text

<STRONG></STRONG>

Strongly emphasized text (usually the same as bold)

<SUB></SUB>

Subscripted text

<SUP></SUP>

Superscripted text

<SMALL></SMALL>

Smaller text (usually the same as <FONT SIZE="-1">)

<BIG></BIG>

Bigger text (usually the same as <FONT SIZE="+1">)

<FONT></FONT>

Sets the size, color or typeface of the enclosed text

   COLOR="color"

Sets the color of the enclosed text

   FACE="list"

Specifies the font name for the enclosed text

   SIZE="value"

Specifies a font size.  This can be relative to the <BASEFONT> by using a + or – sign, or can be an absolute size from 1 to 7.

Layout tags

<BLOCKQUOTE></BLOCKQUOTE>

Indents a block of text

<BR>

Inserts a linebreak

   CLEAR="left/right/all"

Inserts a linebreak that clears any <IMG> tag alignments

<CENTER></CENTER>

Centers the enclosed objects

<DIV></DIV>

Creates a division within a document

   ALIGN="left/center/right"

Aligns the text within the division

<HR>

Inserts a horizontal rule

   ALIGN="left/center/right"

Aligns the horizontal rule

   NOSHADE

Renders the horizontal rule without 3-D shading

   SIZE="number"

Sets the thickness of the horizontal rule to an integer number of pixels

   WIDTH="number"

Sets the width of the horizontal rule to either an integer number of pixels or a percentage of the page width

<NOBR></NOBR>

Prevents a line break within the enclosed text

<P></P>

Creates a new paragraph

   ALIGN="left/center/right"

Aligns text and objects within the paragraph

<PRE></PRE>

Renders the enclosed text in its original, preformatted style, complete with spaces and line breaks

List tags

<DL></DL>

Delineates a definition title

<DD></DD>

Delineates a definition

<DT></DT>

Delineates a definition term

<OL></OL>

Delineates an ordered list

   TYPE="A/a/I/i/1"

Specifies the type of ordering in an ordered list (A for uppercase letter, a for lowercase letter, I for uppercase Roman numerals, i for lowercase Roman numerals and 1 for numbers). The default is 1

<LI></LI>

Delineates a list item within an ordered list or unordered list

   TYPE="A/a/I/i/1"

Controls the format of a list item (A for uppercase letter, a for lowercase letter, I for uppercase Roman numerals, i for lowercase Roman numerals and 1 for numbers). The default is 1

<UL></UL>

Delineates an unordered list

   COMPACT

Makes an unordered list compact

TYPE="disc/circle/square"

Specifies the bullet style for an unordered list

Image tags

<IMG>

Displays an image

   SRC="URL"

Specifies the image to be displayed (required attribute)

   ALIGN="left/right"

Aligns the image relative to window, table, frame or text

   ALT="text"

Provides a description of the image for users with non-image-capable browsers

   BORDER="number"

Specifies the width of a border around the image (0 = none)

   HEIGHT="number"

Specifies the height of the image in pixels

   WIDTH="number"

Specifies the width of the image in pixels

   HSPACE="number"

Specifies white space, in pixels, to be added to the left and right of the image

   VSPACE="number"

Specifies white space, in pixels, to be added to the top and bottom of the image

   LOWSRC="URL"

Specifies a low-resolution image to be loaded by the browser first, followed by the image specified by the SRC attribute

Link tags

<A></A>

Creates a hyperlink (HREF attribute) or names a part of the document to create an “anchor” that can be linked to (NAME attribute)

   HREF="URL"

Specifies the URL of a hyperlink

   NAME="name"

Specifies the name of a portion of the document so that the section can be linked to

   TARGET="_blank/_self/_parent/_top"

Links hypertext to a URL within a new window/same frame/frameset parent/frameset parent within the same browser window

   TARGET="name"

Links hypertext to a URL in a new, named browser window or within a named frame

Table tags

<TABLE></TABLE>

Defines a table

   ALIGN="left/center/right"

Specifies horizontal alignment of table data cell content

   VALIGN="top/middle/bottom"

Specifies vertical alignment of table data cell content

   BACKGROUND="URL"

Specifies an image to be tiled in the background of the table

   BORDER="number"

Specifies the width of the table border (0 = none)

   BGCOLOR="color"

Specifies the background color of the table

   CELLPADDING="number"

Places white space, specified in pixels, around each cell's contents

   CELLSPACING="number"

Places white space, specified in pixels, between cells

   HSPACE="number"

Places white space, specified in pixels, to the right and left of the table

   VSPACE="number"

Places white space, specified in pixels, to the top and bottom of the table

   WIDTH="number"

Specify the table width, in pixels or percentage of window width

<TR></TR>

Defines a table row

   ALIGN="left/center/right"

Specifies horizontal alignment of row data cell content

   VALIGN="top/middle/bottom"

Specifies vertical alignment of row data cell content

<TD></TD>

Defines a table data cell

   ALIGN="left/center/right"

Specifies horizontal alignment of data cell content

   VALIGN="top/middle/bottom"

Specifies vertical alignment of data cell content

   BACKGROUND="URL"

Specifies an image to be tiled in the background of the cell

   BGCOLOR="color"

Specifies the background color of the cell

   COLSPAN="number"

Causes the cell to span number adjacent columns

   ROWSPAN="number"

Causes the cell to span number adjacent rows

   NOWRAP

Specifies that there are to be no linebreaks within the cell

   WIDTH="number"

Specify the cell width, in pixels or percentage of window width

<TH></TH>

Defines a table header cell

   ALIGN="left/center/right"

Specifies horizontal alignment of table header cell

   VALIGN="top/middle/bottom"

Specifies vertical alignment of table header cell

   BACKGROUND="URL"

Specifies an image to be tiled in the background of table header cell

   BGCOLOR="color"

Specifies the background color of the table header cell

   COLSPAN="number"

Causes the table header cell to span number adjacent columns

   ROWSPAN="number"

Causes the table header cell to span number adjacent rows

   NOWRAP

Specifies that there are to be no linebreaks within the table header cell

   WIDTH="number"

Specify the table header cell width, in pixels or percentage of window width

<CAPTION></CAPTION>

Defines a caption for a table

   ALIGN="top/bottom/left/center/right"

Sets the vertical position of the caption.  Default is top,centered.

Form tags

<FORM></FORM>

Delineates a form

   ACTION="URL"

Specifies the URL of the application that will process the form.  Can also be "mailto:"

   ENCTYPE="encoding"

Specifies how the form elements are to be encoded

   METHOD="post/get"

Specifies the parameter-passing style.  Default is "get"

   NAME="name"

Names a form

<INPUT>

Specifies a form field

   TYPE="text/password/checkbox/radio/submit/reset/image"

Specified the form field as a text box, password field, check box, radio button, submit button, reset button or visual submit button

   TYPE="hidden"

Specified a hidden field

   NAME="name"

Names a form field

   CHECKED

Indicates a selected check box or radio button

   SIZE="number"

Specifies field size in characters (not pixels)

   VALUE="text/number"

Specifies the default value for a form field

   SRC="URL"

Specifies the URL of the image if TYPE is "image"

<OPTION>

Define an option within a <SELECT> on a form

   SELECTED

Makes this option initially selected

   VALUE="text/number"

Specifies the default value for the option

<SELECT></SELECT>

Defines a pull-down menu or scrolling list

   MULTIPLE

Allows the user to select more than one <OPTION>

   NAME="name"

Names a <SELECT> form field

   SIZE="number"

Display items using a pulldown menu (for 1); otherwise a scrolling list of number items

<TEXTAREA></TEXTAREA>

Defines a multiline text area on a form

   COLS="number"

Specifies the width of the text area, in characters

   ROWS="number"

Specifies the height of the text area, in characters

   NAME="name"

Names a text area

   WRAP="off/virtual/physical"

Specifies the word wrapping within a text area to be off, virtual (display the wrap to the user, but do not wrap when transmitting to server), or physical (display and transmit wrap)

Frame tags

<FRAMESET></FRAMESET>

Defines a collection of frames or other framesets

   COLS="number,…number"

Defines frames in columns, one number per column, given in pixels or percentage of window width

   ROWS="number,…number"

Defines frames in rows, one number per row, defined by heights in pixels

   BORDER="number"

Specifies thickness of frame borders (0 = none)

   FRAMESPACING

Specifies additional space between frames, in pixels

   FRAMEBORDER="0/1"

Defines the visibility (1) or invisibility(0) of frame borders

<FRAME></FRAME>

Define a frame within a frameset

   SRC="URL"

Specifies the URL to be loaded into the frame

   FRAMEBORDER="0/1"

Defines the visibility (1) or invisibility(0) of frame borders

   BORDERCOLOR="color"

Determines the border color for the frame

   FRAMESPACING

Specifies additional space between frames, in pixels

   NAME="name"

Names a frame for future reference

   NORESIZE

Prevents viewers from resizing the frame

   MARGINWIDTH="number"

Specifies the width of invisible margins within frames

   MARGINHEIGHT="number"

Specifies the height of invisible margins within frames

   SCROLLING="yes/no/auto"

Determines if scrollbars should be displayed (auto means that scrollbars will be added only if necessary)

<NOFRAMES></NOFRAMES>

Defines content to be presented by browsers that do not have the capability to display frames