This chapter is from the book
This chapter is from the book
This chapter is from the book
Headings
Headings 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 display, aren't numbered. They display in larger or bolder text, centered or underlined, or capitalized—so that they stand out from regular text.
Think of the headings as items in an outline. If the text you write 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 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.
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 sheets—for example, part of a long presentation on how to fold bed sheets—the 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>
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.