Let’s All Use Headings Again

By Deane Barker • November 22, 2002 •

HTML provides formatting tags for headings, so why don’t we use them? H1, H2, H3…you wouldn’t believe how often designers re-invent the wheel by enclosing headings in DIV tags with stylesheets classes attached. I used to do it, then I learned a few things: Search engines will weight terms in Hx tags…

The document argues for the use of heading tags in HTML instead of re-creating them, as they provide benefits such as more accurate content representation, easier conversion from word processing formats to HTML, and automatic recognition by text-to-speech converters. It also suggests that heading tags should be used to outline the document, and that they can be styled like any other element.

Generated by Azure AI on June 24, 2024

HTML provides formatting tags for headings, so why don’t we use them? H1, H2, H3…you wouldn’t believe how often designers re-invent the wheel by enclosing headings in DIV tags with stylesheets classes attached. I used to do it, then I learned a few things:

Search engines will weight terms in Hx tags more heavily then terms in the body of the page, assuming that text in these tags more accurately represents the content of the page.
When converting from a word processing format (Word, OpenOffice, etc.) to HTML, the standard styles “Heading 1,” “Heading 2,” etc. are transformed in H1, H2, and so on with no other formatting necessary.
Text-to-speech converters will announce the heading level surrounding the text. Upon encountering an H3 tag, a text-to-speech engine will announce (“heading level three…”).
Heading tags should represent an outline of the document. If the document is of any significant size, plan your headings in advance and place them, then fill the text in. If you can’t do this, then re-examine what you’re writing.
You can style Hx tags just like anything else, so no complaints that you don’t like the spacing, etc. If you’re not happy with how they look by default (I’m not), restyle them.
Most all WYSIWYG editors have handy little buttons for Hx tags. Try finding a button for your classed DIV (although I once made such a button in FrontPage VBA, which tells you the lengths I went to do things the hard way…).

There’s no point in re-creating something that HTML already provides. Let’s all start using the heading tags again.