School of Information Technology
Illinois State University

HTML TAGS


Most documents have common elements, such as, titles, paragraphs, and lists. These elements are identified in HTML through the use of tags. Everything that is not an HTML tag is part of the document content. With a few exceptions, HTML does not allow you to describe the exact appearance or layout of a document. The designers of HTML did this on purpose. Why? Because you don't know the capabilities of the computer that is going to display the document, i.e. the size of the screen, the fonts that are installed, etc. By separating the structure of a document and its appearance, a browser program that reads and interprets HTML can make formatting decisions based on the capabilities of the end user's computer.

Most HTML tags are used in pairs, that is, HTML tags generally have a beginning tag and an ending tag surrounding the text that they affect, e.g.

       <TagName>the affected text</TagName>
The tag name itself (here, TagName) is enclosed in brackets (< >).

The beginning tag "turns on" a feature (such as headings, bold, etc.), and the ending tag turns it off. Closing tags have the same name as the beginning tag except that the closing tag name is preceded by a slash (/). For example, the following <STRONG> tag will make the word basic in the following sentence bold when displayed by a browser.

        This is a <STRONG>basic</STRONG> tag tutorial.
will be displayed as:
        This is a basic tag tutorial.
Not all HTML tags have a beginning and an end. Some tags are only one-sided, such as the <LI> tag for an element in a list.

All HTML tags are case-insensitive; that is, you can specify them in upper or lower case, or in a mixture. <STRONG> is the same as <strong> or <STrong>. It is common practice, however, to specify all tags in uppercase because they are easier to spot when editing an HTML document.

The following sections describe the use of commonly used HTML tags. If HTML is new to you, I suggest that you read each section in sequence. If you are interested in learning about a particular feature then you can use one of the following links.


LINKS TO TOPICS
ADDRESS Anchors - Creating Links BASEFONT
BLOCKQUOTE - Extended Quotations BODY Bold
BR - Line Break CENTER Comments
FONT FORM HEAD
Headings HR - Horizontal Rule HTML
IMG SRC - Images Italics Lists - UL, OL, and DL
MAILTO: MAP - Image Maps Paragraphs
PRE - Preformatted Text Sounds and Animations Special Characters
TABLE TITLE Troubleshooting

PRE

Use the <PRE> </PRE> tag (which stands for "preformatted") to generate text in a fixed-width font. This tag also makes spaces, new lines, and tabs significant (multiple spaces are displayed as multiple spaces, and lines break in the same locations as in the source HTML file). This is useful for program listings, among other things.

For example, the following lines:

    <PRE>
    #!/bin/csh
    cd $SCR
    cfs get mysrc.f:mycfsdir/mysrc.f
    cfs get myinfile:mycfsdir/myinfile
    fc -02 -o mya.out mysrc.f
    mya.out
    cfs save myoutfile:mycfsdir/myoutfile
    rm *
    </PRE>
will be display as:
    #!/bin/csh
    cd $SCR
    cfs get mysrc.f:mycfsdir/mysrc.f
    cfs get myinfile:mycfsdir/myinfile
    fc -02 -o mya.out mysrc.f
    mya.out
    cfs save myoutfile:mycfsdir/myoutfile
    rm *
The <PRE> tag can be used with an optional WIDTH attribute that specifies the maximum number of characters for a line, e.g. <PRE WIDTH=40>. WIDTH also signals your browser to choose an appropriate font and indentation for the text.

Hyperlinks (See Linking below) can be used within <PRE> sections. You should avoid using other HTML tags within <PRE> sections, however.


BLOCKQUOTE

Use the <BLOCKQUOTE> tag to display lengthy quotations in a separate block on the screen. Most browsers generally change the margins for the quotation to separate it from surrounding text.

For example:

    <BLOCKQUOTE>
    <P>Omit needless words.</P>
    <P>Vigorous writing is concise. A sentence should contain no
    unnecessary words, a paragraph no unnecessary sentences, for the
    same reason that a drawing should have no unnecessary lines and a
    machine no unnecessary parts.</P>
    --William Strunk, Jr., 1918
    </BLOCKQUOTE>
is displayed as:

Omit needless words.

Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.

--William Strunk, Jr., 1918


ADDRESS

The <ADDRESS> tag is generally used to specify the email address of the author of a document. It is usually near the end of a document.

For example:

   <ADDRESS>Send comments to ACS WebMaster@ilstu.edu</ADDRESS>
is displayed as:

      Send comments to ACS WebMaster@ilstu.edu

NOTE: <ADDRESS> is not used for postal addresses. See BR above to see how to format postal addresses.

Continue =>


Last updated on