CODEWITHSUNDEEP
htmltags
devjs11
devjs11

Reputation: 1958

legit HTML5 site structure

I am trying to use html5 tags in the following structure and my question is if it is a legit way, if you check the code below I still have quite a few DIV containers that I need for design and grid purpose but I still would like to implement at least one section tag, mark the main page text as article. Right now I am nesting divs inside section and the H1 title is outside the article close to addressbar. Do you think this is a legit way of doing that? Or I really need to put the h1 inside article tag and try to avoid divs inside section or article part, does it have any negative SEO effect, does HTML5 and its wrong use may have any kind of negative SEO effect.

<header>
    <div>
        <div>link 1 | link 2</div>             
        <nav>Major header navigation: Link 1 | Link 2</nav>             
    </div>
</header>

<div>       

<div>
<div>           
    <div class="breadcrumbs"></div>         
    <h1>Most important title</h1>                                                                           
</div>
</div>

<div>

<nav>
    Major page navigation:
    <ul>
        <li>Link 1</li>
        <li>Link 2</li>
    </ul>
</nav>     

<div>

<article>
    <h2>title 1</h2>
    <p>main content</p>
    <h2>title 2</h2>
    <p>main content</p>
</article>

<aside>
    <h2>extras</h2>
</aside>

</div>
</div>  

</div>

<footer></footer>

Update: I decided to get rid of section and replace it with div. Updated structure is producing the following outline which looks more promising: 1. Most important title 1. Untitled Section 2. Untitled Section 3. title 1 4. title 2 5. extras

Marked "untitled" are my NAVs and I dont want them to have any heading, is that legit? The document still validates.

Upvotes: 0

Views: 427

Answers (1)

unor
unor

Reputation: 96737

Your markup creates the following outline:

 1) Untitled (no heading for body)
   1.1) Untitled (no heading for the first nav)
   1.2) Untitled (no heading for the second nav)
   1.3) your (empty) section heading
      1.3.1) Untitled (no heading for nav)
      1.3.2) your (empty) article heading
      1.3.3) Untitled (no heading for aside)

This is probably not what you want.

You should:

  • give a heading in the body>header (= for the whole site, e.g. your site name)
  • remove one of the first two nav elements (the links can go all in the same nav element per sectioning content (you may have several nav elements, if you have different navigations, though; depends on the content)
  • think if you find a sensible heading for the section like "My recent blog posts" (and your article would be one of these recent blog posts) (if not, you probably shouldn't use a section here)

Note the third nav and the aside are in scope of the section here. That means that this navigation and the secondary content have to relate to the section only (and not the whole page).

Upvotes: 2

Related Questions