144

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?

kikito
  • 51,734
  • 32
  • 149
  • 189
  • 1
    That's a good question... With tags that doesn't make sense to HTML 4, does any of the previous best practices apply? – Guffa Apr 04 '11 at 22:08

9 Answers9

79

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.

Sheric
  • 416
  • 2
  • 16
Thomas Maas
  • 1,999
  • 12
  • 8
  • Thanks a lot, this is what I needed! Also, robertc's comment about screen readers announcing "list of 3 items" below was very useful. – kikito Apr 07 '11 at 23:32
  • 11
    Seems like the UL tag doesn't help anything: http://css-tricks.com/navigation-in-lists-to-be-or-not-to-be/ – psycho brm May 27 '14 at 10:42
  • 2
    The link seems to be working for me. Make sure to read the follow up, which declares lists and no lists a draw. https://css-tricks.com/wrapup-of-navigation-in-lists/ – RobW Sep 21 '15 at 17:40
  • In my opinion, a ` – wonsuc Apr 03 '19 at 00:17
8

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 divs:

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

Kal
  • 2,098
  • 24
  • 23
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.

unor
  • 92,415
  • 26
  • 211
  • 360
Demian Brecht
  • 21,135
  • 5
  • 42
  • 46
  • 3
    Use the HTML 5 Shim javascript file (http://remysharp.com/2009/01/07/html5-enabling-script/) to mitigate any possible backwards compatibility blunders with browsers such as Opera and IE. – acconrad Apr 04 '11 at 22:13
  • But then your site isn't friendly to non-obtrusive scripting :) – Demian Brecht Apr 04 '11 at 22:17
  • 1
    You mean like until IE8 exits the market... so like until 2016... `:)` – Šime Vidas Apr 04 '11 at 22:23
  • @Šime - precisely :) And turning off Javascript is no longer an option in browsers ;) – Demian Brecht Apr 04 '11 at 22:29
  • @Agent_9191 it will - I'm completely surprised today when I wanted to just check how many people are still on IE7 and guess what - in most countries there are more people on browsers like Opera or iPad safari than in IE7. I'm so happy I can drop support for IE7 now! And IE8 will go away sooner or later. It's the last stubborn browser we will have to face (IE9 isn't that bad to code against). – Camilo Martin Aug 24 '12 at 14:30
  • @ŠimeVidas 2016? IE8 is presently the majority share for IE with IE10 thankfully holding second place. – Brett Ryan Oct 16 '13 at 23:23
3

It's up to you really. If you usually used an unordered list to markup your navigation menu, then I'd say continue to do so within the <nav> element. The point of the <nav> element is to identify the navigation of the site to a computer reader for example, so whether you use a list or simply links is immaterial.

Ian Devlin
  • 18,534
  • 6
  • 55
  • 73
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.

user1429980
  • 6,872
  • 2
  • 43
  • 53
2

No, they are equivalent. Remember, HTML 5 is backwards compatible with HTML 4 lists, so you can feel free to use them in the same regard. The trade off is less code for the 2nd version.

If you are concerned about backwards compatibility with respect to browsers, make sure to include this shim to provide functionality of tags such as <nav> and <article>.

acconrad
  • 3,201
  • 1
  • 22
  • 31
  • 10
    A list of links provides additional semantics and accessibility (eg. screen readers will announce 'List of three items' when you enter the navigation). – robertc Apr 05 '11 at 17:28
  • @robertc The screenreaders point is a very good one. You should have put it on an answer! I would have marked it as correct. +1 in any case. – kikito Apr 07 '11 at 23:33
1

There is a really detailed post on CSS Tricks about this exact question. It is obviously a hotly debated issue; the post has over 200 comments.

Navigation in Lists: To Be or Not To Be (CSS Tricks, Jan 2013)

Astrotim
  • 2,152
  • 19
  • 23
  • Here's a follow up article they wrote https://css-tricks.com/wrapup-of-navigation-in-lists/ – Graham May 30 '19 at 20:22
1

If we're talking "by the book", then no; you don't need to use lists to mark up your navigation. The only real advantage they offer is to provide a better degree of flexibility when styling.

Phil.Wheeler
  • 16,748
  • 10
  • 99
  • 155
1

I'd keep the <ul><li> tags, because the new tags (<nav>, <section>, <article> and so on) are just more semantic versions of <div>s.

For the same reason you wouldn't just have a load of links in a <div>, they should also be structured inside a <nav> tag.

whostolemyhat
  • 3,107
  • 4
  • 34
  • 50