How to use Header tags correctly Tutorial

Made by: Nick

Something I notice more and more on websites are that header tags are being used in the wrong way or in some worse cases not at all. I thought that it would benefit people if I explained a little about why headers should be used correctly and how to use them correctly.

Why even use them?

I guess i'm an enforcer of using good semanticly correct code and it will annoy me much more than the average user if header tags are used inappropriately, but this isn't to say that you shouldn't listen, there are benefits after all:

  1. They help with your on-site Search Engine Optimization (SEO). Okay so it might only be a little help, but any help no matter how little adds up, it could mean the difference between being on the first position and the 2nd position for your keywords after all.
  2. It helps screen readers make sense of your page. Screen readers are most commonly used by the visually impaired to tell them what is on the screen, I know a lot of people won't think about them whilst designing a website, but it's always good to cater to as wide a market as you can make it.

How to use them correctly

I always like to think of headers as a hierarchy, a bit like a tree and it's branches. By this I mean that the first header tag should be a <h1> tag and that there should only be one of these on the page (i.e. the tree trunk). Then smaller branches come off of that as your main titles on your page -- the <h2> tags. Then inside the content under that <h2> tag you might want another header to mark out a sub-section (or sub-topic) of the main header, in which case use a <h3> tag, and so on until <h6>.

Header tags are not suposed to be used for layout purposes (i.e. to create a new line after the block of text) or to style a section of text (i.e. make it bold and the text size larger), this is one mistake I see all too often -- even on bigger sites that should know better.

So lets recap the main points:

  1. There should only be one <h1> header on each page.
  2. There should be <h2> headers for any other main headers on the page.
  3. <h3> headers should be used only if they are "under" a <h2> header.
  4. <h4> headers should only be used if they are "under" a <h3> header.
  5. <h5> headers should only be used if they are "under" a <h4> header.
  6. <h6> headers should only be used if they are "under" a <h5> header.

Feed the Dragon MySpace Tutorials