Curso HTML 5.5 Creación de menús de navegación simples

Curso HTML 5.5: Creación de menús de navegación simples

En este apartado se abordan en profundidad los principios y buenas prácticas para construir menús de navegación sencillos, semánticos y accesibles empleando únicamente marcado HTML. Aprenderás a estructurar la navegación con la etiqueta nav, listas no ordenadas ul y elementos de lista li, así como pautas para la accesibilidad y la escalabilidad de tus menús.

1. Estructura Semántica Básica

La forma recomendada de definir una zona de navegación es usar la etiqueta <nav>. En su interior, los vínculos se organizan típicamente en una lista no ordenada:

<!-- Menú de navegación horizontal simple -->
<nav role='navigation'>
  <ul>
    <li><a href='index.html'>Inicio</a></li>
    <li><a href='servicios.html'>Servicios</a></li>
    <li><a href='about.html'>Acerca de</a></li>
    <li><a href='contacto.html'>Contacto</a></li>
  </ul>
</nav>
  

Comentarios:

• <nav>: Define la sección destinada a la navegación.
• <ul> y <li>: Facilitan la creación de menús semánticos y estructurados.
• role='navigation': Refuerzo semántico para tecnologías de apoyo.

2. Accesibilidad y ARIA

Para asegurar que las tecnologías de asistencia comprendan mejor la estructura, podemos añadir atributos ARIA:

<nav aria-label='Menú principal'>
  <ul>
    <li>
      <a href='index.html' aria-current='page'>Inicio</a>
    </li>
    <li>
      <a href='servicios.html'>Servicios</a>
    </li>
    <li>
      <a href='about.html'>Acerca de</a>
    </li>
    <li>
      <a href='contacto.html'>Contacto</a>
    </li>
  </ul>
</nav>
  

• aria-label: Describe de forma clara la función de la barra de navegación.
• aria-current='page': Indica la página activa, mejorando la orientación del usuario.

3. Menú con Submenú y Navegación por Teclado

Para desplegar un submenú al pasar el ratón o enfocar con teclado, se anidan otras listas. Es importante que el marcado sea claro y que las teclas Tab y Flechas sean suficientes para acceder a los ítems:

<nav aria-label='Menú con submenú'>
  <ul>
    <li>
      <a href='categorias.html'>Categorías</a>
      <!-- Submenú dentro de Categorías -->
      <ul aria-label='Submenú de Categorías'>
        <li><a href='cat1.html'>Categoría 1</a></li>
        <li><a href='cat2.html'>Categoría 2</a></li>
        <li><a href='cat3.html'>Categoría 3</a></li>
      </ul>
    </li>
    <li><a href='blog.html'>Blog</a></li>
    <li><a href='faq.html'>FAQ</a></li>
  </ul>
</nav>
  

Recomendaciones para la usabilidad:

• El submenú debe aparecer/disappear de forma controlada via CSS convencionales (no incluidos aquí).
• Permitir desplazarse con las flechas arriba y abajo dentro de cada <ul>.
• Gestionar correctamente el foco (tabindex) si se añade scripting.

4. Resumen de Elementos Clave

Conclusión

Con HTML puro, aplicando etiquetas semánticas y atributos ARIA, podemos construir menús sencillos, claros y accesibles. Este enfoque facilita mantenimiento y escalabilidad, permitiendo luego añadir estilos y comportamientos dinámicos sin alterar la estructura base.