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.
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)
sectionheading1.3.1) Untitled (no heading for
nav)1.3.2) your (empty)
articleheading1.3.3) Untitled (no heading for
aside)This is probably not what you want.
You should:
body>header(= for the whole site, e.g. your site name)navelements (the links can go all in the samenavelement per sectioning content (you may have severalnavelements, if you have different navigations, though; depends on the content)sectionlike “My recent blog posts” (and yourarticlewould be one of these recent blog posts) (if not, you probably shouldn’t use asectionhere)Note the third
navand theasideare in scope of thesectionhere. That means that this navigation and the secondary content have to relate to thesectiononly (and not the whole page).