Why should I embed navigation bar links into a list and then into a navigation bar?

user_12850467 0
Viewed 242

From w3schools.com:

A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense:

And every over tutorial about html says almost the same. It doesn't makes sense to me. Why it must look like this

 <nav>
   <ul>
    <li><a href="default.asp">Home</a></li>
    <li><a href="news.asp">News</a></li>
    <li><a href="contact.asp">Contact</a></li>
    <li><a href="about.asp">About</a></li>
  </ul>
</nav>

but not like this 

<nav>
  <a href="default.asp">Home</a>
  <a href="news.asp">News</a>
  <a href="contact.asp">Contact</a>
  <a href="about.asp">About</a>
</nav>

Embedding links into a list requires writing additional styling for said list, and just seems like unnecessary steps.

web html
1 Answers

Just as we give semantic meaning to our CSS classes (like .btn .btn-success and .row in bootstrap) to help give meaning to them when looking through our code we can also do the same with our html markup to help give meaning to anyone (other developers) or anything (search engines and screen readers) when looking through our code.

Your first example tells me that this is a list of navigation entries while the second simply tells me there are four elements in your navigation but nothing of their hierarchy/relation.

MDN has a concise entry for semantic markup within HTML

user_9836000
Related