Why should I use UL/LI in my HTML?

Also because, without CSS, your menu renders inline like a sentence...

Português (Brasil) Português (Portugal) Español English 日本語 Italiano Deutsch Français

...rather than a nicely formatted (albeit rather dull looking) list.


It is more semantically correct.

What you have above is an unordered list of languages. You should be using an unordered list of items (UL element with LI elements) to be semantically correct about it.

This also helps screen readers and other technologies that depend on correct semantics to work.


The opinions from a blind person using the JAWS screen reader suggests not using ul and li elements for menu or navigation lists.

https://css-tricks.com/navigation-in-lists-to-be-or-not-to-be/

Although you should nest the anchor elements inside a nav element if it is a navigation menu of some kind... that is its options will lead the user to new views/pages. If it is just a list of non-interactive data, then perhaps a section or aside element would work.

For a list of elements with interactive options that don't lead to a new page (i.e. just send a get/post request) its less clear what to wrap it in. I think a nav element could still make sense semantically (you're navigating the database/CRUD aspect of the page), or just a section/aside element could still work.

There's partial support for a menu element that would be nice for that :(

Tags:

Html

Semantics