Search code examples
htmlsections

tag h1 within sections


I know that here and around internet is a lot of information and I read them, but I got disappointed by html5 validation. My webpage is like this:

 <body>
     <nav>
         <ul>
             <li>...</li>
             <li>...</li>
         </ul>
     </nav>
     <main>
         <section>
             <header>
                 <h1>...</h1>
             </header>
             <section>
                 <header>
                     <h1>Section 1</h1>
                 </header>
                 <p>...</p>
                 <p>...</p>
              </section>
              <section>
                  <header>
                      <h1>Section 2</h1>
                  </header>
                  <p>...</p>
                  <p>...</p>
              </section>
              <section>
                  <header>
                      <h1>Section 3</h1>
                  </header>
                  <p>...</p>
                  <p>...</p>
              </section>
          </section>
      </main>
      <footer>
          <h2>...</h2>
          <p>...</p>
      </footer>
  </body>

By my knowledges, html5doctor and w3c specification is right. My page is onepage website and each sections have own meaning. ...but if I try to validate, I will get warnings to consider using h2 - h6 within section, instead of h1. My webpage past validation, but I am nervous by warnings there. Please can you confirm me, that is OK or what is exactly wrong on that?

Thank you for each professional answer Peter


Solution

  • The original idea of HTML5 contained the concept of an outline algorithm. In it, the first h1 in your example would be interpreted in same way as an h1 in HTML 4.01. The h1 elements in the section elements would each be treated equivalent to an h2 element in HTML 4.01. That is, they would indicate the start of a subsection subordinate to the top level section started by the first h1 element.

    However, what happened in practice is that neither browsers, nor screen readers, nor any other HTML processors of note implemented the HTML5 outline algorithm anywhere near correctly if at all.

    The result is that your page will be misinterpreted. Mostly this affects Accessibility Technology which make heavy use of header levels to allow its users to navigate your pages effectively.

    I don't know whether there any specific negative SEO effects, but the effective semantic misinterpretation is unlikely to be beneficial.

    So the advice the validator is giving you, is that for the foreseeable future, it is best to use the same header level arrangement as you would use in HTML 4.01, that is h1 for top level section headers, h2 for the next level sub-sections, h3 for sub-sub-sections, etc.