Heading Your Content

Summer 2010

Web Design Principles
Headings

soccer heading

Looking for the lessons? Get started!

A brief explanation of how to "nest" tags properly.

The entire Web Design Principles section can be accessed through the menu below.

Unfortunately, not everyone's browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won't display the menu, just click on the button and you'll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.

The lower the heading level, the lesser its importance and the smaller the font size... — Ian Lloyd

H1 means "this is the most important heading," NOT "this text is large and bold."— Craig Cook

html icon

There are six headings in use, from the largest, <h1>, to the smallest, <h6>. Most people don't use <h5> or <h6>. You should always use them in top-to-bottom order: <h1> for your page's main title, then <h2> for your subheadings, <h3> for even smaller headings, and so forth. You can control their appearance in your stylesheet. This is called "heading hierarchy."

With headings, an important and commonsense practice is to ensure that they do not jump out of sequence. In other words, you should start from level one, and work your way down through the levels in numerical order. You can jump back up from a lower-level heading to a higher one, provided that the content under the higher-level heading to which you’ve jumped does not refer to concepts that are addressed under the lower-level heading. — Ian Lloyd

I'm stealing a concept from Lloyd to illustrate the idea of heading hierarchy. He has his readers visualize a list using headings in their proper order. It's such a good idea, I'm redoing it for you.

<h1>First Major Heading</h1>
   <h2>First Subheading</h2>
   <h2>Second Subheading</h2>
      <h3>A Sub-subheading</h3>
<h1>Another Major Heading</h1>
   <h2>Another Subheading</h2>

It is best practice for Web designers to only have ONE <h1> element in each of their pages, and that should be your main title. While there are times where a designer will override this by adding a second or even a third <h1>, those times are few and far between.

It's also worth noting that "heading hierarchy" is good for search engine placement and accessibility.

In their default settings, browsers determine the size of your headings based on the antiquated point sizes. Here's the rundown:

  • <h1> is sized at 24pt
  • <h2> is sized at 18pt
  • <h3> is sized at 14pt
  • <h4> is sized at 12pt
  • <h5> is sized at 10pt
  • <h6> is sized at 8pt

Also, headings also have spacing (padding) added above and below them, are displayed in bold, and are usually centered.

It would be nice if I could tell you that a 24pt heading is the equivalent, in size, of a 20px heading, but I can't. Points are print measurement units and don't translate well into Web-based measurements. So let's do some math (okay, I'll do the math and post the results) and see how they work based on the modern em unit of measurement.

Let's make the assumption that <h4>'s 12pt size is about the same as the average line of text (yes, it's a big assumption, but we have to start somewhere). That gives us a baseline. <h4> will now be considered, for our purposes, 1em in size.

  • <h1> is sized at 2em
  • <h2> is sized at 1.5em
  • <h3> is sized at 1.2em
  • <h4> is sized at 1em
  • <h5> is sized at .8em
  • <h6> is sized at .7em

Hmmm, not bad. Reed Design gives us a fuller comparison chart, including pixels and percentages, too. And Siba Graphics provides a nice visual comparison between text rendered in points and pixels.

You can modify headings with the following attributes:

  • ID
  • class
  • style (for inline styling)
  • title

Previous Page

Next Page