HTML5 <nav> element

Question

I'm always trying to use the new html5 elements, but find myself doing stuff like this:

<nav class="some-menu">
    <ul class="menu">
       <li>
           <a title="link to somewhere" href="the-link.php">link to somewhere</a>
       </li>
    </ul>
</nav>

When I could have achieved the same (visually) with:

<ul class="menu">
   <li>
       <a title="link to somewhere" href="the-link.php">link to somewhere</a>
   </li>
</ul>

More symantic markup vs bloated DOM, should I include the <nav> tag in that situation?

EDIT

I've found the <menu> item can actually be used in this situation along with <li> e.g:

<menu class="side-menu">
    <li><a title="a menu item" href="touch-my-nipples.thanks">Inappropriate Href</a>
</menu>

Which achieves more semantic markup without verbosity

Answer 1

Well you could argue that not including html5 tags increases the readability of your html file.

However, for SEO purposes, using html5 tags may assist in your page rank, so that might be a consideration if you are developing for a commercial web page.

In this one particular case, if the purpose of the <li> is not for navigation, then it I doubt you would get any criticism for it.

Answer 2

This is a good question. More DOM == more time to load the page, which is not good. However, you could try to use a combination of both. How about simply doing something like this:

<nav class="menu">
  <a class="menu-item" href="...">Link 1</a>
  <a class="menu-item" href="...">Link 2</a>
</nav>

I don't think there is a huge benefit to one over the other, though you should test to see how this appears to different screen reader users (as accessibility may be benefit of semantic markup).