Part 1: The importance of headings and nice code

Part 2:  good practice vs bad practice

Headings are titles. They structure a newspaper article, a book or a webpage. Because of their different layout from the rest of the text (bolder, bigger, other font and/or colour), they clarify the subject of the page as well as how it was built. Another important feature of the right use of headings on a webpage is that they point out the right direction to search spiders. You could say they function as a GPS for indexing web crawling machines. Thus, making content available for persons using a search engine such as Google or Bing.

What are headings in a website context?

Web pages are being built with code. The basic building blocks are HTML tags. HTML elements tell search engine bots whether a certain text is a title, a quote, a paragraph or something else. HTML4 has been the standard since 1999. In web design terms that equals centuries. Currently, HTML5 is rising as a technology and its use is being more implemented today than yesterday. It will soon become the new standard and will have implications for web developers. Also, when it comes to practical use of headings the recommendations are different.

e.g.:

As you can see, <h1> is used for the most important title, for the heading that provides the information on the subject of the page. Next to <h1> headings, there are subheadings such as <h2> – <h6>.

Why are headings important?

Visitors

When a surfer visits your page, he scans the page before he starts to read. In a short period of time he makes up his mind about staying on the page or trying to find a better answer elsewhere. And short does mean short: an average of 3 seconds is what you get to convince him to stay. Clear titles can make a serious difference here in guiding your visitor through your page.

Crawlers

In the previous chapter, I pointed out that headers serve as signposts for visitors. This is even more true for web crawlers. A title with an <h1> tag will be given a higher value than a paragraph or an <h2> title. Search engines don’t care about what your page looks like. They care about the content and index that content by reading the tags in the code (among other factors).

Now that’s a bad idea. Recommendations are specific: an <h1> title should tell what the page is about. Use a short, clear and accurate title for your page. Limit the subject of your page to one item. A search engine likes one <h1> per page. Neither more nor less.

But….

Oops, exit HTML4, welcome HTML5.

The recommendations for a page written in HTML5 somehow differ from those for a HTML4 page. More about this in the next paragraph.

What headings can I use for my web page?

HTML4:

<h1> – <h6>, one being the most important

• <h1>: page title – short description of what the page is about;
• <h2>: first sub heading;
• <h3>: second sub heading;
• Etc.… till <h6>.

HTML5

HTML5 divides pages into different sections. Each one of those sections can have its own <h1>. The structure of the sections will determine the importance of the title rather than the used tag. Well, both are important.
As a general rule I would advise: one <h1> per section.

Headings, structure and visually impaired people

For visually impaired people a good structure of a web text is even more important. They rely on techniques such as speech reproduction. Only a different layout is useless for them.