Should we put <ul> tag inside <nav> tag?

StackOverflow https://stackoverflow.com//questions/11693608

  •  12-12-2019
  •  | 
  •  

Question

I wonder many websites put tag inside tag, from the specification the nav tag has anchors tags, and here the example in w3schools, why many sites make like this:

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

Is that correct or we should only make like this

<nav>
    <a href="#">Home</a>
    <a href="#">About</a>
</nav>
Was it helpful?

Solution

In general it's not required, however it's very common practice to put your navigation items in list and using CSS displaying them inline (if required). That is not only advice for HTML5 - if you'll disable for an example CSS in the browser, your menu will be displayed as:

start about me contact (can you read this?)

with list it will be:

  • start
  • about me
  • contact

Consider yourself which version would you like to see in case of problems with displaying design.

OTHER TIPS

What is important to note here is what the new tags like nav, section, header, footer, etc were designed for. In and of itself, these tags behave no differently than a div. The reason people are starting to use them on their html5 sites is to provide context to the document. While I roll my eyes when I hear terms like "Web 2.0", these terms do convey a change in thinking about how we use the web. Whenever you hear "Web 3.0"... ugh, all it really means is that people are trying to think about how to make the web more semantic, meaning the user experience is more customized based on user behavior and preferences. Tagging your document with these types of tags helps provide that context. The implementation of how it will present itself, however, is still up to you, and I believe both examples you provided are perfectly valid.

There is a decent article here which discusses this in more detail:

http://html5doctor.com/lets-talk-about-semantics/

I have always taken the view that any tag that exists purely to house another, single tag, is extraneous.

However semantic and sensible mark-up is an inexact science, so people have different views.

As per "nav" element specification, it represents a section of a page that links to other pages or to parts within the page. Specification does not mandate any particular structure whithin "nav" element. "ul" block, on the other hand, groups navigation links together for logical and/or practical purpose. Using lists for blocks of navigation benefits users who are navigating the Web with assistive technology, because screen reader may skip entire blocks of navigation, jumping from one navigation level to another.

References:

I would say: Yes, if is multilevel nav (so will have it hierarchical ordered). No, in all other cases: you save data, you gain speed, and readability.

IMHO UL should be use for showing actual Unordered List, the same is said about tables, that should show tabular data.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top