HyperText Markup Language (HTML) Tag Reference

HTML tags are the standard codes used to indicate text formatting, links between documents, and placement of images or other media on Web pages. For example, placing the <H1> tag in front of some text, and the </H1> tag after the text makes it appear as a large heading on the page. Attributes are commands added to the tags to specify various options. For example, <H1 ALIGN="CENTER"> causes the heading to be centered on the page.

Tags

<HTML>...</HTML>    Encloses the entire HTML document.
<HEAD>...</HEAD>     Encloses the head of the HTML document.
<TITLE>...</TITLE>     Indicates the title of the document. Used within <HEAD>.
<BODY>...</BODY>    Encloses the body of the HTML document.
<P>...</P>                     A paragraph. The closing tag (</P>) is optional.
<BR>                             A line break.
<HR>                             A horizontal rule line.
<H1>...</H1>                A first-level heading.
<H2>...</H2>                A second-level heading.
<H3>...</H3>                A third-level heading.
<H4>...</H4>                A fourth-level heading (seldom used).
<H5>...</H5>                A fifth-level heading (seldom used).
<H6>...</H6>                A sixth-level heading (seldom used).
 

Linking to Other Web Pages

Tags and Attributes

<A>...</A>             With the HREF attribute, creates a link to another document or
                                anchor.
          HREF="..."    The address of the document and/or anchor point to link to.

Text Alignment and Lists

Tags and Attributes

<DIV>...</DIV>            A region of text to be formatted.
           ALIGN="..."        Align text to CENTER, LEFT, or RIGHT.
                        (May also be used with <P>, <H1>, <H2>, <H3>, etc.)
<OL>...</OL>               An ordered (numbered) list.
         TYPE="..."            The type of numerals used to label the list. Possible values are A, a, I, i, 1.
         START="..."          The value with which to start this list.
<UL>...</UL>               An unordered (bulleted) list.
         TYPE="..."            The bullet dingbat used to mark list items. Possible values are DISC, CIRCLE, and SQUARE.

<LI>                              A list item for use with <OL> or <UL>.
         TYPE="..."           The type of bullet or number used to label this item. Possible values are DISC, CIRCLE, SQUARE, A, a, I, i, 1.
         VALUE="..."       The numeric value this list item should have (affects this item and all below it in <OL> lists).

<DL>...</DL>              A definition list. (May also be used for any kind of intentation.)

<DT>                           A definition term, as part of a definition list.

<DD>                          The corresponding definition to a definition term, as part of a definition list.


Text Formatting and Font Control

Tags and Attributes

<EM>...</EM>           Emphasis (usually italic).

<STRONG>...</STRONG>           Stronger emphasis (usually bold).

<B>...</B>                   Boldface text.

<I>...</I>                      Italic text.

<TT>...</TT>

Typewriter (monospaced) font.

<PRE>...</PRE>           Preformatted text (Exact line endings and spacing will be preserved. Usually rendered in a monospaced font).

<BIG>...</BIG>            Text is slightly larger than normal.

<SMALL>...</SMALL>   Text is slightly smaller than normal.

<SUB>...</SUB>             Subscript.

<SUP>...</SUP>             Superscript.

<STRIKE>...</STRIKE>    Puts a strikethrough line in text.

<FONT>...</FONT>          Controls the appearance of the enclosed text.
 

SIZE="..."

The size of the font, from 1 to 7. Default is 3. Can also be specified as a value relative to the current size; for example, +2 or -1.


COLOR="..."

Changes the color of the text.


FACE="..."

Name of font to use if it can be found on the user's system. Multiple font names can be separated by commas, and the first font on the list that can be found will be used.

<BASEFONT>                 Sets the default size of the font for the current page.


SIZE="..."

The default size of the font, from 1 to 7.


E-Mail Links and Links within a Page

Tags and Attributes

<A>...</A>

With the HREF attribute, creates a link to another document or anchor; with the NAME attribute, creates an anchor that can be linked to.


HREF="..."

The address of the document and/or anchor point to link to.


NAME="..."

The name for this anchor point in the document.


Creating Forms

Tags and Attributes

<FORM>...</FORM>                Indicates an input form.


ACTION="..."

The address of the script to process this form input.


METHOD="..."

How the form input will be sent to the server. Normally set to POST, rather than GET.

<INPUT>

An input element for a form.


TYPE="..."

The type for this input widget. Possible values are CHECKBOX, HIDDEN, RADIO, RESET, SUBMIT, TEXT, or IMAGE.


NAME="..."

The name of this item, as passed to the script.


VALUE="..."

For a text or hidden item, the default value; for a checkbox or radio button, the value to be submitted with the form; for Reset or Submit buttons, the label for the button itself.


SRC="..."

The source file for an image.


CHECKED

For checkboxes and radio buttons, indicates that this item is checked.


SIZE="..."

The width, in characters, of a text input region.


MAXLENGTH="..."

The maximum number of characters that can be entered into a text region.


ALIGN="..."

For images in forms, determines how the text and image will align (same as with the <IMG> tag; see Hour 10).

<TEXTAREA>...</TEXTAREA>

Indicates a multiline text entry form element. Default text can be included.


NAME="..."

The name to be passed to the script.


ROWS="..."

The number of rows this text area displays.


COLS="..."

The number of columns (characters) this text area displays.

<SELECT>...</SELECT>

Creates a menu or scrolling list of possible items.


NAME="..."

The name that is passed to the script.


SIZE="..."

The number of elements to display. If SIZE is indicated, the selection becomes a scrolling list. If no SIZE is given, the selection is a pop-up menu.


MULTIPLE

Allows multiple selections from the list.

<OPTION>

Indicates a possible item within a <SELECT> element.


SELECTED

With this attribute included, the <OPTION> will be selected by default in the list.


VALUE="..."

The value to submit if this <OPTION> is selected when the form is submitted.

Creating Web Page Graphics





Putting Graphics on a Web Page

Tags and Attributes

<IMG>

Displays a graphics image on the page.


SRC="..."

The address or file name of the image.


ALT="..."

A text message that may be displayed in place of the image.


ALIGN="..."

Determines the alignment of the given image. If LEFT or RIGHT, the image is aligned to the left or right column, and all following text flows beside that image. All other values, such as TOP, MIDDLE, BOTTOM, ABSMIDDLE, or ABSBOTTOM, determine the vertical alignment of this image with other items in the same line.


Custom Backgrounds and Colors

Tags and Attributes

<BODY>...</BODY>

Encloses the body (text and tags) of the HTML document.


BACKGROUND="..."

The name or address of the image to tile on the page background.


BGCOLOR="..."

The color of the page background.


TEXT="..."

The color of the page's text.


LINK="..."

The color of unfollowed links.


ALINK="..."

The color of activated links.


VLINK="..."

The color of followed links.




Page Design and Layout

Tags and Attributes

<IMG>

Inserts an inline image into the document.


SRC="..."

The address of the image.


ALIGN="..."

Determines the alignment of the given image (see also Hour 10).


VSPACE="..."

The space between the image and the text above or below it.


HSPACE="..."

The space between the image and the text to its left or right.


WIDTH="..."

The width, in pixels, of the image. If WIDTH is not the actual width, the image is scaled to fit.


HEIGHT="..."

The width, in pixels, of the image. If HEIGHT is not the actual height, the image is scaled to fit.


BORDER="..."

Draws a border of the specified value in pixels to be drawn around the image. In case the images are also links, BORDER changes the size of the default link border.

<BR>

A line break.


CLEAR="..."

Causes the text to stop flowing around any images. Possible values are RIGHT, LEFT, ALL.


Graphical Links and Image Maps

Tags and Attributes

<IMG>

Inserts an image into the document.


ISMAP

This image is a clickable image map.


SRC="..."

The URL of the image.


USEMAP="..."

The name of an image map specification for client-side image mapping. Used with <MAP> and <AREA>.

<MAP>...</MAP>

A client-side image map, referenced by <IMG USEMAP="...">. Includes one or more <AREA> tags.

<AREA>

Defines a clickable link within a client-side image map.


SHAPE="..."

The shape of the clickable area. Currently, RECT, POLY, and CIRCLE (or ROUND) are the valid options.


COORDS="..."

The left, top, right, and bottom coordinates of the clickable region within an image.


HREF="..."

The URL that should be loaded when the area is clicked.


Advanced Layout with Tables

Tags and Attributes

<TABLE>...</TABLE>

Creates a table that can contain any number of rows (<TR> tags).


BORDER="..."

Indicates the width in pixels of the table borders. (BORDER=0, or omitting the BORDER attribute, makes borders invisible.)


CELLSPACING="..."

The amount of space between the cells in the table.


CELLPADDING="..."

The amount of space between the edges of the cell and its contents.


WIDTH="..."

The width of the table on the page, in either exact pixel values or as a percentage of page width.


BGCOLOR="..."

Background color of all cells in the table that do not contain their own BACKGROUND or BGCOLOR attribute.


BACKGROUND="..."

Background image to tile within all cells in the table that do not contain their own BACKGROUND or BGCOLOR attribute (Microsoft Internet Explorer only).

<TR>...</TR>

Defines a table row, containing one or more cells (<TD> tags).


ALIGN="..."

The horizontal alignment of the contents of the cells within this row. Possible values are LEFT, RIGHT, and CENTER.


VALIGN="..."

The vertical alignment of the contents of the cells within this row. Possible values are TOP, MIDDLE, and BOTTOM.


BGCOLOR="..."

Background color of all cells in the row that do not contain their own BACKGROUND or BGCOLOR attributes.


BACKGROUND="..."

Background image to tile within all cells in the row that do not contain their own BACKGROUND or BGCOLOR attributes. (Microsoft Internet Explorer only)

<TD>...</TD>

Defines a table data cell.


ALIGN="..."

The horizontal alignment of the contents of the cell. Possible values are LEFT, RIGHT, and CENTER.


VALIGN="..."

The vertical alignment of the contents of the cell. Possible values are TOP, MIDDLE, and BOTTOM.


ROWSPAN="..."

The number of rows this cell will span.


COLSPAN="..."

The number of columns this cell will span.


WIDTH="..."

The width of this column of cells, in exact pixel values or as a percentage of the table width.


BGCOLOR="..."

Background color of the cell.


BACKGROUND="..."

Background image to tile within the cell. (Microsoft Internet Explorer only)

<TH>...</TH>

Defines a table heading cell. (Takes all the same attributes as <TD>.)


Using Style Sheets

Tags and Attributes

<STYLE>...</STYLE>

Allows an internal style sheet to be included within a document. Used between <HEAD> and </HEAD>.

<LINK>

Links to an external style sheet (or other document type). Used in the <HEAD> section of the document.


HREF="..."

The address of the style sheet.


TYPE="..."

The Internet content type (always "text/css" for a style sheet).


REL="..."

The link type (always "stylesheet" for style sheets).

<SPAN>...</SPAN>

Does nothing at all, except provide a place to put STYLE or other attributes. (Similar to <DIV>...</DIV>, but does not cause a line break.)


STYLE="..."

Includes inline style specifications. (Can be used in <SPAN>, <DIV>, <BODY> and most other HTML tags.)


Embedding Multimedia in Web Pages

Tags and Attributes

<EMBED>

Embeds a file to be read or displayed by a Netscape plug-in or helper application. (This tag is supported by both Microsoft and Netscape browsers, but is not part of the official HTML standard.)


SRC="..."

The URL of the file to embed.


WIDTH="..."

The width of the embedded object in pixels.


HEIGHT="..."

The height of the embedded object in pixels.


ALIGN="..."

Determines the alignment of the media window. Values are the same as for the <IMG> tag.


VSPACE="..."

The space between the media and the text above or below it.


HSPACE="..."

The space between the media and the text to its left or right.


BORDER="..."

Draws a border of the specified size in pixels around the media.

<NOEMBED>...</NOEMBED>

Alternate text or images to be shown to users who do not have a plug-in installed or are using browsers that don't recognize the <EMBED> tag. (Not part of the official HTML standard.)

<OBJECT>...</OBJECT>

Inserts images, videos, Java applets, ActiveX controls, or other objects into a document. (See Hour 18 for attributes.)


Interactive Pages with Applets and ActiveX

Tags and Attributes

<APPLET>

Inserts a self-running Java applet. (In addition to the standard attributes below, you can specify applet-specific attributes to be interpreted by the Java applet itself.)


CLASS="..."

The name of the applet.


SRC="..."

The URL of the directory where the compiled applet can be found (should end in a slash / as in "http://mysite/myapplets/"). Do not include the actual applet name, which is specified with the CLASS attribute.


ALIGN="..."

Indicates how the applet should be aligned with any text that follows it. Current values are TOP, MIDDLE, and BOTTOM.


WIDTH="..."

The width of the applet output area in pixels.


HEIGHT="..."

The height of the applet output area in pixels.

<PARAM>

Program-specific parameters. (Always occurs within <APPLET> or <OBJECT> tags.)


NAME="..."

The type of information being given to the applet or ActiveX control.


VALUE="..."

The actual information to be given to the applet or ActiveX control.

<OBJECT>...</OBJECT>

Inserts images, videos, Java applets, or ActiveX OLE controls into a document.


CLASSID="..."

The address of a Java Applet or identification code for an ActiveX program.


ID="..."

Gives an identifying name for a Microsoft ActiveX program (Microsoft only).


DATA="..."

May be used in some situations to tell an applet or program where to find some data that it needs.


TYPE="..."

May indicate the type of data referred to by a DATA attribute.


STANDBY="..."

Lets you specify a text message to be displayed while an applet or program object is being loaded and initialized.




Setting Pages in Motion with Dynamic HTML

Tags and Attributes

<SCRIPT>...</SCRIPT>

Contains client-side scripts that are executed by the browser.


LANGUAGE="..."

The scripting language (most commonly "JavaScript").


SRC="..."

The address of an external script file, if the script is not included in the Web page itself.

<!-- ... -->

Encloses comments which will not appear on the Web page when viewed with a browser, but can be read by anyone who examines the HTML source code. To include comments in a JavaScript script, put // at the beginning of each comment line. In style sheets, start comments with /* and end them with */. (Include one <!-- tag just after a <SCRIPT> or <STYLE> tag, with a --> tag just before the matching </SCRIPT> or </STYLE>, to hide the script or style commands from older browsers.)

<BUTTON>...</BUTTON>

Creates a programmable button within a <FORM>. The label for the button, which can include both text and images, goes between the <BUTTON> and </BUTTON> tags. (Microsoft Internet Explorer 4.0 only; for compatibility with Netscape Navigator 4.0, use the <INPUT> tag from Hour 8.)


TYPE="..."

The type of button. The types RESET and SUBMIT work the same as with the <INPUT> tag. The type BUTTON is used for buttons that only carry out JavaScript commands.


Multi-page Layout with Frames

Tags and Attributes

<FRAMESET>...</FRAMESET>

Divides the main window into a set of frames that can each display a separate document.


ROWS="..."

Splits the window or frameset vertically into a number of rows specified by a number (such as 7), a percentage of the total window width (such as 25%), or as an asterisk (*) indicating that a frame should take up all the remaining space, or divide the space evenly between frames (if multiple * frames are specified).


COLS="..."

Works similar to ROWS, except that the window or frameset is split horizontally into columns.


FRAMESPACING="..."

Space between frames, in pixels (Microsoft Internet Explorer 3.0 only).


FRAMEBORDER="..."

Specifies whether to display a border for the frames. Options are YES and NO. (Microsoft Internet Explorer 3.0 only.)


BORDER="..."

Size of the frame borders in pixels (Netscape Navigator only.)

<FRAME>

Defines a single frame within a <FRAMESET>.


SRC="..."

The URL of the document to be displayed in this frame.


NAME="..."

A name to be used for targeting this frame with the TARGET attribute in <A HREF> links.


MARGINWIDTH="..."

The amount of space (in pixels) to leave to the left and right side of a document within a frame.


MARGINHEIGHT="..."

The amount of space (in pixels) to leave above and below a document within a frame.


SCROLLING="..."

Determines whether a frame has scrollbars. Possible values are YES, NO, and AUTO.


NORESIZE

Prevents the user from resizing this frame (and possibly adjacent frames) with the mouse.

<NOFRAMES>...</NOFRAMES>

Provides an alternative document body in <FRAMESET> documents for browsers that do not support frames (usually encloses <BODY>...</BODY>).

<IFRAME>...</IFRAME>

Creates an inline frame. Currently only works in Microsoft Internet Explorer version 3.0 or higher. (<IFRAME> accepts all the same attributes as <FRAME>.)





Referencing Web Pages

Tags and Attributes

<META>

Used in the document <HEAD> to indicate meta-information about this document (information about the document itself). Most commonly used to make a page automatically load another page, or reload itself. Also used to provide a description and keyword hints to search engines.


HTTP-EQUIV="..."

Gives a command to the Web browser or server. For example, HTTP-EQUIV="Refresh" will cause a new page to load automatically.


NAME="..."

Can be used to specify which type of information about the document is in the CONTENT attribute. For example, NAME="description" means a brief description of the page is in CONTENT, and NAME="keywords" means that a comma-separated list of keywords related to the page is in CONTENT.


CONTENT="..."

The actual message or value for the information specified in HTTP-EQUIV or NAME. For example, if HTTP-EQUIV="Refresh" then CONTENT should be the number of seconds to wait, followed by a semi-colon and the address of the page to load.

<BASE>

Indicates the full URL of the current document. This optional tag is used within <HEAD>.

HREF="..."                 The full URL of this document.