Contact Local Map

HTML Tags

     Index Contact Local Map

 

 

 

Home
Foothills Antiques
G T & D
Books
Resources
NGTC
NOVA
James Accident
 

 

Writing Style Guide

 

 

General Studies

Guides

Web Design Tools

 

 

Hit Counter

 

 

 

 

HTML 4.0 Tag Reference

by Eric Ladd

  1. Reference Scope

  2. How This Chapter Is Organized

  3. Document Structure Tags

  4. Text-Level Formatting Tags

  5. Block-Level Formatting Tags

  6. List Tags

  7. Hyperlink Tags

  8. Image and Image map Tags

  9. Table Tags

  10. Form Tags

  11. Frame Tags

  12. Executable Content Tags

Reference Scope

This chapter is unique in the book because it is written to serve as a reference for all the tags included in the recommended HTML 4.0 standard. It is a one-stop catalog of each tag, including the tag’s attributes, syntax, and examples uses. By necessity, the chapter covers a large amount of information, but you’ll soon come to appreciate the value of having all the relevant facts about all HTML tags, together with tips on how to use them, right at your fingertips.

How This Chapter Is Organized

Because of the vast coverage of the chapter, the information presented has been carefully structured to make it as easy as possible for you to look up the tags that you need. At the highest level, the chapter is organized into major sections that cover a group of related tags. The major sections include

  • Document structure tags

  • Text-level formatting tags

  • Block-level formatting tags

  • List tags

  • Hyperlink tags

  • Image and image map tags

  • Table tags

  • Form tags

  • Frame tags

  • Executable content tags

In some cases, tags covered in this chapter get a more thorough treatment in a later chapter of the book. Look for cross-references to point you to this expanded coverage.

Within a given section, several tags are discussed in detail. Specifically, you’ll find the following information about each tag:

  • The tag’s keyword--For example, the <INPUT> tag’s keyword is INPUT.

  • What kind of tag it is--Every HTML tag is either a container tag or a standalone tag. A container tag is one that activates an effect and that has a companion tag that discontinues the effect. For example, <I> is a container tag that, together with its companion closing tag </I>, causes all text found between them to be rendered in italics. The <I> tag turns on the italics effect and the </I> tag turns it off. A standalone tag is one that does not have a companion tag. For example, the <IMG> tag simply places an image on a page. <IMG> has no effect that was turned on and needs to be turned off, so there is no need for a closing tag.

     

    Note Standalone tags are sometimes called empty tags. N

     

  • The tag’s function--A description of the effect or page element that the tag controls.

  • The tag’s syntax--HTML is derived from the Standard Generalized Markup Language (SGML) by applying SGML constructs according to a certain set of rules. These rules define a tag’s syntax.

  • The tag’s attributes--An attribute modifies how a tag’s effect is applied. Some tags take no attributes, and others may be able to take several. Additionally, attributes can sometimes take on only one of a set number of values. In these cases, the possible values of the attribute are listed along with the attribute. Use of some attributes may be required (such as the SRC attribute for the <IMG> tag), and use of others may be option. A tag’s required attributes, if any, are noted in each attribute discussion.

  • Example usage--You can learn more about how a tag is used by looking over the sample code given in the tag description.

  • Related tags--Some tags work in conjunction with others to produce an effect. In these cases, you’ll find a listing of the other HTML tags related to the one being described. Very often, you’ll find that the related tags are discussed in the same section.

Within a section, tags are listed alphabetically by keyword, unless they need to be used in a certain order, in which case, they are presented in the order that they are typically used.

Document Structure Tags

Every HTML document has three major components: the HTML declaration,

the head, and the body. The document structure tags are those that

define each component.

 

<HTML>

Type: Container
Function: Declares the document to be an HTML document.

All document content and supporting HTML code goes between

 the <HTML> and </HTML> tags.
Syntax: <HTML> ... </HTML>
Attributes: None.
Example: <HTML> ... all content and HTML code goes here ... </HTML>
Related Tags: 

Although the <HTML> tag is typically the first tag in a 
document, it is sometimes preceded by a <!DOCTYPE> tag that 
specifies what level of HTML conformance the document 
displays. A document conforming to the HTML 4.0 standard 
might have a <!DOCTYPE> tag that reads:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”>
Technically, <!DOCTYPE> is an SGML tag, not an HTML tag, so 
it is acceptable for it to be outside the <HTML> and </HTML> 
tags.


<HEAD>

Type:      Container
Function:   Contains the tags that comprise the document head.
Syntax:     <HEAD> ... </HEAD>
 

Example: 

<HTML>
<HEAD>
... tags making up the document head go here ...
</HEAD>
... all other content and HTML code goes here ...
</HTML>

Related Tags: A number of tags can be placed between the <HEAD> and </HEAD>

tags, including <BASE>, <ISINDEX>, <LINK>, <META>, <SCRIPT>, <STYLE>, and <TITLE>.

Each of these is described next.


<BASE>

Type: Standalone
Function: Declares global reference values for the HREF and TARGET attributes. The reference or base HREF value is used as a basis for computing all relative URL references. The base TARGET name is used to identify the frame into which all linked documents should be loaded.
Syntax: <BASE HREF=”base_url”> or <BASE TARGET=”frame_name”>
Attributes: The <BASE> tag takes either the HREF or the TARGET attribute. A given <BASE> tag can contain only one of these, so if you need to specify a base URL and a base target frame, you need to have two <BASE> tags in the head of your document. These two attributes work as follows:

  • HREF--Specifies the reference URL that is used to help compute relative URLs. For example, if the BASE HREF URL is http://www.myserver.com/sports/hockey/skates.html and you use the relative URL pucks.html elsewhere in the document, the relative URL will really point to http://www.myserver.com/sports/hockey/pucks.html.

  • TARGET--Specifies the default frame name to which all links are targeted.

Note When used in a <BASE> tag, HREF is typically set to the URL of the document.

 

Example: 

<HEAD>
<BASE HREF=”http://www.myserver.com/index.html”>
<BASE TARGET=”bigframe”>
...

</HEAD>

This code sets the document’s base URL to http://www.myserver.com/index.html and the base frame for targeting hyperlinks to the frame named ”bigframe”.


 <ISINDEX>

Type: Standalone
Function: Produces a single-line input field used to collect query information.
Syntax: <ISINDEX PROMPT=”Please enter the value to search for.”>
Attributes: The PROMPT attribute specifies what text should appear before the input field. In the absence of a PROMPT attribute, the text will read "This is a searchable index. Enter search criteria:".
Example: 

<HEAD>
<ISINDEX PROMPT=”Enter the last name of the employee you want to search for:”>
...

</HEAD>

<ISINDEX> was used in the early days when the <FORM> tags had yet to come onto the scene. The W3C has deprecated the <ISINDEX> tag, meaning that it discourages its use in favor of using the <FORM> tags and that it expects to drop the tag from the standard in the future.


  <META>

Type: Standalone
Function: Defines document meta-information, such as keywords, expiration date, author, page generation software used, and many other document-specific items. It also supports the notion of client pull--a dynamic document technique in which the browser loads a new document after a specified delay.
Syntax: <META HTTP-EQUIV=”header” CONTENT=”value”> or <META NAME=”name” CONTENT=”value”>
Attributes: The <META> tag takes the following attributes:

  • HTTP-EQUIV--Specifies a type of HTTP header to be sent with the document. The value of the header is given by the CONTENT attribute. The two most commonly used values of HTTP-EQUIV are REFRESH, which refreshes the page after a specified delay, and EXPIRES, which gives the date after which content in the document is not considered to be reliable.

  • NAME--Set equal to the name of the document meta- variable you want to specify. The value of the variable is given in the CONTENT attribute. Typical values for NAME include AUTHOR, KEYWORDS, GENERATOR, and DESCRIPTION. The KEYWORDS value is particularly useful for specifying words you’d like a search engine’s indexing program to associate with the page.

  • SCHEME--Provides information on how to interpret the meta-variable. For example, with the following <META> tag: <META SCHEME=”9-digit-ZipCode” NAME=”zip” CONTENT=”02134-1078”> a browser may not know how to interpret "02134-1078" without information from the SCHEME attribute.

  • CONTENT--Specifies either the HTTP header or the value of the meta-variable.

zzExample:

<HEAD>
<!-- The first <META> tag instructs the browser to load a new page after 10 seconds. -->
<!-- This is useful for creating a splash screen effect. -->
<META HTTP-EQUIV=”Refresh” CONTENT=”10, URL=http://www.myserver.com/index2.html”>
<!-- The remaining <META> tags specify author and keyword information. -->
<META NAME=”AUTHOR” CONTENT=”Eric Ladd”>
<META NAME=”KEYWORDS” CONTENT=”Main page, welcome, neat stuff”>
...

</HEAD>


<LINK>

Type: Standalone
Function: Denotes the linking relationship between two files.
Syntax: <LINK HREF=”url_of_linked_file” TITLE=”title” REL=”forward_relationship” REV=”reverse_relationship”>
Attributes: The <LINK> tag takes the following attributes:

  • HREF--Set equal to the URL of the file to which you’re making the linking reference.

  • TITLE--Gives the link a descriptive title.

  • REL--Specifies the relationship of the linked file to the current file.

  • REV--Specifies how the current file relates to the linked file.

Table 3.1 shows some possible values for REL and REV and what these values mean.

Table 3.1--Possible Values for the REL and REV Attributes
Value	Meaning
Copyright	Web site’s copyright page
Glossary	Glossary of terms for a site
Help	Site help page
Home	Site home page
Index	Site index page
Made	mailto URL pointing to the email address of 
the page author
Next	Page that logically follows the current page
Previous	Page that precedes the current page
Stylesheet	File containing style information for the 
page
TOC	Site table of contents
Up	Page that is above the current page in a 
site’s hierarchy

Because there are so many different types of linked files, it is permissible to have more than one <LINK> tag in a document.

Example: 

<HEAD>
<LINK HREF=”/style/styles.css” REL=”Stylesheet”>
<LINK HREF=”/index.html” REL=”Home”>
<LINK HREF=”/help.html” REL=”Help”>
<LINK HREF=”back_one.html” REV=”Next”
...

</HEAD>


<SCRIPT>

Type: Container
Function: Contains script code referenced in the body of the document.
Syntax: 

<SCRIPT LANGUAGE=”scripting_language”>
... script code goes here ...
</SCRIPT>

Attributes: The <SCRIPT> tag can take the following attributes:

  • DEFER--Specifying the DEFER attribute tells the browser that the script does not generate any document content. This enables the browser to continue parsing and rendering the document without having to execute the script.

  • LANGUAGE--Set equal to the scripting language used to write the script. LANGUAGE is being deprecated in favor of using the TYPE attribute.

  • SRC--Specifies the URL of a file containing the script code, if not contained between the <SCRIPT> and </SCRIPT> tags.

  • TYPE--Set equal to the MIME type of the script code, usually text/javascript or text/vbscript. TYPE is a required attribute under HTML 4.0.

Example: 

<SCRIPT LANGUAGE=”VBScript”>
<!--
Sub ScriptEx
document.write(“<HR>”)
document.write(“<H1 ALIGN=CENTER>Thank you for your submission!</H1>”)
document.write(“<HR>”)

</SCRIPT>

Script code is often placed between <!-- and --> tags so that browsers that can’t process scripts will treat the code as a comment.


<STYLE>

Type: Container
Function: Specifies style information for the document.
Syntax: 

<STYLE TYPE=”mime_type” MEDIA=”media_type” TITLE=”title”>
... style information goes here ...
</HTML>

Attributes: THE <STYLE> tag takes the following three attributes:

  • MEDIA--Specifies what media types the styles are to be used for (visual browser, speech-based browser, Braille browser, and so on).

  • TITLE--Gives the style information a descriptive title.

  • TYPE--Set equal to the Internet content type for the style language. This means that you will most likely say TYPE="text/css1" to denote the use of the style language put forward in the Cascading Style Sheets, Level 1 specification. TYPE is a required attribute of the <STYLE> tag.

Example: 

<STYLE TYPE=”text/css1”>
<!--
   BODY {font: 10 pt Palatino; color: silver margin-left: 0.25 in}
   H1 {font: 18 pt Palatino; font-weight: bold}
   H2 {font: 16 pt Palatino; font-weight: bold}
   P {font: 12 pt Arial; line-height: 14 pt; text-indent: 0.25 in}
-->
</STYLE>

Style information is usually contained between <!-- and --> tags so that browsers that cannot process it will treat the style information as a comment.


<TITLE>

Type: Container
Function: Gives a descriptive title to a document. Use of the <TITLE> tag is required by the HTML 4.0 DTD for many good reasons. Titles show up in browser window title bars and in bookmark and history listings. In each of these cases, you provide an important reader service when you specify a title, because the browser will display just the document’s URL otherwise. Additionally, web search engines such as Yahoo! and AltaVista frequently look for title information when they index a document.
Syntax: <TITLE> ... document title goes here ... </TITLE>
Attributes: None.
Example: 

<TITLE>
The Advantages of a Corporate Web Site
</TITLE>

Try to keep titles to 40 characters or less so that browsers can display them completely.


<BODY>

Type: Container
Function: Contains all content and tags that comprise the document
body. Syntax: 

<BODY BGCOLOR=”background_color” BACKGROUND=”background_image”
   LINK=”unvisited_link_color” ALINK=”active_link_color” 
   VLINK=”visited_link_color” TEXT=”text_color”>
 ... document body goes here ...
</BODY>

Attributes: The <BODY> tag takes the following attributes, which focus on global background and coloring properties. Each color- related attribute can be set equal to one of the sixteen reserved color names (BLACK, WHITE, AQUA, SILVER, GRAY, MAROON, RED, PURPLE, FUSCHIA, GREEN, LIME, OLIVE, YELLOW, NAVY, BLUE, and TEAL) or to an RGB hexadecimal triplet.

  • ALINK--Set equal to the color you want to paint active links (a link is active in the instant that the user clicks it).

  • BACKGROUND--Set equal to the URL of an image to use in the document background. The image will be horizontally and vertically tiled if it is not large enough to fill the entire browser screen.

  • BGCOLOR--Set equal to the color you want to paint the document’s background.

  • LINK--Set equal to the color you want to paint unvisited links (a link is unvisited if a user has yet to click it).

  • TEXT--Set equal to the color you want to paint the body text of the document.

  • VLINK--Set equal to the color you want to paint visited links (a link is visited if a user has already clicked it).

All the attributes listed have been deprecated in favor of using style sheet characteristics to specify the same information.

Example: 

<BODY BGCOLOR=”white” TEXT=”#FF0088” LINK=”#DD0F00” VLINK=”#00FF9A”>
... all document body content and HTML code goes here ...
</BODY>

Related Tags: Dozens of tags are allowed between the <BODY> and </BODY> tags. In fact, with the exception of some of the frame- related tags, any tag in the rest of the chapter can be placed between <BODY> and </BODY>.

Putting together what you’ve learned in this section, you can come up with a generic HTML document template such as the following: 

<HTML>
<HEAD>
<TITLE>Document Template</TITLE>
... <META>, <BASE>, <LINK>, <SCRIPT>, <STYLE>, <ISINDEX> tags ...
</HEAD>
<BODY>
... document body content and tags ...
</BODY>
</HTML>

When creating a new document, you can use this code to get started and then fill in tags and other information according to your needs.

Text-Level Formatting Tags

HTML provides a host of tags that you can use to change how text is displayed on a browser screen. After all, 12-point Times Roman gets a little tired after a while, and it’s nice to give a reader an occasional break from a sea of ordinary text.

Text-level formatting can occur in one of two ways. An HTML tag that formats text can make changes to the font properties of the text (font formatting or physical styles), or it can describe how the text is being used in the context of the document (phrase formatting or logical styles). The next two sections introduce you to the tags used for each type of formatting.

Font Formatting

<B>

Type: Container
Function: Contains text to be rendered in boldface.
Syntax: <B> ... bold text goes here ... </B>
Attributes: None.
Example: <B>Stop!</B> Make sure you activate SSL on your browser before proceeding.


<BASEFONT>

Type: Standalone
Function: Sets base size, color, and typeface properties for the body text font.
Syntax: <BASEFONT SIZE=”size” COLOR=”color” FACE=”list_of_typefaces”>
Attributes: <FONT> can take any combination of the following attributes:

  • COLOR--Set to any of the 16 reserved, English- language color names or an RGB hexadecimal triplet. The default font color is black.

  • FACE--Set to a list of typefaces that the browser should use to render the text. The browser will use the first face in the list if that face is available. If not, it will work through the rest of the list and use the first face it finds available.

  • SIZE--Set equal to an integer value between 1 and 7. This number is mapped to a font size in points by the browser, according to the user’s preferences. The default SIZE value is 3.

Example: <BASEFONT SIZE=5 COLOR=”navy” FACE=”Arial,Helvetica,Times”> Related Tags: The <FONT> tag is typically used if you need to modify any of the base font properties specified in the <BASEFONT> tag.

The W3C has deprecated the use of the <BASEFONT> tag. Specifying font properties, such as size, color, and typeface, can now be done with style sheets.


<BIG>

Type: Container
Function: Contains text to be rendered in a font size bigger than the default font size.
Syntax: <BIG> ... big text goes here ... </BIG>
Attributes: None.
Example: It’s <BIG>really</BIG> important that you check this out!
Related Tags: The <SMALL> tag has the opposite effect (see later in this chapter).


<FONT>

Type: Container
Function: Contains text whose font properties are to be modified.
Syntax: 

<FONT SIZE=”size” COLOR=”color” FACE=”list of typefaces”>
... text with modified font properties ... 
</FONT>

Attributes: Note that the <FONT> tag has the same attributes as the <BASEFONT> tag. <FONT> is used to change font properties from the base values provided in the <BASEFONT> tag or from their default values. SIZE can be set to a value between 1 and 7, or it can be set equal to how much larger or smaller you want the font size to go (-1 for one size smaller, +3 for three sizes larger, and so forth). COLOR and FACE work exactly as they did for the <BASEFONT> tag.
Example: <FONT SIZE=+1 COLOR=”red”>Caution:</FONT> You should scan all downloaded files with a virus checker before executing them.
Related Tags: <FONT> changes properties specified in the <BASEFONT> tag.

For changing font properties, the <FONT> tag has been deprecated in favor of style sheets.


<I>

Type: Container
Function: Contains text to be rendered in italics.
Syntax: <I> ... italicized text goes here ... </I>
Attributes: None.
Example: My favorite paper is <I>The Wall Street Journal</I>.


<S>, <STRIKE>

Type: Container
Function: Contains text to be marked with a strikethrough character.
Syntax: 

<S> ... strikethrough text goes here ... </S>
or
<STRIKE> ... strikethrough text goes here ... </STRIKE>

Attributes: None.
Example: Content that has been struck from the record will be denoted as follows: <S>removed content</S>.

Both the <S> and <STRIKE> tags have been deprecated by the W3C. You should use style sheets to render strikethrough text instead.


<SMALL>

Type: Container
Function: Contains text to be rendered in a font size smaller than the default font size.
Syntax: <SMALL> ... smaller text goes here ... </SMALL>
Attributes: None.
Example: It’s a <SMALL>small world</SMALL> after all!
Related Tags: The <BIG> tag has the opposite effect (see the <BIG> tag section earlier in the chapter).


<SUB>

Type: Container
Function: Contains text to be a subscript to the text that precedes it.
Syntax: <SUB> ... subscript text goes here ... </SUB>
Attributes: None.
Example: In the above equation, x<SUB>1</SUB> and x<SUB>2</SUB> are the unknowns.


<SUP>

Type: Container
Function: Contains text to be rendered as a superscript to the text that precedes it.
Syntax: <SUP> ... superscript text goes here ... </SUP>
Attributes: None.
Example: The area of a square equals s<SUP>2</SUP>, where s is the length of one side.


<TT>

Type: Container
Function: Contains text to be rendered in a fixed-width font. Typically, this font is Courier or some kind of typewriter font.
Syntax: <TT> ... text to be in fixed-width font goes here ... <TT>
Attributes: None.
Example: The computer will then display the <TT>Login:</TT> prompt.


<U>

Type: Container
Function: Contains text to be rendered with an underline.
Syntax: <U> ... text to be underlined ... </U>
Attributes: None.
Example: Longest book I’ve read: <U>War and Peace</U>.

The <U> tag has been deprecated by the W3C. If you need to underline text, you can do so using style sheets. However, keep in mind that a user might confuse your underlined text with hypertext and try to click it. Also, in keeping with general typesetting rules, if you italicize for form or style, you should not underline.

Phrase Formatting

Recall that phrase formatting indicates the meaning of the text it marks up and not necessarily how the text will be rendered on the browser screen. Nevertheless, text marked with a phrase formatting tag will typically have some kind of special rendering to set it apart from unmarked text.


<ACRONYM>

Type: Container
Function: Contains text that specifies an acronym.
Syntax: <ACRONYM> ... acronym goes here ... </ACRONYM>
Attributes: None.
Example: Hypertext Markup Language <ACRONYM>(HTML)</ACRONYM> is derived from the Standard Generalized Markup Language <ACRONYM>SGML</ACRONYM>.


<ADDRESS>

Type: Container
Function: Contains either a postal or electronic mail address. Text marked with this tag is typically rendered in italics.
Syntax: <ADDRESS> ... address goes here ... </ADDRESS>
Attributes: None.
Example: If you have any comments, please send them to <ADDRESS>feedback@myserver.com</ADDRESS>.


<CITE>

Type: Container
Function: Contains the name of a source from which a passage is cited. The source’s name is typically rendered in italics.
Syntax: <CITE> ... citation source goes here ... </CITE>
Attributes: None.
Example: According to the <CITE>New York Times</CITE>, crime in the city is on the decline.


<CODE>

Type: Container
Function: Contains chunks of computer language code. Browsers commonly display text marked with the <CODE> tag in a fixed-width font.
Syntax: <CODE> ... code fragment goes here ... </CODE>
Attributes: None.
Example: 

<CODE>
for n = 1 to 10
   value(n) = (n++)^2;
</CODE>

<DEL>

Type: Container
Function: Contains text that has been deleted from the document. The tag is intended mainly for documents with multiple authors and/or editors who would want to see all the content in an original draft, even though it may have been deleted by a reviewer.

The idea of logically marking up deleted text is similar to the idea of using revision marks in Microsoft Word. When revision marks are turned on, you can see the deleted text even though it is technically no longer part of the document.

Syntax: <DEL> ... deleted text goes here ... </DEL>
Attributes: None.
Example: She just got a big<DEL>, huge</DEL> raise. In this example, the use of the word huge is redundant, so an astute copy editor would delete it.
Related Tags: The <INS> tag has a similar function for inserted text.


<DFN>

Type: Container
Function: Denotes the defining instance of a term. Internet Explorer will display text tagged with <DFN> in italics, whereas Netscape Navigator will not use any special formatting.
Syntax: <DFN> ... term being introduced goes here ... </DFN>
Attributes: None.
Example: Freud proposed the idea of a <DFN>catharsis</DFN> - a release of psychic tension.


<EM>

Type: Container
Function: Contains text to be emphasized. Most browsers render emphasized text in italics.
Syntax: <EM> ... emphasized text goes here ... </EM>
Attributes: None.
Example: All employees <EM>must</EM> sign their timesheets before submitting them.


<INS>

Type: Container
Function: Contains text that has been inserted into the document after its original draft.
Syntax: <INS> ... inserted text goes here ... </INS>
Attributes: None.
Example: The New World was discovered by <DEL>Magellan</DEL> <INS>Columbus</INS> in 1492.

Note how <DEL> and <INS> are used together to strike some text and then insert a correction in its place.

Related Tags: The <DEL> tag logically represents deleted text.


<KBD>

Type: Container
Function: Contains text that represents keyboard input. Browsers typically render such text in a fixed-width font.
Syntax: <KBD> ... keyboard input goes here ... </KBD>
Attributes: None.
Example: When prompted for the item code, enter <KBD>179-990A</KBD>.


<Q>

Type: Container
Function: Contains a direct quotation to be displayed inline.
Syntax: <Q CITE=”URL_of_cited_document”> ... quotation goes here ... </Q>
Attributes: If you’re quoting from an online source, you can set the CITE attribute equal to the source’s URL.
Example: <Q>To be or not to be. That is the question.</Q>, he said dramatically.
Related Tags: The <BLOCKQUOTE> tag can also be used to denote quoted text, but block quotes are displayed with increased right and left indents and not in line with the rest of the body text.


<SAMP>

Type: Container
Function: Contains text that represents the literal output from a program. Such output is sometimes referred to as sample text. Most browsers will render sample text in a fixed-width font.
Syntax: <SAMP> ... program output goes here ... </SAMP>
Attributes: None.
Example: A common first exercise in a programming course is to write a program to produce the message <SAMP>Hello World</SAMP>.


<STRONG>

Type: Container
Function: Contains text to be strongly emphasized. Browsers typically render strongly emphasized text in boldface.
Syntax: <STRONG> ... strongly emphasized text goes here ... </STRONG>
Attributes: None.
Example: Do <STRONG>not</STRONG> install the software until you’ve closed all other running applications.


<VAR>

Type: Container
Function: Denotes a variable from a computer program. Variables are typically rendered in a fixed-width font.
Syntax: <VAR> ... program variable goes here ... </VAR>
Attributes: None.
Example: The <VAR>RecordCount</VAR> variable is set to the number of records that the query retrieved.

Block-Level Formatting Tags

Block-level formatting tags are usually applied to larger content than the text-level formatting tags. As such, the block-level tags define major sections of a document, such as paragraphs, headings, abstracts, chapters, and so on. The tags profiled in this section are the ones to turn to when you when you want to define the block-level elements in a document you’re authoring.


<BLOCKQUOTE>

Type: Container
Function: Contains quoted text that is to be displayed indented from regular body text.
Syntax: <BLOCKQUOTE CITE=”URL_of_cited_document”> ... quoted text goes here ... </BLOCKQUOTE>
Attributes: If you’re quoting from an online source, you can set the CITE attribute equal to the source’s URL.
Example: 

Fans of Schoolhouse Rock will always be able to recite the preamble
of the United States Constitution:
<BLOCKQUOTE>
We, the people, in order to form a more perfect Union ...
</BLOCKQUOTE>

Related Tags: The <Q> tag is used to denote quoted text that is to be displayed in line with the body text.


<BR>

Type: Standalone
Function: Inserts a line break in the document. Carriage returns in the HTML code do not translate to line breaks on the browser screen, so authors often need to insert the breaks themselves. The <BR> tag is indispensable when rendering text with frequent line breaks, such as addresses or poetry. Unlike the <P> tag or the heading tags, <BR> adds no additional vertical space after the break.
Syntax: <BR CLEAR=”LEFT|RIGHT|ALL”>
Attributes: The CLEAR attribute tells which margin to break to when breaking beyond a floating page element such as an image. Setting CLEAR=”LEFT” breaks to the first line in the left margin free of the floating object. CLEAR=”RIGHT” breaks to the first clear right margin, and CLEAR=”ALL” breaks to the first line in which both the left and right margins are clear.
Example: 

President William Jefferson Clinton<BR>
The White House<BR>
1600 Pennsylvania Avenue NW<BR>
Washington, DC 20500

<CENTER>

Type: Container
Function: Centers all text and other page components it contains.
Syntax: <CENTER> ... centered page components goes here ... </CENTER>
Attributes: None.
Example: 

<CENTER>
<H2>Annual Report to Stockholders</H2>
by Caroline A. Krauss, CEO
</CENTER>

The W3C has deprecated the <CENTER> tag in favor of using the <DIV> tag (see the following tag) or style sheets for centering.


<DIV>

Type: Container
Function: Defines a section or division of a document that requires a special alignment.
Syntax: 

<DIV ALIGN=”LEFT|RIGHT|CENTER|JUSTIFY”>
...
</DIV>

Attributes: The ALIGN attribute controls how text contained between the <DIV> and </DIV> tags is aligned. You can set ALIGN equal to LEFT, RIGHT, CENTER, or JUSTIFY, depending on the kind of alignment you need.
Example: 

<DIV ALIGN=”JUSTIFY”>
This is a fairly long paragraph that should be rendered with non-ragged
left and right margins.  HTML authors can accomplish this effect by
setting the ALIGN attribute equal to JUSTIFY.  ALIGN=LEFT will make the
text flush left, but the right margin will be ragged.
</DIV>

<HR>

Type: Standalone
Function: Places a horizontal line on the page.
Syntax: <HR ALIGN=”alignment” NOSHADE SIZE=”thickness” WIDTH=”pixels_or_percentage_of_screen”>
Attributes: The unmodified <HR> tag places a line, 1 pixel thick, across the page. The line will have a shading effect to give the illusion of being three-dimensional. You can change how the default line is displayed by using combinations of the following attributes:

  • ALIGN--You can set ALIGN equal to LEFT, RIGHT, or CENTER to change how the horizontal line is aligned on the page. Note that this matters only when you’ve changed the width of the line to be something less than the browser screen width. The default value of ALIGN is CENTER.

  • NOSHADE--Placing the NOSHADE attribute in an <HR> tag suppresses the shading effect and yields a solid line.

  • SIZE--SIZE controls the thickness of the line. You set SIZE equal to the number of pixels in thickness you’d like the line to be.

  • WIDTH--A line’s WIDTH can be specified in one of two ways. You can set it equal to a number of pixels, or you can set it equal to a percentage of the user’s browser screen width (or table cell, if you’re placing a line inside a cell). Because you can’t know the screen resolution settings of every user, you should use the percentage approach whenever possible.

Example: 

<HR NOSHADE WIDTH=80% SIZE=4>
<DIV ALIGN=”CENTER”><B>Welcome!</B></DIV>
<HR NOSHADE WIDTH=80% SIZE=4>

<H1>[nd]<H6>

Type: Container
Function: Establishes a hierarchy of document heading levels. Level 1 has the largest font size. Increasing through the levels causes the font size to decrease. All headings are rendered in boldface and have a little extra line spacing built in above and below them.

Although the headings tags are meant to be used in a strictly hierarchical fashion, many authors use them out of sequence to achieve the formatting effects they want.

Syntax: 

<Hn ALIGN=”LEFT|RIGHT|CENTER|JUSTIFY”> ... Level n heading ... </Hn>
where n = 1, 2, 3, 4, 5, or 6.

Attributes: The ALIGN attribute controls how the heading is aligned on the page. You can set a heading’s alignment to values of LEFT, RIGHT, CENTER, or JUSTIFY. The default alignment is LEFT. Example: 

<H1 ALIGN=”CENTER”>Table of Contents</H1>
<H2>Chapter 1 - Introduction</H2>
...
<H2>Chapter 2- Prior Research</H2>
...

<P>

Type: Container
Function: Denotes a paragraph. Most browsers ignore the use of multiple <P> tags to increase the amount of vertical space in a document.
Syntax: 

<P ALIGN=”LEFT|RIGHT|CENTER|JUSTIFY”>
paragraph text
</P>

Attributes: The ALIGN attribute controls how text in the paragraph is aligned. You can set ALIGN to LEFT (the default), RIGHT, CENTER, or JUSTIFY.
Example: 

<P ALIGN=”CENTER”>
Every line of text in this paragraph is centered,
which probably makes it look somewhat strange
since most people are accustomed to a JUSTIFY alignment
for lots of text.
</P>

<PRE>

Type: Container
Function: Denotes text to be treated as preformatted. Browsers render preformatted text in a fixed-width font. Whitespace characters, such as spaces, tabs and carriage returns, found between the <PRE> and </PRE> tags are not ignored. This makes preformatted text a viable option for presenting tables of information.
Syntax: 

<PRE WIDTH=”width_of_widest_line”>
... preformatted text goes here ...
</PRE>

Attributes: The <PRE> tag’s WIDTH attribute is set to the number of characters in the widest line of the preformatted text block. This information helps some browsers choose the font size for displaying the text.
Example: 

<PRE WIDTH=34>
Catalog No.  Item           Price
AZ-1390      Polo Shirt     $29.99
FT-0081      Sweater        $52.99
CL-9334      Belt           $16.99
</PRE>

<SPAN>

Type: Container
Function: Generic container tag for applying style information.
Syntax: 

<SPAN STYLE=”style information”>
range of text over which style is to be applied
</SPAN>

Attributes: You can set the STYLE attribute to a sequence of as many characteristic: value pairs as you need to specify the style information you’re applying. Valid style characteristics are those put forward in the Cascading Style Sheets Level 1 specification.
Example: 

<SPAN STYLE=”font-weight: bold; color: red; text-indent: 0.25 in”>
Here is some bold, red, text that’s indented by one quarter of an inch.
</SPAN>

List Tags

Technically, HTML lists are a form of block-level formatting, but because lists are such a useful way of presenting content, the list tags merit their own section in the chapter.
HTML 4.0 continues to support five types of lists, although tags for two of the five have been deprecated. Using the tags in this section, you can create the following types of lists:

  • Definition lists

  • Directory lists

  • Menu lists

  • Ordered (numbered) lists

  • Unordered (bulleted) lists

Most HTML lists make use of the list item tag, <LI>, so this tag is covered first, followed by the tags you use to create each type of list.


<LI>

Type: Container
Function: Denotes an item in a list.
Syntax: <LI TYPE=”list_type” START=”start_value”> ... list item goes here ... </LI>
Attributes: The <LI> tag can take two different attributes:

  • START--(Ordered lists only) You can change the starting value of the numbering sequence from the default of 1 to any other value you choose.

  • TYPE--(Ordered and unordered lists) You can modify the numbering scheme in an ordered list or the bullet character in an unordered list by setting TYPE to one of the different list types available. Ordered list types include 1 (Arabic numerals), A (uppercase alphabet), a (lowercase alphabet), I (uppercase Roman numerals), and i (lowercase Roman numerals). The unordered list types include DISC (solid circular bullet), SQUARE (solid square bullet), and CIRCLE (open circular bullet).

Even if you are not using an Arabic numeral numbering scheme, you should still set START equal to a numeric value. Browsers know to map the START value to any numbering scheme you’ve specified in a TYPE attribute. For example, the code: <LI TYPE=”a” START=”4”> will produce an ordered list beginning with the lowercase letter d.

Example: 

<LI>Larry</LI>
<LI>Curly</LI>
<LI>Moe</LI>

Related Tags: The <LI> tag is always used in conjunction with one of the other HTML list tags: <DIR>, <MENU>, <OL>, and <UL>.


<DIR>

Type: Container
Function: Creates a directory listing. Items in a directory list are bulleted and generally short--usually not more than 20 characters in length. Directory lists were originally intended for rendering narrow columns of information, such as indexes or telephone directory listings.

The <DIR> tag has been deprecated by the W3C. You should use an unordered list (<UL>) instead.

Syntax: 

<DIR COMPACT>
<LI>List item 1</LI>
<LI>List item 2</LI>
...
</DIR>

Attributes: The optional COMPACT attribute instructs a browser to reduce the spacing between list items so that the list is rendered in the smallest amount of vertical space possible.
Example: 

<DIR>
<LI>Mary Garrison, x521</LI>
<LI>Tom Hinkle, x629</LI>
<LI>Pat Joseph, x7