Divvying up a document: Structure tags

HTML includes many tags to organize your document. There are outline tags, which break your document in to sections, list tags for numbered lists, unnumbered lists and even lists of definitions. Using structure tags makes it easier for users to understand your documents because you can show users your vision of the structure.

Heading

Syntax:

 <H#>...</H#> 

Outline structure of a document; includes six levels (level 1 is most significant, and level 6 is least). You specify the heading level by replacing # with a number from 1 to 6.

Level one headings are used for major divisions

Level two headings to break up larger topics

Level three headings can refine your outline even more

Ordinary text is the workhorse of HTML

Level four headings are often displayed less prominently than normal text

Level five -- we're talking small!
Level six is as small as it gets

Paragraph

Syntax:

 <P>...</P>

You need to use the paragraph tag to format text because line breaks are ignored in HTML. For example, if you're using an editor or word processors, and you write:

The quick brown fox jumped over the 
lazy dog.

You'll see the line break after the in your editor, but it won't show up in a browser window. (The line break appears in the example above because I've used the <PRE> tag, which tells the browser, "Don't mess with this text --- it looks just the way I want already.") Whenever you want to start a new paragraph, you should use the <P> tag.

Tip
The <P> tag is great for centering objects (not just plain text), using its ALIGN attribute. For example, the <IMG> tag doesn't include an attribute to center the image between the right and left margins, but if you wrapped the <IMG> tag in a <P> tag, and set the <P> tag's ALIGN attribute to CENTER, you can center the object. You can see an example of this in the explanation of nested frames.

Unnumbered list

Syntax:

:
<UL> 
    <LI>item
    :
    <LI>item
</UL> 

Each item marked by its own <LI> tag is marked separately, usually by a bullet. The example below is a level three heading, followed by an unnumbered list.

Favorite fruits

Numbered list

Syntax:

<OL>
    <LI>item
        :
    <LI>item
</OL>

Each item marked by its own <LI> tag is numbered consecutively when displayed.The example below is a level two heading, followed by a numbered list.

How to put on a pair of pants

  1. Place your left foot in the left pant leg, and pull through.
  2. Place your right foot in the right leg, and pull through.
  3. Fasten pants securely around your waist.
  4. If necessary to secure pants, strap on a belt.

Remember: Put on your pants one leg at a time, unless you don't want to be "just like the rest of us".

Definition list

Syntax:

<DL>    
    <DT>term
    <DD>definition
    :
    <DT>term
    <DD>definition
</DL> 

You can let terms and their definitions with definition lists (also called dictionary lists); each definition is a <DT>, <DD> pair. Here's a (very) short definition list:

HTML
HyperText Markup Language, the language of the Web.

Return to chapter contents