Why should I use UL/LI in my HTML?

Question

I have the following structure that seems really nice for me and I always use HTML5:

<div class="drop-menu" data-dropmenu="language">
  <a href="language/pt-pt" class="drop-menu-link">Português <span>(Brasil)</span></a>
  <a href="language/pt-pt" class="drop-menu-link">Português <span>(Portugal)</span></a>
  <a href="language/es" class="drop-menu-link">Español</a>
  <a href="language/en" class="drop-menu-link">English</a>
  <a href="language/ja" class="drop-menu-link">日本語</a>
  <a href="language/it" class="drop-menu-link">Italiano</a>
  <a href="language/de" class="drop-menu-link">Deutsch</a>
  <a href="language/fr" class="drop-menu-link">Français</a>
</div>

So why should I use a list structure (ULs/LIs) if just A elements shown as blocks does the job? Is it REALLY useful to use lists in this case? I always do like this and it seems so good.

Answer 1

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.

Answer 2

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 :(