html5 semantics about navigations

Question

today i wanted to have a closer look over the nav element from html5. and i've seen on most websites that the way it should be used is with an ul li inside. Well that wouldn't be very semantic because the nav element already acts like a list. Even on MDN i've seen the example using nav ul li elements. But how about just simple nav with links inside and even dropdown

<nav>
    <a href="#">Some Text</a>
    <a href="#">Some Text</a>
    <a href="#">Some Text</a>
    <a href="#">Some Text</a>
    <a href="#">Some Text</a>
    <a href="#">Some Text</a>
    <a href="#">Some Text</a>
    <a href="#" id="dropdown-menu">Dropdown
        <nav class="dropdown">
            <a href="#">Some Text</a>
            <a href="#">Some Text</a>
            <a href="#">Some Text</a>
            <a href="#">Some Text</a>
            <a href="#">Some Text</a>
            <a href="#">Some Text</a>
            <a href="#">Some Text</a>
        </nav>
    </a>
</nav>

Is it semantic, is it wrong ? if it's correct the way i used why everyone uses ul li elements inside of nav ?

Update: just for the example i've updated the topic and added the css and js Javascript

$('#dropdown-menu').on("click", function(e) {
    $('.dropdown').slideDown(100);
});

CSS

.dropdown {
    display: none; 
}

See [**this SO question**](http://stackoverflow.com/questions/5544885/should-i-use-uls-and-lis-inside-my-navs) — Zach Saucier, Nov 18 '13 at 14:32
now i feel like adding an extra element to the html. if the purpose is to let us know that we are dealing with a large navigation block. :-). — Bogdan, Nov 18 '13 at 14:40

score 0 · Accepted Answer · answered Nov 18 '13 at 14:55

I think good practice (required for wordpress for example) is building navigation this way:

<nav>
   <ul>
      <li><a href="" title=""></a></li>
      <li><a href="" title=""></a></li>
      <li><a href="" title=""></a></li>
      <li>
         <a href="" title=""></a>
         <ul>
             <li><a href="" title=""></a></li>
             <li><a href="" title=""></a></li>
             <li><a href="" title=""></a></li>
         </ul>
      </li>
   </ul>
</nav>

Always use ul, it's natural - navigation is a list.

html5 semantics about navigations

1 Answers1