From Jennifer Kyrnin,
Your Guide to Web Design / HTML.
FREE Newsletter. Sign Up Now!

There are a lot of good reasons to use heading tags to define your HTML documents and provide structure. But many Web designers have gotten in the habit of not using heading tags, or using only one or two in a document, and using images, font tags, and styled text instead. But using heading tags can help you with SEO, with accessibility, and with the general structure of your page. In HTML 4.01 and XHTML 1.0, the heading tags are intended to convey a logical hierarchy on your pages - with H1 at the top of the sequence through H6 at the bottom. You can then use CSS to style the headings however you'd like them to look.

Use Headings to Outline Your Content

This is the specific purpose that HTML heading tags are for - to structure your documents. You should always start with an H1 element and move through the other levels one at a time. For example:

• H1
  • H2
  • H2
    • H3
      • H4
      • H4
    • H3
  • H2

If you skip a level may create an impression that your page is not well organized. And since you can style any headline to look however you want it to look, it is no longer a good idea to skip H1 or other headings simply because you don't like how they look.

Use Headings to Improve Your SEO

Search engine spiders read HTML, and they understand the relevance of heading tags. If you use heading tags appropriately across your pages, search engines will give more weight to text that is inside a heading tag. And the higher the heading tag the more weight that text gets. So, an H1 heading will have more weight in the search results than H6 text.

Use Headings to Improve Accessibility

Headings indicate the start of important text within a document. And many screen readers and other assistive devices can jump around on the pages using headings as anchors. This can make pages much easier to read because they can access the relevant content without having to read through everything on the page.

Always Use an H1 Heading Tag

In most cases, a Web page will have one primary topic. This topic will be represented in the HTML title and so you should use the H1 tag to identify the page in a similar way as the title. The H1 heading should be the top-level heading on your page, and there should only be one on every page. Search engines place a lot of value on the text inside H1 tags, so make sure that it's optimized and well-represents the page contents.

There are no rules about how many H1, H2, etc. tags you can have on a page. While it's standard to have only one H1 top-level header, if your page has a lot of different sections, it might make sense to divide it with several H1 tags. However, for search engine optimization, it's better to create separate pages for content that you want to call out with separate H1 headings.

Don't Use Headings to Style Text

It can be very tempting to use different heading tags to define the size and boldness of the text, but that's a bad habit to get into. It's better to use the heading tags for structure, and use CSS to define how they look. That way, if you redesign your pages later, you simply change the styles on the various headlines, rather than having to go into the HTML to change the tags themselves. If you use external style sheets, you'll only have one document to edit rather than every page on your site.