Semantic uses of <h1>, <h2> ... <h6> HTML tags

What is it for?

<h1> … <h6> tags are intended to mark up various levels of headings and subheadings.

<h1> carries the biggest importance, with each heading below carrying lesser importance.

Appropriate uses

Use only one <h1> per page

<h1> tag is intended to denote the highest level heading on a given web page.

It explains what the web page is about, and since a good web page ought to have one purpose, <h1> tag should therefore be used only once on each web page to avoid confusion.

This guideline is not in the HTML specification, but has been adopted by all good web developers I have met and worked with so far.

It is also a guideline accepted by SEO experts since Google and other search engines treat the <h1> tag with high level of importance.

Use <h1> tag on any given page only once and make sure it uniquely entitles what the page is about.

Use <h2> as component level headings

Take a look at an example of how to use <h2> tags as component level headings.

<div id="news">
   <h2>Latest News</h2>
   <ul>
      <li><a href="www.example.com">News item 1</a></li>
      <li><a href="www.example.com">News item 2</a></li>
   </ul>
</div>

If you needed subheadings within the scope of this component you would follow up with <h3> subheadings. For example:

<div id="news">
   <h2>Latest News</h2>
   <h3>Business</h3>
   <ul>
      <li><a href="www.example.com">News item 1</a></li>
      <li><a href="www.example.com">News item 2</a></li>
   </ul>
   <h3>Science</h3>
   <ul>
      <li><a href="www.example.com">News item 1</a></li>
      <li><a href="www.example.com">News item 2</a></li>
   </ul>
   <h3>Education</h3>
   <ul>
      <li><a href="www.example.com">News item 1</a></li>
      <li><a href="www.example.com">News item 2</a></li>
   </ul>
</div>

Inappropriate uses

Heading levels are seemingly simple tags to utilise within web pages, but even they have been somewhat abused by developers and tools which generate them.

Thinking about them in context of many different systems also makes the issue somewhat more complex and some lateral thinking is required to code them up most appropriately.

<h1> around the logo or company name

<h1> should not be used around the logo or the company name.

The simplest way to explain the reasons behind this is to take an example of BBC web site, which, if it had <h1> wrapped around it’s logo would have couple of million pages with ‘BBC’ as the main title on each page.

It is obvious from this example that it is not semantic to wrap an <h1> around the logo or company name on any web site, small or big.

Doing so decreases semantics of such web pages and is therefore bad practice.

It is also arguable that if there is no ‘cadidate content’ for an <h1> on a given page, then the Information Architecture of the given page is wrong and needs to be re-thought.

Essentially, good design should include a clean title and purpose for existence of each page and a developer should wrap that main title into <h1> level heading.

The only place where <h1> makes sense to be used around a logo is on the very homepage, just like it is the case with BBC web site.

The homepage represents an overview of what the organisation offers, hence on the homepage the main of ‘British Broadcasting Corporation’ makes sense for the BBC web site.

<h1> as heading for components

Once again, there should be only one <h1> heading on each web page.

Some developers (usually the ones from design backgrounds) have misinterpreted the purpose of <h1> and have decided to go along with the development practice of using an <h1> heading within each component.

This usually results in several <h1> tags being used across any given page, with <h2> tags and lower level tags getting either very little or no prominence.

<h2> tags are much more appropriate for component level headings and should be used for that purpose.

If a component is taken out of context from one page and placed into another page, the <h2> heading of that component will not confuse with the semantics of <h1> tag on the new page.

Repeating <h1> many times on one page

This should never be used as it dilutes the overall meaning (semantics) of the page and confuses screen reader users.

Misusing headings for visual display purposes

This misuse of heading tags is usually observed with amateur developers who do not understand semantics.

Under no circumstances should you use a given HTML tag just because it renders in a certain way in the browser.

You should always use CSS for look and feel and disregard the default rendering within the browser to achieve desired design effects.

Only pay attention to what the meaning (i.e. semantics) of the tags actually are.

Muddy areas

Should <h1> contain the same content as <title> tag?

Most SEO experts think so and it seems to make sense, but also throws up a question about purpose of having both <title> and <h1> tags if they are going to contain exactly the same content?

This is the reason why proposed <h> tag in XHTML2.0 makes much sense, as it makes the ‘level’ of a given heading less contextually sensitive.

It also allows page level as well as component level headings to be more ubiquitous and reusable from system to system, without developers having to change the code around to make every interface as semantic as possible when reusing the code.

What’s the purpose of low level headings?

It is also the case that tags <h4>, <h5> and <h6> are an overkill for most every day web sites, but can be too limiting for chunky, long, detailed PhD type dissertations which may require many more heading levels.

This is where it could be argued that HTML specification falls short, making the XHTML2.0 <h> proposal very viable in this respect.

Once again, using <h> would solve this problem enabling any number of nested headings, but I wonder how we would be able to style these in a meaningful manner using current CSS implementation and specification.

Written by Jason Grant, BSc, MSc on 24th April 2009

You can leave a response, or trackback from your own site.