0

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.

PeeHaa
  • 71,436
  • 58
  • 190
  • 262
devjs11
  • 1,898
  • 7
  • 43
  • 73
  • I think this is responsed here: http://stackoverflow.com/questions/7405282/how-to-properly-use-h1-in-html5 – Kedume Oct 02 '12 at 09:13
  • ".. I still would like to implement at least one section tag, mark the main page text as article". Why? – Alohci Oct 02 '12 at 10:14
  • good question. Probably because I want it to look like html5, use new elements in code. – devjs11 Oct 02 '12 at 10:40

1 Answers1

2

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).

unor
  • 92,415
  • 26
  • 211
  • 360
  • I updated the code above, decided to get rid of section and replaced it with div. Now the outline looks more pormising, what do you think? – devjs11 Oct 02 '12 at 11:18
  • @Alex: Your "Most important title" would have to be the site (not page!) heading (usually contained in `header`). For sub-sections in `article`, better use explicit `section`. What is the difference between the two `nav` (and the links in the `div` at the top)? – unor Oct 02 '12 at 11:31
  • My header contains logo, small links like FAQ, SITEMAP and major navigation. So I placed small links into div and mark more important links with nav. Unfortunatly I cant place h1 there as its being designed, that is why i am using it outside. I am planing to use only one h1 which is the page title. Could that be done like that? – devjs11 Oct 02 '12 at 11:46
  • @Alex: this `h1` can be placed there, yes, **but** it will be the heading for the whole page (it "dominates" the header, the navigation, the sidebar, and the main content). So you can't use this `h1` as heading for the article (the heading for `article` needs to be the first heading *inside* of the `article` element). – unor Oct 02 '12 at 12:57
  • do you think I should just avoid, replace article tag with div? – devjs11 Oct 02 '12 at 16:24
  • @Alex: I wouldn't. Note that even if you omit all the sectioning elements (`nav`, `aside`, `article` and `section`), your headings still produce an outline. And then you would have to give an explicit heading for all sections, e.g. for the navigation, too. What is wrong with putting the content heading inside of `article`? – unor Oct 02 '12 at 20:50