3

Google uses this HTML code in its Adwords pt-BR page:

<section class="..." id="...">
  <h4 class="...">
    Preços
  </h4>
  <h2>
    Você paga somente pelos resultados.
  </h2>
  <h3>
    Quando não há acessos, não há cobrança.
  </h3>
  <p>
    ...
  </p>
  <h3>
    Comece com qualquer orçamento.
  </h3>
  <p>
    ...
  </p>
</section>

Visually, it makes sense. But the problem, I think, is that they use <h4> as section heading and <h2> and <h3>'s in the same <section>, breaking the hierarchy of the page.

So, I want to know if this is a valid markup semantically speaking (and, if not, why does it matters). Also, how does this affect SEO?

Do I need to care about that?

PS: I've found this question but it didn't answer mine.

Improve this question
5
  • 1
    Why doesn't that other question answer your question? Just because it is about h1 and h2 opposed to h3 and h4 doesn't change very much.
    – Stephen Ostermiller ♦
    Mar 27, 2017 at 18:32
  • In the very early days, some folks used h* for styling more than anything and why not? H* really did not mean anything until Google came along and assumed that the h* were to be weighted by their hierarchical order as defined at least by tradition. That remains partially in affect today, however, the consequences are not the same. Where it applies, use CSS for style and h* in the hierarchical order it was meant to be so that it makes sense to anyone who chooses to parse your content for meaning. It is a bad coding habit to use h* for styling especially these days.
    – closetnoc
    Mar 27, 2017 at 19:26
  • @StephenOstermiller no, it's not that. I just think nobody answered the real question there.
    – Yuri
    Mar 27, 2017 at 19:27
  • Yes, I agree with you and that's my point, @closetnoc! That's why I thought Google Adwords page's mark up was weird.
    – Yuri
    Mar 27, 2017 at 20:39
  • Well... you know... Google makes the rules so they can break them. Right? Generally, following the hierarchy of h* tags is a good rule. However it does not matter to Google it seems. That is why I suggested staying traditional. Google acts like they are the only fish in the sea. There are others out there such as Bing, Yahoo!, Yandex, etc. I do not believe the render engine is used to analyze the content over the raw HTML DOM. This is because rendering depends upon so many factors that can change. Cheers!!
    – closetnoc
    Mar 27, 2017 at 22:16

3 Answers 3

Reset to default
1

Google uses the H tags structure to semantically evaluate and index pages. Having a correct H tags structure means that Google will be able to better assess your content, topic and will eventually give more ranking power to keywords related to it.

I read this example somewhere else, I don't remember where to give credit, sorry.

Let's say that you have a website about the band Rolling Stones, so your H tags structure will look like this:

<body>
<h1>Rolling Stones</h1>
Ipsum lorem
<h2>Keith Richards</h2>
Ipsum lorem
<h3>Guitar</h3>
Ipsum loren
<h4>Model</h4>
<h2>Mick Jagger</h2>
<h3>...
<h4>...
</body>

This is more and more important, especially if you're using structured data and plan to have some nice rich cards displayed on Google SERPs.

This way Google may pick your content to show it to someone looking for "Keith Richards guitar model" if you have that info in your post for example, or even show it inside a rich card.

Also, as Yuri said, H tags structure is important for accessibility, which is one of the hundreds rankings factors.

Coding guidelines and hierarchy aside, having well-structured H tags is important for your organic rankings so you need to care about it.

Improve this answer
5
  • If you are using HTML 5, then you should probably put each band member in it's own section, and that means that each band members name should be in an h1 tag.
    – RolfRB
    Mar 28, 2017 at 12:19
  • Re-read the specs and I now see that following an h1 with an h2 is the same as following an h1 with a section that has an h1, so both are OK as far as the specs go. If I should choose from a SEO perspecitve, I'm guessing that the h1, h2 mode is safest, though.
    – RolfRB
    Mar 28, 2017 at 12:35
  • As far as I know, every section needs a heading, no matter if it's a <h1> or a <h6>, or even a <p> inside a <header> and the best approach would be doing what said because of SEO.
    – Yuri
    Mar 29, 2017 at 16:57
  • So, my point was right. Answering my own question: taking the Google Adwords example, as @closetnoc said, Google breaks the rules using <h4> before <h2> inside a <section>. But now I'm confused. Stephen Ostermiller says it's not that important and Izaias Almeida says the other way around. I'll research a little more about accessibility and screen readers so I can understand this better. Thanks for you answers, guys.
    – Yuri
    Mar 29, 2017 at 17:07
  • @Yuri What you are referring to is the "document outline". Heading elements create sectioning content and section should have a heading. The problem is, browsers don't follow the outline and I don't recall what screen readers do but you should always create valid HTML cause eventually something is going to trip you up. The biggest mistake I see people making is using HTML elements, like headings, for visual presentation. They look at it and say it looks good so it must be good and that's a mistake. HTML is for document structure and that's all.
    – Rob
    Mar 29, 2017 at 17:39
1

Google doesn't even use headings as a ranking signal anymore. It pays attention to how the text is rendered on the page. Big bold text at the top of the page may be weighted more regardless of using h1, h2, h3, etc or styling it that way with CSS.

Making page mark up "semantically correct" doesn't matter in any way at all. Users almost never look at your source code. They only care about how your page renders in their browser. Google has long said that it doesn't give ranking boosts for semantically correct or validating HTML.

You have better ways to spend your time than worrying about which heading tags to use and in what order.

EDIT (based on comment discussion): Screen readers these days have a feature that speaks just the headings of the page, allowing a user to jump to the correct one. For screen reading users, it would help to use heading tags just on the sections to which they should jump and to use them in an appropriate order.

One way of testing how a screen reader would "see" your page is installing a simulator like Fang (for Firefox). It has a help document that explains how to use it and some common problems with markup for screen readers.

Improve this answer
6
  • 1
    I'm not an accessibility specialist, but good mark up doesn't affect how screen readers "read" the page?
    – Yuri
    Mar 27, 2017 at 20:35
  • Usability for screen readers is similar to usability for regular browsers. You test it and see how it actually works. Screen readers can parse and speak HTML that isn't perfectly formed. Your h3s and h4s isn't a detail that you need to worry about for screen readers any more than other browsers.
    – Stephen Ostermiller ♦
    Mar 27, 2017 at 21:11
  • I tried a lot of screen readers about two years ago and none of the ones I've tried could handle HTML5 specs. for headings properly. Therefor they actually force you to break the WCAG rule of following html specifications.
    – RolfRB
    Mar 28, 2017 at 12:16
  • Can you explain more about that RolfRB? I haven't tried screen readers for a while, but when I did they pretty much started with the text at the top of the page and read down regardless of tags.
    – Stephen Ostermiller ♦
    Mar 28, 2017 at 12:20
  • When we made our site we used h1 tags as the first heading of new sections on the page according to the specs, but the screen readers put all h1 headings at the same level in the document outline. So the page name (h1) was assumed to be on the same level as a lower, nested section title (also h1).
    – RolfRB
    Mar 28, 2017 at 12:28
0

@yuri Yes, they do. Best advice is to try a screen reader and the w3c validator to see the difference between heading hiearchy and document outline.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.