The cleaner markup of nav > a
is certainly tempting, but consider the question of submenus and dropdown menus (something not mentioned in the other answers). HTML allows you to nest one list inside another, which is an elegant (and dare I say it, semantic) way of structuring such a menu:
<nav>
<ul>
<li><a href="#foo">foo</a></li>
<li><a href="#bar">bar</a>
<ul>
<li><a href="#qux">qux</a></li>
<li><a href="#quux">quux</a></li>
</ul>
</li>
<li><a href="#baz">baz</a></li>
</ul>
</nav>
You can't nest a
elements, so that rules out nav > a
, unless you start wrapping stuff in div
s:
<nav>
<a href="#foo">foo</a>
<a href="#bar">bar</a>
<div>
<a href="#qux">qux</a>
<a href="#quux">quux</a>
</div>
<a href="#baz">baz</a>
</nav>
Some popular CSS frameworks (like Bulma and Semantic/Fomantic UI) do something like this for navbars with dropdowns. So it can be done, but it feels kinda clunky to me. qux
and quux
aren't really nested inside of bar
like they are in the first example.