Etiqueta `<nav>`

La etiqueta <nav> se utiliza para definir una sección de navegación en una página web. Se utiliza para envolver enlaces de navegación, como menús de navegación, que permiten al usuario moverse entre diferentes secciones de la misma página o hacia otras páginas web.

Generalmente, los elementos de navegación dentro de <nav> incluyen listas de enlaces, y esta etiqueta es fundamental para la accesibilidad, ya que indica a los usuarios (y a las tecnologías asistivas) que esos enlaces son parte de la navegación principal.

No debe usarse para contenido que no sea estrictamente de navegación, como enlaces dentro de artículos o contenido que no esté relacionado con la estructura de la página.

Ejemplo de código básico

Un ejemplo básico de uso de la etiqueta <nav> sería el siguiente:

    
<nav>
    <ul>
        <li>
            <a href="#">
                Inicio
            </a>
        </li>
        <li>
            <a href="#">
                HTML
            </a>
        </li>
        <li>
            <a href="#">
            CSS
            </a>
        </li>
        <li>
            <a href="#">
                JavaScript
            </a>
        </li>
    </ul>
</nav>

Ejemplo con menú de navegación horizontal

También se puede usar para crear menús de navegación más complejos, como los menús horizontales que se ven comúnmente en los sitios web. Aquí tienes un ejemplo:

    
<nav>
    <ul class="nav">
        <li class="nav-item">
            <a class="nav-link" href="#home">Inicio</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#services">Servicios</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#about">Sobre nosotros</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#contact">Contacto</a>
        </li>
    </ul>
</nav>

Este ejemplo usa la clase nav de Bootstrap para facilitar la creación de menús horizontales.

Accesibilidad y la etiqueta `<nav>`

Es importante considerar la accesibilidad al usar la etiqueta <nav>. Los navegadores modernos y las tecnologías asistivas, como los lectores de pantalla, usan la etiqueta <nav> para identificar las áreas de navegación en la página. De esta manera, los usuarios que utilizan estos dispositivos pueden saltar directamente a la navegación sin tener que leer todo el contenido de la página.

Uso en dispositivos móviles

En los dispositivos móviles, es común ocultar los menús de navegación en un ícono de menú (generalmente representado por un "hamburguer" icono). Usar la etiqueta <nav> para envolver estos menús garantiza que se mantenga la semántica de la navegación, incluso si el menú está oculto por defecto y se muestra solo cuando el usuario interactúa con el ícono.

Buenas prácticas al usar `<nav>`

Uso semántico: Solo usa la etiqueta <nav> para contener los enlaces que forman parte de la navegación principal de la página.
Accesibilidad: Asegúrate de que los enlaces dentro de la etiqueta <nav> sean fáciles de navegar para los usuarios con discapacidad. Utiliza atributos aria-label o aria-labelledby si es necesario.
Evitar el uso excesivo: No uses <nav> para contener todos los enlaces de la página. Por ejemplo, enlaces dentro de artículos o contenido secundario no deberían estar dentro de esta etiqueta.

Conclusión

La etiqueta <nav> es un elemento fundamental en HTML para mejorar la accesibilidad y estructura de los sitios web. Asegúrate de utilizarla adecuadamente para proporcionar una experiencia de usuario clara y fácil de navegar.

Anterior Siguiente

Etiqueta <nav>