Is there a reason to use
inside of
?

Question

I know the new HTML5 nav element is for creating navigation menus...obviously...but anytime I see someone using it they tend to put a ul inside of it, like so:

     <nav>
        <ul>
            <li><a href=#>Item A</a></li>
            <li><a href=#>Item B</a></li>
            <li><a href=#>Item C</a></li>
        </ul>
    </nav>

Is that necessary? Is there an advantage to that? Is there any reason not to just write:

     <nav>
        <a href=#>Item A</a>
        <a href=#>Item B</a>
        <a href=#>Item C</a>
     </nav>

Or, otherwise, why bother wrapping the ul in the nav? What's the point? Just to make your markup more "semantic"? Why not just use the ul on its own?

Semantics is basically what it comes down to. `
` declares there are multiple options independent of each other. — Brad Christie, Feb 26 '15 at 20:35
it is just a preference for some. You are right generally unnecessary... but not not required. I use ULs on their own most times and divs instead of the nav — Cayce K, Feb 26 '15 at 20:35
Voted to close my own question, definitely a duplicate, couldn't find that other one before. — temporary_user_name, Feb 26 '15 at 20:36
The "why" of it is that it adds structure that can be targeted with CSS to alter the appearance of the menu. If you don't need to do that, then the added markup would be superfluous. If you're adding anything to any code because you're "supposed to" rather than because you *need to*, then you're already off track. Write code that accomplishes your goal, not to fulfill a perceived expectation. — Chris Baker, Feb 26 '15 at 20:38

score 7 · Answer 1 · edited May 23 '17 at 10:24

It was really a hard time for html5 with a huge discussion about this semantic solution. Main two points of it were:

Navigation is some kind of unordered list in fact.

But navigation can be more complicated also (headers, uls inside uls). So the nav element cannot induce the ul element (as the <menu> element does)...

For example:

<nav>
    <h3>Main navigation</h3>
    <ul><li>...</li></ul>
    <a href="registernow.php">Register</a>
    <h4>Sub navigation</h4>
    <ul><li>...</li></ul>
</nav>

In that case, navigation is much more complicated then simple ul.

Summing up: Inside nav there can be multiple lists, multiple links, headers, ..., and inter alia single ul.

Take a look at a hot discussion about that on css tricks. There are many votes for yes and no to that solution... But after all the solution is now a semantic fact :).

NAV vs MENU: <nav> or <menu> (HTML5)
Great discussion on css tricks: https://css-tricks.com/navigation-in-lists-to-be-or-not-to-be/
Wrapup of Navigation in Lists: https://css-tricks.com/wrapup-of-navigation-in-lists/

Is there a reason to use inside of ?

1 Answers1

Is there a reason to use
inside of
?