Headings

Headings are used to add titles to sections of a page. HTML defines six levels of headings. Heading tags look like the following:

<h1>Installing Your Safetee Lock</h1>

The numbers indicate heading levels (H1 through H6). The headings, when they're displayed, aren't numbered. They're displayed in larger or bolder text, are centered or underlined, or are capitalizedso that they stand out from regular text.

Think of the headings as items in an outline. If the text you're writing is structured, use the headings to express that structure, as shown in the following code:

<h1>Movies</h1>   <h2>Action/Adventure</h2>      <h3>Caper</h3>      <h3>Sports</h3>      <h3>Thriller</h3>      <h3>War</h3>   <h2>Comedy</h2>      <h3>Romantic Comedy</h3>      <h3>Slapstick</h3>   <h2>Drama</h2>      <h3>Buddy Movies</h3>      <h3>Mystery</h3>      <h3>Romance</h3>   <h2>Horror</h2>

Notice that I've indented the headings in this example to better show the hierarchy. They don't have to be indented in your page; in fact, the browser ignores the indenting.

Tip

Even though the browser ignores any indenting you include in your code, you will probably find it useful to indent your code so that it's easier to read. You'll find that any lengthy examples in this book are indented for that reason, and you'll probably want to carry that convention over to your own HTML code.

Unlike titles, headings can be any length, spanning many lines of text. Because headings are emphasized, however, having many lines of emphasized text might be tiring to read.

A common practice is to use a first-level heading at the top of your page to either duplicate the title (which usually is displayed elsewhere), or to provide a shorter or less context-specific form of the title. If you have a page that shows several examples of folding bed sheetsfor example, part of a long presentation on how to fold bed sheetsthe title might look something like the following:

<title>How to Fold Sheets: Some Examples</title>

The topmost heading, however, might just be as follows:

<h1>Examples</h1>

Caution

Don't use headings to display text in boldface type or to make certain parts of your page stand out more. Although the result might look cool in your browser, you don't know what it'll look like when other people use their browsers to read your page. Other browsers might number headings or format them in a manner that you don't expect.

Tools to create searchable indexes of web pages might extract your headings to indicate the important parts of a page. By using headings for something other than an actual heading, you might be foiling those search programs and creating strange results.

Figure 4.2 shows the following headings as they appear in a browser.

Input

<h1>Mythology Through the Ages</h1>   <h2>Common Mythological Themes</h2>   <h2>Earliest Known Myths</h2>   <h2>Origins of Mythology</h2>    <h3>Mesopotamian Mythology</h3>    <h3>Egyptian Mythology</h3>    <h4>The Story of Isis and Osiris</h4>    <h4>Horus and Set: The Battle of Good vs. Evil</h4>    <h4>The Twelve Hours of the Underworld</h4>    <h4>The River Styx</h4>      <h2>History in Myth</h2><

Output

Figure 4.2. HTML heading elements.