Good Heading Practice
I had a question posed to me the other day on the Webmaster Talk forums, it is as follows:
“How do I decide what heading tags to use?”
This is such a good question and one which is rarely answered in tutorials designed to teach beginners html. I answered the question in brief here but I thought I would go into a bit of detail in todays post.
h1 - This should be used for describing the main page title, this does not mean use it solely for your website name. It means using it to describe the contents of the page be it a blog post, a product or even contact details.
h2 - This should be used to describe main subheadings, for example a new article could be split into 3 sections, h2 should be used to describe these subsections, similarly a product page might be split into description, technical specification and availability information, each of of these a sub section.This is useful because it allows the reader to scan the page for information far faster. And as we go deeper into the header hierarchy we will see that scanability very important.
h3 - Getting quite deep in now and onto h3. This is used in longer articles or pages where by the subsections can be split again. This increases scanibility of medium sized news articles or blog posts. h3 can also be used to split up product descriptions and specifications where the body text is quite detailed and lengthy. It is far easier to gather information about power details of a product if they are marked out and not hidden in a large chunk of body text.
h4, h5 and h6 - You will rarely use these unless you are developing massive specifications or lengthy articles. They should be used to break subsections down even further, to increase scanibility of content.
Special Note regarding use of h4 - it is common practice at the moment to use h4 as a heading for sidebars and menus that are unrelated to the body text. While this isn’t perfect at the moment it is the best method we can use in order semantically say, “this is another section but it isn’t as important as the main body”. When newer markup specifications are adopted this use will fade as better semantic alternatives are presented.
There we go, hope that helped. Onward with the war on ignorant web developers