Should I use <ul>s and <li>s inside my <nav>s?
Now that we have a dedicated <nav>
tag,
Is this:
<nav>
<ul>
<li><a href="#foo">foo</a></li>
<li><a href="#bar">bar</a></li>
<li><a href="#baz">baz</a></li>
</ul>
</nav>
any better than the following?
<nav>
<a href="#foo">foo</a>
<a href="#bar">bar</a>
<a href="#baz">baz</a>
</nav>
Assuming that I don't need an extra DOM level for some CSS positioning/padding, what is the preferred way, and why?
Solution 1:
the nav element and the list provide different semantical information:
The nav element communicates that we're dealing with a major navigation block
The list communicates that the links inside this navigation block form a list of items
At http://w3c.github.io/html/sections.html#the-nav-element you can see that a nav element could also contain prose.
So yes, having a list inside a nav element does add meaning.
Solution 2:
For me, the unordered lists are extra markup that aren't really required. When I look at an HTML document, I want it to be as clean and easy to read as possible. It's already clear to the viewer that a list is being presented if proper indentation is used. Thus, adding the UL to these a tags is unnecessary and makes for reading the document more difficult.
Although you may gain some flexibility, I believe it's a better idea to not bloat the markup with unsemantic ul classes and to style the a elements in one fell swoop. And you have no excuse: use the :before and :after pseudo-selectors.
Edit: I have been made aware that some ARIA screen readers treat lists differently than simple anchor tags. If your website is geared towards disabled people, I might consider using the list-based approach.
Solution 3:
At this point, I'd keep the <ul><li>
elements, reason being that not all browsers support HTML5 tags yet.
For example, I ran into an issue using the <header>
tag - Chrome and FF worked like a charm, but Opera borked.
Until all browsers support HTML completely, I'd stick them in, but rely on the old ones for backwards compatibility.