Headings? Meh…who cares?

People who know HTML know that they have six levels of headings to help effectively communicate the content on the pages they build. Even if you don’t know HTML, however, you should know the point of properly-formatted headings and be able to create them yourself.

The explosive growth in the number of do-it-yourself web site alternatives means the Internet is rife with sites built by people who get headings wrong. But those same DIY publishing tools make it a piece of cake to get it right. I’ll show you how in a moment.

What’s the point?

The tags web developers use to mark text as headings – h1, h2, h3 and so on – indicate the level of importance that the heading should be accorded. Some of this importance might come in the form of special styles that have been created to make the heading stand out from the other text on the page. Even if the developer hasn’t specified a color or font for the heading, at minimum a web browser would show a more important heading – e.g., h1 – in a larger font, and lesser headings at progressively less attention-grabbing sizes. By default, all heading styles are bold, so even if no extra styles are added in they’ll stand out from surrounding text and the relative importance will be indicated by the heading size.

Don’t do it the wrong way!

With WordPress and other WYSIWYG editors, it’s easy to select a line of text, click a button to make it bold, and call it a subhead. But if your site has been professionally developed, its pages likely have headings and subheads and possibly sidebar headings, all carefully balanced with size, color, font and spacing styles. Not only does bold text not do any of that – it all looks the same, regardless of whether its meant to serve as a page head, section head, subhead or other type of heading. Simply bolding the text also diminishes the emphasis you want any inline bold text to have, because it appears the same in too many places on the page. Use headings properly and they’ll help keep your site looking as professional as the day your web designer handed you the keys to it.

Still need convincing?

Search engines use headings to help them determine what’s important on a page and rank its relevance to a given search accordingly. Using proper headings and writing them to include key words and phrases about the page content will help you rank higher in search engine results (that is, until the black hat SEO crowd ruins it for everybody…but anyway…). If I haven’t convinced you that not doing it my way will make your site look terribly unprofessional, perhaps boosting your image with Google will encourage you to do it right : )

Fine. Then tell me the right way already.

OK : )

  • Use only one h1 heading per page and make sure it contains the most relevant words that describe the content on the page. Typically, h1 is used for the page title and not subheads. If you’re using WordPress the page title is probably already set up as an h1.
  • Use h2 for the next most important headings, e.g., for sections, if your content is longer or paragraphs if it’s not so long. Use additional heading levels for subsections or other content if you need them, but make conscious choices about the relative importance of a heading.
  • Use like headings for like importance, e.g., all sidebar subheads might be h3.
  • Most web pages don’t need more than h1, h2 and h3; if you have lengthy, detailed content you should use more heading levels. If you can get a good outline of your page by reading only the headings, you’re doing it right.
  • If you’re not using a WYSIWYG editor like WordPress provides, you can add the headings in yourself pretty easily. Use the tag in brackets before the text that should serve as the heading, then add a closing tag to “turn off” the heading at the end of the text. Like this:<h4>This is a heading of relatively minor importance.</h4>

If you *are* using the WordPress editor, here’s how to use heading styles the right way, without ever touching HTML:

*Note that there’s no sound for this video – it’s such a simple demo you don’t need to hear my yacking ; )