CODEWITHSUNDEEP
htmltagshtml-listsnav
MattCamp
MattCamp

Reputation: 250

Do I need <ul> with when I have <nav> with <li>?

Regarding the <nav> HTML5 tag.

What is the difference between this:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Photos</a></li>
  <ul>    
 </nav>

and this: (can this work?)

<nav>
    <li><a href="#">Home</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Photos</a></li>
 </nav>

Upvotes: 0

Views: 1620

Answers (2)

Explosion Pills
Explosion Pills

Reputation: 191749

<li> is not valid outside of ul or ol based on the contexts in which it can be used. This definition is very strict.

As for <nav>, its content model is flow content. <li> is not a flow content element. In the same vein, <nav> does not have to contain a list (either <ul> or <ol>).

My understinding is that navigation lists are better supported by screen readers and better for search engine optimization since search engines won't penalize you for the repetition of the list on pages. If you avoid the list, they might. I have absolutely no evidence to back this up -- it's just anecdotal.

Personally, I would go with the simplest valid HTML. That is just <nav> and <a> children.

Upvotes: 0

Joseph Silber
Joseph Silber

Reputation: 219938

You cannot put li elements outside of a ul/ol.

But you don't have to use a list at all. You can just put those a tags directly under the nav:

<nav>
    <a href="#">Home</a>
    <a href="#">News</a>
    <a href="#">Photos</a>
</nav>

For a little more history and a more thorough exploration, read this:

Navigation in Lists: To Be or Not To Be.

Upvotes: 6

Related Questions