Mind your headings

Headings help you define the structure and the hierarchy of a document properly. There are six levels of headings in HTML which consists H1, H2, H3, H4, H5 and H6. Even so, the most widely used headings are H1, H2 and H3. Please keep in mind that H1 is the largest heading where H6 is the smallest. Don’t use headings because it’s bold and has larger font size because it will defeat its own purpose.

In a document that uses headings, always start with H1. Usually in blogs, H1 refers to blog title but not entry title. This is common for a normal blog design which many don’t agree.

Furthermore, H1 should only exist once in a document. But many website now days ignores the correct outline and levels arrangement. I noticed that skipping heading levels are quite popular even among well known designers. This mistake sometimes considered inevitable if you’re using CMS like WordPress.

An example of a correct use of headings:

<h1>This is H1</h1>
 <p>Some texts...</p>
<h2>This is H2</h2>
 <p>Some texts...</p>
<h3>This is H2</h3>
 <p>Some texts...</p>

Skipping headings level are considered as bad practice. For example below, the H2 is missing:

<h1>This is H1</h1>
 <p>Some texts...</p>
<h3>This is H3</h3>
 <p>Some texts...</p>
<h4>This is H4</h4>
 <p>Some texts...</p>

You can check whether your current website or blog headings are outlined correctly by using Web Developer Toolbar — an extension for Mozilla Firefox. From the Web Developer toolbar, go to Information → View Document Outline.

2 Comments

Azim

Aslm,

What if its..

<h1>This is H1<h1>
<p>Some texts…</p>
<h2>This is H2</h2>
<p>Some texts…</p>
<h2>This is H2</h2>
<p>Some texts…</p>
<h2>This is H2</h2>
<p>Some texts…</p>

What say you?

Zeo

Yes, you can use like that as long as it follows the correct levels. In your example, you can also use H3 after H2 then followed by H2.

Just keep it mind that H1 only can be define once in a document / page.

Leave a Comment

(required)
(will not be published) (required)