Kevin Powell - Community•12mo ago

list or no list for nav links

Zach Jensz · 2025-01-12T00:27:27.457Z

Just noticed that Porkbun just have the bare tags separated by

Just noticed that Porkbun just have the bare <a> tags separated by <br>

Zach JenszOP•1/12/25, 12:27 AM

curiousmissfox•1/12/25, 12:36 AM

It’s more semantic to be a
nav
ul
li
a

and then you don’t need the <br/> bc <li> are block level elements

curiousmissfox•1/12/25, 12:36 AM

Interesting that all the elements have empty class attributes

Ccuriousmissfox Interesting that all the elements have empty class attributes

Zach JenszOP•1/12/25, 12:42 AM

yea it is strange

Ccuriousmissfox It’s more semantic to be a nav ul li a and then you don’t need the ...

Zach JenszOP•1/12/25, 12:42 AM

I wonder why they opt not to do it

Zach JenszOP•1/12/25, 12:43 AM

I know with screen readers it means that more is read out, but I guess thats not a bad thing

ZZach Jensz I know with screen readers it means that more is read out, but I guess thats not...

curiousmissfox•1/12/25, 1:55 AM

It’s more about the context semantic elements and aria attributes give to the assistive technologies and the user.
A div with a bunch of links doesn’t tell the user this is a nav menu

curiousmissfox•1/12/25, 1:55 AM

Or that Products is the label

Zach JenszOP•1/12/25, 1:56 AM

right

Chris Bolson•1/12/25, 9:20 AM

I tend to not use lists for nav links or indeed anything that isn’t strictly a list. It creates unnecessary markup. In this case I would use a <nav> container and then flex or grid to define the layout and spacing.