Hierarchical Structure of Content with Hx Heading Tags

What are heading tags then, why are they used and how to implement an optimum structure of heading tags on a website?

Using content headings at websites is quite a popular subject which brought numerous myths that persist even today. What are heading tags then, why are they used and how to implement an optimum structure of heading tags on a website?

What are headings?

Heading tags are used to present the structure of content to users (web browser crawlers as well). There are six heading sizes–from H1 to H6, although the first of them is of greatest relevance (it is the most important heading), whereasH5 and H6 are used seldom.

Since Hx heading tags contain text which is (should be) significantly bigger than the rest of the content, it is a visual clue for users allowing them to understand what paragraphs below them describe. Using headings of various sizes to represent the hierarchical structuremakes it easier for users to digest content.

In HTML syntax, we use tags in <> brackets:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

but on a website they will look, for instance, like this (obviously, depending on a style sheet):

struktura-naglowkow-Hx

Example uses can be found here: https://www.w3schools.com/html/html_headings.asp.

Use important content in Hx heading tags

When almost every day brings new blog posts, news, guides or expert articles, it is worth attracting the user not only with a nice picture or a catchy title, but also with structured content.

Looking through a specific article on a mobile device, readers often pay attention mainly to headings. Apart from purely esthetic aspects, a proper structure of headings makes it easier to interpret and digest content, thus there is a chance that a user will stay on a given website longer.

Not only users can benefit from a well-structured website – crawlers can also do it because heading text matters to them as well. That is why it is so important for heading tags to include keywords which will be related to content on the page in terms of subject. If we target a specific page with specific keywords, it is desirable to put them (even in a different form) in headings; they can naturally be placed in-text, but within a reason.

A structure should be clearly defined and headings should differ in size one from another. It would be a mistake to style them the same way as body text or to not distinguish them by importance.

Hx headings in articles

While writing blog posts, we can creatively use headings. You should define you article’s structure before starting it. Headings may be crossheadings dividing individual paragraphs (like in this very article), and the most important one of them <h1> can be used to describe the subject. It is frequently defined automatically in a website template, so if it is not the case, it is worth making a change discussed with a SEO expert and a web developer.

A well-designed structure of an article can make it look more appealing. Interesting content put in headings will clearly inform readers (and crawlers) what they should expect of a given article.

Which heading tags to put on the website homepage?

Homepages (or any other pages, e.g. service pages) should also have a hierarchical structure of headings. In <head>section, it is advisable to place H1, below H2, H3 and so on and so forth, though there is not a maximum number of heading tags. Even in the case of H1 you do not need to limit yourselves to a single heading (as explained further below).

However, you need to remember that such sections as “About us” or “Learn more” put in headings do not add much in terms of content. Also, using headings of lower importance, e.g. H5–H6, is pretty much pointless (except for the layout aspect of an article).

One-page websites = one H1 heading tag?

In the case of one-page websites, it is not as obvious as for blog articles. In HTML5 specifications (https://www.w3.org/TR/2014/REC-html5-20141028/sections.html), you can find the <section>tag responsible for defining individual sections in an HTML document. A section usually includes a heading, thus every section may have a different hierarchical structure, for example:

<section id=”about”>
 <h1>About me</h1>
 <p>Some text about me:)</p>
 <h2>My name is Dawid...</h2>
 <p>Second paragraph about me. lol :)</p>
</section>

<section id=”portfolio”>
 <h1>My portfolio</h1>
 <p>My latest projects...</p>
</section>

<section id="testimonials">
 <h1>Testimonials</h1>
 <p>Opinions of satisfied customers...</p>
 <h2>Latest tweets</h2>
 <p>Tweet 1</p>
 <p>Tweet 2</p>
</section>

<section id="contact">
 <h1>Contact</h1>
</section>

As you can see above, each section has a different H1 heading, then an H2 heading… Although you can decide to have one or more H1 heading tags and subsequently H2, H3, etc.

What does Google say about Hx tag?

Google employees said a lot about heading tags, but it is worth quoting their latest opinions. A year ago, John Meuller wrote the following on Google Forum for Webmasters: https://productforums.google.com/forum/#!msg/webmasters/BmyI8YX_25A/81hZNQFJDQA

“We don’t treat HTML5 differently & having multiple H1 tags on a page is fine. Be reasonable when using them, use them where they make sense. There’s definitely no penalty for using H1s.”

A bit later, in April 2017, John quite briefly responded on Twitter (https://twitter.com/JohnMu/status/852131231928135680) to a question how many H1 headings can be used on a single page.

Finally, as part of “SEO Snippets” YouTube series on the Google Webmaster Channel, a short guide on that issue was uploaded:

Other essential information about content headings

Even though Google employees suggest (at least in their official statements) a flexible approach to heading tags, there are a few rules worth following:

  • Do not overuse headings on a page
  • Use headings where it makes sense and when they reflect the text below them to help users determine where a given paragraph begins and ends
  • Do not put whole paragraphs (all the content) in a heading
  • Do not use only keywords, especially in an unnatural form
  • Do not hide headings in the body text by using the same font size for both the heading and the body text
  • Keep the structure hierarchy ordered
  • Perhaps use the <strong> tag sometimes instead of a heading tag ????.

When creating content, neither over-optimize nor under-optimize; instead, strive for a balance and focus on feelings of users digesting content on your website, including articles, guides or other blog posts. After all, headings are ranking determinants for Google search engineand that is why you must not neglect them.

Share this knowledge!

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest

Leave a Comment

Your email address will not be published. Required fields are marked *