3

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.

Alex l.
  • 213
  • 1
  • 14
  • 2
    I remember reading on this, it's about search engine or text-to-speech engines ; having enums with UL/OL clearly states that we are dealing with several ordered items, topics. Link tags alone don't convey the same meaning. That's as you may guess a semantic thing. – Pierre Apr 03 '20 at 15:06
  • Add as an answer and link to source if you can. – Mech Apr 03 '20 at 15:11
  • It's important as it helps explain the structure of your site to search engines and screen readers (and other accessibility tools/services) – cfreear Apr 03 '20 at 15:11
  • Does this answer your question? [Should I use
      s and
    • s inside my
    – MARSHMALLOW Apr 03 '20 at 15:14

1 Answers1

2

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

cfreear
  • 1,855
  • 2
  • 19
  • 25