Unha pregunta moi frecuente cando empezamos é: “Se xa teño a etiqueta <nav>, por que teño que meter dentro unha lista (<ul> e <li>)? Non chega con poñer as ligazóns <a> soltas?”

A resposta curta é: Contexto para o usuario.

Por que usar <ul> e <li>?

1. Contaxe de elementos: cando un lector de pantalla entra nunha lista, anúncialle ao usuario: “Lista, 5 elementos”. Isto dá unha “mapa mental” de cantas opcións de navegación hai antes de empezar a lelas unha por unha.
2. Agrupación lóxica: indica que esas ligazóns teñen unha relación entre si. Non son ligazóns soltas perdidas polo texto, son un bloque de navegación.
3. Navegación por atallos: moitos usuarios de tecnoloxía de apoio usan comandos para saltar de lista en lista ou de elemento en elemento. Se non hai lista, perden esa facilidade.

O exemplo correcto:

HTML

<nav aria-label="Menú principal">
  <ul>
    <li><a href="/">Inicio</a></li>
    <li><a href="/servizos">Servizos</a></li>
    <li><a href="/contacto">Contacto</a></li>
  </ul>
</nav>

Dato extra: O atributo aria-label no <nav> axuda se tes máis dun menú (por exemplo, un na cabeceira e outro no pé), para que o usuario saiba cal é cal. Se queres saber máis, podemos comentalo e ver exemplos no futuro.

Facer as cousas ben non leva máis tempo, só require un pouco máis de cariño polo código e polos usuarios!