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

FORM

Web forms let a reader return information to a Web server for some prescribed action. For example, suppose you collect names and email addresses so you can email information to people who request it. For each person who enters his or her name and address, you need to send some response back to them and to add the respondent's data to a data base. This processing of incoming data is done by a script or program executed on the web server.

The forms themselves are not hard to code. They follow the same constructs as other HTML tags. What is difficult is creating the program or script that takes the information submitted in a form and processes it. Because of the need for specialized scripts to handle the incoming form information, forms are not discussed in this primer.

Comments in HTML Documents

Comment lines are indicated by the special beginning tag <!-- and ending tag --> placed at the beginning and end of EVERY line to be treated as a comment. Comments cannot be nested, and the double-dash sequence "--" may not appear inside a comment. You must also make sure that there are no spaces in the start-of-comment string.

For example, the line 

   <!--   This is a comment -->
is a valid comment line, but the lines 
   <!--    This is -- not -- a comment -->
   < !--   This is not a comment -->
are not.

Do not try to use comments to "comment out" HTML tags, since some browsers (notably Mosaic) will still pay attention to angle brackets inside a comment and terminate the comment prematurely.

FONT

Netscape introduced the FONT element to permit control of the size of the displayed font. Font sizes are defined in a range from 1 to 7 (the default base value is 3). You can then specify a change in font size using elements such as 

        This is <FONT SIZE="+2">resized up 2</FONT>.<BR>
        This is <FONT SIZE="-2">resized down 2</FONT>.<BR>
        This is <FONT SIZE="7">resized to 7</FONT>.

which is displayed as:

This is resized up 2.
This is resized down 2.
This is resized to 7.

Thus you can specify the font size relative to the current size (using + or -) or as an absolute size from 1 to 7.

Microsoft Attribute Enhancement

The Microsoft browser introduced a FONT attribute, FACE, for specifying the typeface. For example FACE="arial" would specify the arial font. The face names are taken from the Windows font manager, so you need to know the font names and have the fonts installed for this to work. Clearly this will only work on PCs, and will not work on Macs or Unix computers.

Here is an example: 

        This is <FONT FACE="arial">sample</FONT>.<BR>
        This is <FONT FACE="times">sample</FONT>.<BR>
        This is <FONT FACE="zapf">sample</FONT>.

which is displayed as:

This is sample.
This is sample.
This is sample.

BASEFONT Element

In introducing the FONT element, it becomes desirable to be able to set the base-level font size for an entire document (default size is 3). This is done via the BASEFONT tag. For example <BASEFONT SIZE="4:> sets the base font for the document to 4. Relative fonts, specified by FONT, are then determined relative to this base size.

BASEFONT Caveats

1. You should always put BASEFONT at the beginning of your body, as otherwise odd things will happen.

2. Note also that if you specify <BASEFONT SIZE="7">, then <FONT SIZE="+2"> will not work, as 7 is the largest possible font size.

Escape Sequences: Special Characters (a.k.a. Character Entities)

Character Entities are composed of a short sequence of characters that are translated by the browser and displayed as a single character. Character Entities (also called "escape sequences") begin with an ampersand and end with a semi-colon. The use of character entities allow you to do two things:
  • display certain characters that normally have special meaning in HTML and therefore are not normally displayed
  • display characters not available in the plain ASCII character set (primarily characters with diacritical marks)
Three ASCII characters--the left angle bracket (<), the right angle bracket (>), and the ampersand (&)--have special meanings in HTML and therefore cannot be used "as is" in text. (The angle brackets are used to indicate the beginning and end of HTML tags, and the ampersand is used to indicate the beginning of an escape sequence.)

To have one of these three characters displayed in an HTML document, you must enter its escape sequence instead of the character itself: 

&lt;    the escape sequence for <
&gt;    the escape sequence for >
&amp;   the escape sequence for &

The double quote mark is a special case. It may be used directly in text but it also has an escape sequence (&quot;). You are free to use either (using the double quote mark directly is, of course, easiest).

Additional escape sequences support accented characters, such as: 

&ouml;    the escape sequence for a lowercase o with an umlaut: ö
&ntilde;  the escape sequence for a lowercase n with an tilde: ñ
&Egrave;  the escape sequence for an uppercase E with a grave accent: È
You can substitute other letters for the o, n, and E shown above. Check this online reference for a longer list of special characters.

NOTE: Unlike the rest of HTML, the escape sequences are case sensitive. You cannot, for instance, use &LT; instead of &lt;.

Troubleshooting

Avoid Overlapping Tags

Consider this example of HTML: 

    <B>This is an example of <I>overlapping</B> HTML tags.</I>

In this example the bold sequence begins before the italics sequence and ends within the italics sequence. A browser might be confused by this coding and might not display it the way you intend. The only way to know is to check each popular browser (which is time-consuming and impractical).

In general, avoid overlapping tags. Look at your tags and pair them up. Tags (with the obvious exceptions of elements whose end tags may be omitted, such as paragraphs) should be paired without an intervening, unmatched tag in between. Look again at the example above. You cannot pair the bold tags without another tag in the middle (the first italics tag). Try matching your coding up like this to see if you have any problem areas that should be fixed before your release your files to a server.

Nesting Tags

HTML protocol allows you to nest HTML tags in some cases. For example, you can embed links within other HTML tags such as headings. 

    <H2><A HREF="Destination.html">My heading</A></H2>

Do not embed HTML tags within an anchor, such as: 

    <A HREF="Destination.html"><H2>My heading</H2></A>

Although most browsers currently handle this second example, the official HTML specifications do not support this construct and your file may not work with future browsers. Remember that browsers can be forgiving when displaying improperly coded files. But that forgiveness may not last to the next version of the software! When in doubt, code your files according to the HTML specifications.

Character tags can modify the appearance of the text within other elements: 

    <UL>
    <LI><B>A bold list item</B>
    <LI><I>An italic list item</I>
    </UL>

However, avoid nesting other types of HTML element tags. For example, you might be tempted to embed a heading within a list in order to make the font size larger. 

    <UL>
    <LI><H2>A large heading</H2>
    <LI><H3>Something slightly smaller</H3>
    </UL>

Although some browsers handle this quite nicely, formatting of such coding is unpredictable (because it is not part of the standard). For compatibility with all browsers, avoid these kinds of constructs.

What's the difference between embedding a <B> within a <LI> tag as opposed to embedding a <H1> within a <LI>? Within HTML the semantic meaning of <H1> is that it's the main heading of a document and that it should be followed by the content of the document. Therefore it doesn't make sense to find a <H1> within a list.

Character formatting tags also are generally not additive. For example, you might expect that: 

    <B><I>some text</I></B>

would produce bold-italic text. On some browsers it does; other browsers interpret only the innermost tag.

From here, I suggest you go back to the HTML Tutorial Table of Contents. You can do this by clicking on Tutor TOC Page.  

Last updated on