seo Question posted in
Some basic information to get you started with this can be found here.

HTML5 Outline and multiple H1 SEO

I’m really struggeling to get the HTML5 outline right and also keeping SEO in mind. I only want 1x H1 on the page, and this has to be the content article title. But HTML5 Outline forces me to give the header and nav section a title. Else it will say “Untitled Body” or “Untitled Nav section”. But it doesn’t feel right to have 2x H1’s on my page.

This is the structure now:

<body>
    <header>
        <h1>Company name</h1>
        Logo img
    </header>
    <nav>
        <h2>Main nav</h2>
        <ul></ul>
    </nav>
    <main role="main" id="main">
        <section>
            <header>
                <h1>Article</h1>
            </header>
            <p>Content</p>
            <h2>Article subtitle</h2>
        </section>
    </main>
    <footer>
        <nav>
            <h2>Footer nav</h2>
            <ul></ul>
        </nav>
    </footer>
</body>

The outline looks like this:

1. Company name
    1. Main nav
    2. Article
        1. Article subtitle
    3. Footer nav

The outline looks alright, but the HTML code with multiple H1 headings doesn’t feel right. Any thoughts about this?

Tags:

2

Answers


  1. 0

    If you don’t want headings in the first header and in nav, then just drop them. You don’t need to care about any developer tools that show the “HTML5 outline”, because browser don’t do anything with the HTML outline algorithm and neither do screen readers or any other tools for end users.

    Structuring your markup correctly with headings is important to screen-reader users. But the best-practice way to do that in the right way for screen-reader users means using explicit h1–h6 headings and not using them out of order — and not using nested h1. In particular, if you’re using section, structuring your markup correctly with headings means doing things like this:

    <body>
  <h1>My document</h1>
  …
  <section>
    <h2>Foo</h2>
    …
    <section>
      <h3>Bar</h3>

    …and structuring your markup correctly with headings means not doing things like this:

    <body>
  <h1>My document</h1>
  …
  <section>
    <h1>Foo</h1>
    …
    <section>
      <h1>Bar</h1>

    That is, if you care about screen-reader users, then do not use the h1 in nested sections like that.

    The reason you should not do that is: The “HTML5 outline” in the HTML spec says, for assistive-technology (AT) purposes (screen readers), browsers must follow an outline algorithm for assigning heading levels such that those nested h1 headings are instead exposed as h2-level and h3-level headings — but browsers don’t actually follow that outline algorithm in the HTML spec.

    Instead, browsers expose the heading levels of any nested h1 headings to AT just as h1-level headings — no matter how far down you have them in nested section elements.

    That means, when screen-readers user try to navigate the example above, they will just see it as a document with only h1-level headings — they won’t see any more structure for the headings than that, because browsers do not actually follow the HTML5 outline algorithm.

    That is, browsers do not assign different heading levels to those nested h1 headings — despite the HTML spec saying that they must. Browsers just ignore that requirement.

    Login or Signup to reply.
  2. 0

    I only want 1x H1 on the page, and this has to be the content article title.

    I don’t know where you heard that you should have only one H1 on the page for SEO reasons. This has not been true at least since we entered the new millennium. You give the search engines far too little credit. They can index your page just fine whether it has zero, one or fifty H1’s.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search