2

It is a recommendation to have just one per page, even validators print out a warming if there are more, but other recommendations contradict it like:

  1. Any rank can be used as the heading of an explicitly-defined section, although this practice is not recommended.
  2. Never skip heading order

and there is also the sectioning elements like aside which's outline shouldn't affect the page's outline.

It is pretty confusing, so at least I want to know how does it make better to have just one per page.

  • Heading tags don't matter for SEO one way or the other now. Google is now rendering pages and looks at how big and prominent the rendered text ends up being. You could have your entire page content inside h1 tags and it wouldn't make any difference compared to using 0, 1, or 5. – Stephen Ostermiller Jun 9 '18 at 10:17
  • 1
    @Stephen Ostermiller, you have blown my socks off. Are you certain of this, can you please provide a link? On a weekly basis SEO 'experts' are telling me how important the h1 is... Sorry, if it's not appropiate to ask you like this, i will remove the comment. – Bjorn Jun 9 '18 at 13:33
3

You didn't state who makes the recommendation but the specification itself says no such thing. A heading begins sectioning content and there may be more than one sectioning content on a page. However, what you are asking about, is the "document outline" and it does not exist in browsers today. In particular note this reference from one of the HTML authors and ARIA:

The HTML5 Document Outline is a dangerous fiction

It is dangerous because it can lead unsuspecting developers to think that using the nesting of heading elements in sectioning elements actually has some effect for users who consume heading semantics. Overwhelmingly the opposite is true. For example If you code a heading as a h1 element and nest it 5 deep in sectioning elements, the document outline leads us to believe that the heading will be a h6, back in the real world the heading is a h1.

But that doesn't mean you shouldn't use multiple h1 tags. It only means you need to be careful in their usage. It does not affect SEO according to John Mueller and Google but it may affect presentation of your page in a browser. You can use this as a helpful instruction from Mozilla.

However, screen readers are a different story and first scan for heading elements and presenting multiple h1 tags may confuse the listener as to where a new section resides in the document structure. See: https://css-tricks.com/document-outline-dilemma/

For these users, the only effect of the Document Outline Algorithm was that some new pages (eagerly adopting the new spec) were presented as flat lists of level-one headings, with no structure at all.

| improve this answer | |
  • Thanks. My confusion arose exactly for the suggested link and Mozilla heading element doc. After a reread of the links and your explanation I got that explicitly-defined sectioning weights more than headings for the document outline. That I just have to be careful in the use and styling of headings so that the page's presentation in the browser or screen readers isn't confusing for the user. – Eiws Not Jun 10 '18 at 0:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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