Navigation Bars

When creating a Navigation bar is there any discernible difference between the following? Is one more “correct” than the other or does it come down to personal preference?

<nav> 
  <ul>
    <li><a href="#">...</a><li>
    <li><a href="#">...</a><li>
    <li><a href="#">...</a><li>
  </ul> 
</nav>

&

<nav> 
  <a href="#">...</a>
  <a href="#">...</a>
  <a href="#">...</a>
</nav>
2 Likes

@CitrineDragon well to me its more a choice thing or preference as you would say. But you have to notice that using UL means you would have access list styles.

Personally the first code is clean and of standard as in an ideal scenario we know a nav is a list of menu items hence; ul>li>a :slight_smile:

hope that helps :wink:

1 Like

Yeah that was my line of thinking as well but I say a lot of tutorials/guides using the latter option. I will stick to the first way but I will try out both just to have that experience. Thanks for the feedback.

For accessibility using a list is probably more “correct”.

Menu representation

Convey the menu structure, typically by using a list. Such structural information allows assistive technologies to announce the number of items in the menu and provide corresponding navigation functionality.

1 Like

Excellent, this is what I was looking for. Thanks!

You can also use the css “list-item” values for display (display - CSS: Cascading Style Sheets | MDN)