Why and how to structure web headings properly


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 headings — the heart and soul of HTML markup. Let’s discover how to structure them properly.

Tips to structure headings on your website

H1 to H6: hierarchical structure

Heading elements 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.

Headings are not “eye candy”

Though 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. Headings 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 headings 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

Headings 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 to be checked and properly optimized, or you want to create a new heading structure from scratch, just contact our Drupal experts.

Recent Posts

How to make your website stand out from the competitors?

If you want to be a leader in your market niche, you should make it a goal not only to keep pace with your competitors, but stand out from them.

Drupal and law firm websites: the lucky union

There are unwritten but unbreakable laws for succeeding in any industry. One of them is to have an attractive, powerful, and secure website that represents your company. OK, the law is the law! Who understands this better than law firms?

About us and this blog

Request a free quote
Our friendly Help Team can be reached Monday through Friday, from 9am to 6pm, Eastern European Time Zone.

Contact now

Get new blog posts by email: