This browser does not support basic Web standards, preventing the display of our site's intended design. May we suggest that you upgrade your browser?

HTML Coding

A Summary of HTML Codes

Note: The HTML pages are out-of-date and will not be updated.

This document serves as a quick reference guide and summary of the most common HTML codes used in creating web documents. For a more detailed description of these codes and of the web publishing process, refer to the Web Publishing Series.

return to topDocument Codes

Document codes identify the web page and specific components of the page. Three essential elements or codes are the HTML, HEAD, and BODY codes. These three elements must be used in all web pages. The Web Publishing Series document on Essential HTML Elements describes the elements and codes below and explains how they work together to form a web page.

On Off Purpose/Explanation
<HTML> </HTML> Used to identify the document as an HTML (Web) document. The HTML "on" code should be the very first item in your document; the HTML "off" code should be the very last item.
<HEAD> </HEAD> This code should immediately follow the HTML "on" code. The HEAD code is used for meta-information, or information about the document. An example of meta-information is the title. The document title, therefore, is placed inside the HEAD code. This code should be turned off before entering the text and codes for the rest of the document.
<TITLE> </TITLE> The text you choose for the title is what will be displayed in the browser's title bar, used for bookmarks, and used for indexing the file. It does not appear in the Web page itself.
<BODY> </BODY> The body is the section in which the main content of the page is placed. All text, links, and image references must be placed within the BODY section.

return to topText Formatting Codes

Much of the formatting used in word processing programs can be accomplished on Web pages as well. In Web documents, however, you need to use codes to specify different types of formatting. Codes for some of the most common formatting options are listed below. The Web Publishing Series document on Formatting Basics describes these attributes in greater detail.

On Off Purpose/Explanation
<B>
-or-
<STRONG>
</B>

</STRONG>
Boldfaces all characters between the on and off codes. Some Web editors use the <B> codes; others use the <STRONG> codes.
<I>
-or-
<EM>
</I>

</EM>
Italicizes all characters between the on and off codes. Some Web editors use the <I> codes; others use the <EM> codes.
<H1> </H1> Sets the text to the specified heading level. There are six heading levels; H1 is the largest and H6 is the smallest. At the heading code, a new line will automatically begin. The text following the off code will begin a new paragraph.
<FONT SIZE=3 </FONT> Adjusts the size of the font relative to the browser's default font size. Choose a font size between 1 (the smallest size) and 7 (the largest size). Samples of the different font sizes as they will appear on screen are provided in the Font Size Options section of Formatting Options.

return to topParagraph Formatting Codes

In addition to text formatting, you also have control over the way paragraphs in your Web document are formatted. Additional information on paragraph breaks and formatting can be found in the Web Publishing Series documents Formatting Options and Formatting Basics.

On Off Purpose/Explanation
<P> </P>
(optional)
Begins a new paragraph with a blank line between the paragraphs
<BR> none Begins a new line without adding extra space between the two lines
<P ALIGN=CENTER> </P> Centers the designated paragraph or image. CENTER can also be substituted with RIGHT. The default alignment is LEFT.
<BLOCKQUOTE> </BLOCKQUOTE> Indents the paragraph or image about one-half inch

return to topLists

Using lists helps to organize information, increase readability, and add white space to your page. HTML provides codes for unordered lists with bullets, ordered lists with numbers, and definition lists for multi-line entries, such as a glossary. It is also possible to embed a list within another list.

No matter which type of list you use, the list must have three components:

  1. The code to mark the beginning of the list
  2. The code for each item in the list (adding the bullet or the number)
  3. The code marking the end of the list

For more information about the different types of lists, refer to the Web Publishing Series document List Basics.

On Off Purpose/Explanation
<OL> </OL> Marks the beginning and end of an ordered (numbered) list
<UL> </UL> Marks the beginning and end of an unordered (bulleted) list
<LI> none Identifies an item within an ordered or unordered list
<DL> </DL> Marks the beginning and end of a definition list
<DT> none Identifies the term in a definition list. This item will appear at the left margin.
<DD> none Identifies the definition in a definition list. This section will appear indented about one-half inch.

return to topTables

Tables are used to organize information into rows and columns. For more information about tables, refer to the Web Publishing Series document on Tables.

On Off Purpose/Explanation
<TABLE> </TABLE> Marks the beginning and end of a table
<TR> </TR> (Table Row code) Marks the beginning and end of a row within a table
<TD> </TD> (Table Data Code) Marks the beginning and end of a cell within a table
<TH> </TH> (Table Heading Code) Marks the beginning and end of a heading cell within the table (formatted as bold and centered)
<CAPTION> </CAPTION> Inserts a caption immediately before or after the table. To place the caption above the table, use ALIGN=TOP within the CAPTION code; to place the caption below the table, use ALIGN=BOTTOM.
Table Code Attributes (Used within the TABLE code)
BORDER=n Adds a border around the cells of the table. You can specify any width for "n." The border around this table is 1.
CELLPADDING=n Adds additional space between the contents of the cell and the border of the table (it doesn't matter if you have selected a visible border or not). The cellpadding of this table is 6.
CELLSPACING Adds additional space within the border of the table
Additional Attributes
(Unless otherwise indicated, these can be used with either the TR or the TD code)
ALIGN=. . . Aligns the contents of the cell either RIGHT, LEFT, or CENTER within the horizontal margins
VALIGN=. . . Aligns the contents of the cell vertically along the TOP, BOTTOM, or CENTER (The default alignment is CENTER)
WIDTH=n Sets the cell at a specified width. "N" is entered in pixels. For use in TD only.
HEIGHT=n Sets the cell at a specified height. "N" is entered in pixels.
COLSPAN=n Allows the contents of the cell to span horizontally over two or more cells (depending on the number you specify for "n"). This feature is often used for column headings. (For example, the column span for the "Additional Attributes" cell above is 3.) For use in TD only.


return to top
Links

HTML documents usually contain links to other HTML documents and Internet resources. A link has three main components: the HTML code indicating a link (A HREF), the URL, and the text or image that indicates that it is a link. For a more detailed description of these components and some tips on creating effective links, refer to Linking to Internet Resources.

In addition to links to other documents and resources, many web pages contain target links. Target links allow the user to jump to another location within the same document without having to scroll to the desired section. You can also use target links to link directly to a specific section of another document. Guidelines for when and how to use target links are provided in the Web Publishing Series document Target Links.

On Off Purpose/Explanation
<A HREF="url"> </A> Creates a link to the designated URL
<A NAME="name"> </A> Establishes a name for a section of the document; used for target links
<A HREF="#name"> </A> Creates a target link to the designated section within your document. To create a target link to a specific section of a different document, insert the pound sign and A NAME after the appropriate URL:
<A HREF="url#name">

return to topImages

The following table provides the basic codes for inserting images in your web documents. For more detailed information and instruction on the use of images, refer to Adding Images to Web Pages.

You may also want to include image maps in your documents. Image maps allow you to use an image as a link. The Web Publishing Series document on Image Maps provides more information.

On Purpose/Explanation
<IMG SRC="url" ALT="some text"> (Image Source Code) Inserts an image from the designated URL. The ALT text is displayed if the image cannot be displayed.
<A HREF="url for mapping file">
<IMG SRC="url for graphic" ISMAP>
</A>
(Code for Server Side Image Maps) The ISMAP attribute tells the browser that this image is mapped. If a user clicks in a certain area of the image, the browser will consult the mapping file at the designated URL. The mapping file URL is referenced in the <A HREF> surrounding the image tag.
<IMG SRC="url for graphic"
USEMAP="#mapname">
(Code for Client Side Image Maps) The USEMAP attribute indicates that the image map information is included within your HTML file. The mapname is the title you assigned to it with the mapping software.
<A HREF="mapping file url">
<IMG SRC="url for graphic"
ISMAP USEMAP="#mapname">
</A>
(Code for both Client Side and Server Side Image Maps) Allows you to retain the benefits of Client Side Image Maps but still have the image map widely available to users.
Additional Attributes
<IMG SRC="url" WIDTH=n> Defines the width of the image. Replace "n" with a number value proportional to the height of your image. You can also specify the HEIGHT in the same way (proportional to the width of the image).
<IMG SRC="url" ALIGN=. . .> Alignment options include LEFT, RIGHT, CENTER, TOP, and BOTTOM. The Alignment of Images section of Adding Images to Web Pages describes how each type of alignment affects your text and image.

return to topColor Codes

The color codes below are used within the BODY code and are applied to the entire document. More information on selecting and applying colors to web documents is provided in the Web Publishing Series document on Colors and Backgrounds.

The following example shows the placement of color codes within the BODY tag:

<BODY BGCOLOR="color#" TEXT="color#" LINK="color#" ALINK="color#" VLINK="color#">

On Purpose/Explanation
BGCOLOR="color#" Defines the background color for the page
TEXT="color#" Defines the color for the main text on the page
LINK="color#" Defines the color for the text of unvisited links
VLINK="color#" Defines the color for the text of visited links
ALINK="color#" Defines the color for active links (the split-second color of the text as you click on it)

You can also change the color of a portion of text within the document by using the <FONT> code:

On Off Purpose/Explanation
<FONT COLOR="color#"> </FONT> Adjusts the color of the text only within the specified section

Within tables, you can adjust the background color of the entire table, selected rows, or single cells:

On Off Purpose/Explanation
<TABLE BGCOLOR="color#"> </TABLE> Adjusts the background color of the entire table
<TR BGCOLOR> </TR> Adjusts the background color only within the specified row
<TD BGCOLOR> </TD> Adjusts the background color only within the specified cell

return to topBackground Images

One way to define what the background of your page will look like is to use the BGCOLOR tag within the BODY code. This is different from the BACKGROUND code, which tiles an image across the screen and then lays text over it. An explanation of the difference between BGCOLOR and BACKGROUND and instructions for using the BACKGROUND code are provided in the Backgrounds section of the Web Publishing Series document on Colors and Backgrounds. The BACKGROUND code is also used within the BODY code of the document.

On Purpose/Explanation
BACKGROUND="url" The image at the designated URL will be tiled across the background of the page

return to topForms

Forms are useful for capturing information from people who visit your site. The Forms portion of the Web Publishing Series describes some potential uses for forms and provides an overview of the process of creating a form. The codes used to create forms are listed below.

On Off Purpose/Explanation
<FORM> </FORM> Marks the beginning and end of the form
<INPUT> Indicates the type of input field displayed for viewers
<SELECT> Creates a field with several selections. Use SIZE and MULTIPLE attributes to create a scrolling list.
<TEXTAREA> Creates a multi-line text field. Use the ROWS="n" and COLS="n" attributes to specify the size.
Form Attributes (Use within the FORM tag)
METHOD=. . . Defines the process the server will use to act on the form. Options are GET and POST.
ACTION="url" Indicates the name and address (URL) of the script to be executed after the SUBMIT button is selected
Input Field Attributes (Use within the INPUT tag)
TYPE=" " Determines the type of input field. Options are TEXT, CHECKBOX, RADIO, PASSWORD, SUBMIT, and RESET.
TYPE="TEXT" Displays space for one blank line of text
TYPE="CHECKBOX" Displays option boxes to be checked by the user when multiple selections are possible
TYPE="RADIO" Displays option circles to be clicked by the user when only one selection is possible
TYPE="PASSWORD" Displays space similar to TEXT, but characters are shielded
TYPE="SUBMIT" Displays a button for sending information
TYPE="RESET" Displays a button for clearing information from the form
MAXLENGTH="n" Determines the length of text input fields
VALUE=" " Differentiates between RADIO button options
NAME=" " Designates what information is being asked for in text input fields (for recipients of form information)

return to topOther HTML Codes

On Off Purpose/Explanation
<HR> none Creates a horizontal rule on the page. You can specify the length of the rule in pixels or as a percentage of the screen size. You can also specify the height (thickness) of the rule in pixels. For more information, refer to Horizontal Rule Options.
<!-- --> (Comment code) Used for internal documentation, such as notes for maintenance. The comments are displayed when the document is viewed in the web editor; they do not show up in the document as it is viewed normally on the browser. Example of a comment code: <!--This is a comment about HTML-->

 

Excellence. Our Measure. Our Motto. Our Goal.