CODEWITHSUNDEEP
html
JohnnyFaldo
JohnnyFaldo

Reputation: 4161

HTML5 <nav> element

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

Upvotes: 5

Views: 1954

Answers (4)

Mateus Vahl
Mateus Vahl

Reputation: 989

"the element which allows you to group together links, resulting in more semantic markup and extra structure which may help screenreaders."
By: http://html5doctor.com/nav-element/

Example:

    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
      </ul>
   </nav>

Good idea use because: internal links for site navigation

<menu> tag The HTML element represents an unordered list of ""menu"" choices, or commands. By: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu

Upvotes: 0

SteveEdson
SteveEdson

Reputation: 2495

It's not just about code bloat, don't forget about accessibility. By having a <nav> element, you can tell user's screen readers where the menu is. It would be difficult to detect if it was just ul.menu.

As Denis mentions, there are also advantages for SEO rankings.

Upvotes: 1

Michael Aaron Safyan
Michael Aaron Safyan

Reputation: 95509

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

Upvotes: 3

Denis Tsoi
Denis Tsoi

Reputation: 10414

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.

Upvotes: 3

Related Questions