How to structure H1-H6 heading tags properly

Mar 12, 2018
H1-H6 heading tags

The heroes of our story today are meant to bring order to chaos.

They make your web pages much more informative and attract search engines like magnets. They also help visually impaired users understand your content via screen readers. In this way, they greatly expand your audience and help you gain a solid reputation as a follower of web accessibility standards. These heroes are H1-H6 heading tags — the heart and soul of HTML markup. Let’s discover how to structure H1-H6 heading tags properly.

Tips to structure H1-H6 heading tags on your website

H1-H6 heading tags structure

Heading tags from <H1> to <H6> serve to “pack” your web page content into a clear hierarchical structure. The most important of them is <H1>, that is, the title of the page. <H2> is still important, <H3> is less important and so on, in descending order. The <H2> elements can be subheadings to <H1>, elements <H3> can be sub-headings to <H2>, and so on.

No level skipping

There should be no jumping from a higher to a lower level, skipping the logical order — for example, using the <H5> tag right after the <H2>. If you follow this recommendation, the structure of the page will be clearer for screen readers, which significantly facilitates navigation between the elements. And, of course, this is the golden rule of SEO.

H1-H6 headings are not “eye candy”

Though H1-H6 headings visually stand out as a bigger and bolder text, web editors should remember to never use them for purely attention-catching purposes and use them to wrap anything they like. H1-H6 heading tags are not meant for design — they are meant for outlining the logical structure of content, so nothing should prevent them from carrying their mission. Size, boldness, color and much more can be added through styles.

Only true H1-H6 heading tags work

Screen readers and other assistive technologies rely on actual headings to understand the page structure. So, formatting that just makes text LOOK like headings (font size, boldness, etc.) can never replace true headings in this task.

Hiding the headings in the proper way

Sometimes, it is obvious to sighted users what the section is about, and you want to hide a heading from display. However, the heading can still carry all its function and remain visible to screen readers and search engines. This can be achieved through CSS: class="element-invisible" as opposed to using display:none, which would hide the headings totally. However, hiding items is not very appealing to search engines, so there are certain risks in this process.

Comprehensive heading names

Headings should be labelled something more descriptive and useful than, for example, “Read more.” However, excessive repetitiveness of words from subheading to subheading should also be avoided.

Final thoughts

H1-H6 heading tags and subheadings are capable of more than meets the eye. Often, they literally show people what their eyes can’t see.

If your want your website’s headings tags to be checked and properly optimized, or you want to create a new heading structure from scratch, just contact our Drupal experts.

 Get new blog posts by email