CODEWITHSUNDEEP
htmlnav
dotnetN00b
dotnetN00b

Reputation: 5131

Should my nav tag be in my section tag?

I'm new to this "semantic tagging". But I don't know if this is correct. In short, I don't know when to use the section vs the nav tags in this case. Should it be one or the other, none at all, or exactly as I have it? I'm speaking of the section with id = sidebar.

<body>
    <div class="page">
        <header>
            <table id="formHeader" style="width:100%;text-align:center;">
                <tr>
                    <td></td>
                </tr>
            </table>
            <nav>
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
            </nav>
        </header>
        <section id="sidebar">
            @*<nav>*@
                Go To...
                <ul>
                    <li>First Move to Moon</li>
                    <li>First Move to Moon</li>                    
                </ul>
            @*</nav>*@   
        </section>
        <section id="main">        
            @RenderBody()                              
        </section>
        <footer>
        </footer>
    </div>
</body>

Upvotes: 0

Views: 6015

Answers (3)

unor
unor

Reputation: 96587

You need to understand two things:

  • Each sectioning content element (section, article, aside, nav) creates an entry in the document outline (play around with an outliner, for example gsnedders HTML5 Outliner).
  • In that sense, the nav belongs to its nearest parent sectioning content element, or the nearest parent sectioning root (like body).

So your example would create the following outline:

 1. (no heading) → body
   1.1 (no heading) → nav
   1.2 (no heading) → section (#sidebar)
     1.2.1 (no heading) → nav
   1.3. (no heading) → section (#main)

The first nav would be the navigation for the whole page (or the site navigation), as it belongs to body.

The second nav would be the navigation for the sidebar (!).

If this applies to your content, your example is fine. But it probably would only make sense if the sidebar contains other content in addition, otherwise there would be no reason to have a navigation in the first place. If you can’t find a heading (it doesn’t matter if you’d actually use it) for the parent section, than there is likely something wrong.

Without seeing your actual content, no-one can answer if your structure is correct. What is the nav in the sidebar used for?

  • If it is a ToC for your main content, the nav should be a child of this main content.
  • If it is a page/site navigation, it should not be a child of section (or any other sectioning element), so that it belongs to body.
  • …

Upvotes: 6

Hammondhansen
Hammondhansen

Reputation: 11

If its a major navigational entity - then the nav tag is the thing to use. My humble opinion is that if you need to put nav elements inside section tags then its not nav-worthy. Not a major navigation.

The code:

<section id="sidebar">
  <nav>
    Go To...
    <ul>
      <li>First Move to Moon</li>
      <li>First Move to Moon</li>                    
    </ul>
  </nav>   
</section>

....could perhaps call for an aside tag instead of the section.

Upvotes: 1

Johnny_D
Johnny_D

Reputation: 4652

I don't know special rules for positioning such tag inside or outside section tag, but I truly believe, that main purpose of semantic markup is seo, and that's why wherever you place this tag today's search engines of Google and others are smart enough to find it.

Upvotes: -1

Related Questions