Home > Articles > Web Development > HTML/CSS

  • Print
  • + Share This
This chapter is from the book

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 and bolder text so 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.

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 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>

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

Input input.jpg

<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 input.jpg

FIGURE 4.2

FIGURE 4.2 HTML heading elements.

  • + Share This
  • 🔖 Save To Your Account