Search code examples
htmlsemantic-markup

Structuring HTML5 content - listView, header, footer and menu - with semantic tags

HTML5 has a variety of new section elements. These elements can be somewhat confusing. I have seen that there are actually very differing opinions on this subject. I've always faithfully followed W3schools and I'm sure that this website leads the way but in this popular question HTLM5 tags are used differently. Now, I don't really know which path to follow.

Let me clearify what I'm asking, please consider the following layout:

  1. Is it correct to use the <section> tag for all the list items? I would use it for grouping together thematically-related content. If yes, should I use the <header> or the h1 tag for the title of the list item?

  2. Is it correct to use the <aside> tag inside of the section? The content within the aside tag can be removed without reducing the meaning of the main content.

  3. Should I use <section> (with <header> and <nav>inside of it) for the Header of the page. Or directly the <header> tag as follows? 

    <header>
    <div>Logo here</div>    
    <h1>Name of Website</h1>

   <nav>
     <ul>
        <li>menu 1</li>
        <li>menu 2</li>
        <li>menu 3</li>
     </ul>
   </nav>
</header>

  4. The footer part should be a <footer> tag as w3schools did in the example?

  5. Can I use more than one <nav> tag in a page, is it convenient from a SEO point of view?

Solution

    1. It's not wrong. <article> is slightly better, but list semantics and a heading (h[1-6]) element will be more useful to everyone and probably suffices.

    2. Yes.

    3. Directly use <header>. You sample markup is fine, except that your <nav> section appears to contain no links.

    4. Yes.

    5. You can. I can't comment on SEO.

    Warning. W3Schools is not a good web site and the page on the sectioning elements is typically clueless. While their pages can sometimes provide an easy to follow introduction to a subject, treat nothing you read there as gospel.