Etiqueta nav en HTML

Introducción

La etiqueta <nav> de HTML5 es una de las principales incorporaciones al estándar que facilita la creación de estructuras de navegación más semánticas y accesibles en los sitios web.

En la era de la información y la creciente importancia de la experiencia del usuario, proporcionar una navegación clara y fácil de usar en un sitio web es esencial para mantener a los visitantes comprometidos y ayudarles a encontrar la información que buscan.

En este artículo, exploraremos el propósito y la función de la etiqueta <nav> en el desarrollo web, cómo utilizarla correctamente y cómo optimizarla para una navegación accesible y responsiva.

Además, compartiremos algunos consejos y técnicas avanzadas para personalizar la etiqueta <nav> y adaptarla a las necesidades de tu proyecto.

La guía definitiva de HTML5 y CSS3: (Spanish Edition)

Ver Ofertas en Amazon

El gran libro de HTML5, CSS3 y Javascript (Spanish Edition)

Ver Ofertas en Amazon

HTML: Desarrollo web (Spanish Edition)

Ver Ofertas en Amazon

¿Qué es etiqueta <nav> en HTML?

La etiqueta <nav> de HTML5 es un elemento semántico que se utiliza para representar la sección principal de navegación en un documento HTML.

El propósito principal de esta etiqueta es identificar claramente las áreas de navegación principal, facilitando a los navegadores web, motores de búsqueda y tecnologías de asistencia comprender mejor la estructura y jerarquía del contenido de un sitio web.

La etiqueta <nav> se utiliza típicamente para contener enlaces de navegación a las áreas más importantes de un sitio web, como las páginas principales, las categorías o las secciones de contenido relevantes.

Ejemplo de uso

A continuación, se presenta un ejemplo básico de cómo utilizar la etiqueta <nav>:


<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Ejemplo de etiqueta nav</title>
</head>
<body>
  <header>
    <h1>Nombre del sitio web</h1>
  </header>

  <nav>
    <ul>
      <li><a href="index.html">Inicio</a></li>
      <li><a href="acerca.html">Acerca de</a></li>
      <li><a href="servicios.html">Servicios</a></li>
      <li><a href="contacto.html">Contacto</a></li>
    </ul>
  </nav>

  <main>
    <!-- Contenido principal del sitio -->
  </main>

  <footer>
    <!-- Información del pie de página -->
  </footer>
</body>
</html>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, la etiqueta <nav> contiene una lista no ordenada (<ul>) de enlaces de navegación (<a>) a las páginas principales del sitio web.

Esta estructura facilita que los navegadores y otras las tecnologías identifiquen y accedan a la navegación principal del sitio, mejorando así la experiencia del usuario y la accesibilidad en general.

Uso adecuado de la etiqueta <nav>

El uso adecuado de la etiqueta <nav> es fundamental para mantener la semántica y la accesibilidad en un sitio web.

A continuación, se presentan algunas pautas y ejemplos para utilizar correctamente la etiqueta <nav>.

Utiliza la etiqueta <nav> solo para la navegación principal

Si bien puedes incluir varias etiquetas <nav> en un documento, es recomendable utilizarla solo para las áreas de navegación más importantes de un sitio web, como el menú principal o las secciones principales de contenido.

Evita utilizarla para enlaces secundarios o menos relevantes, como enlaces en el pie de página o en barras laterales.

Ejemplo de uso adecuado de la etiqueta <nav> para la navegación principal:


<header>
  <h1>Nombre del sitio web</h1>
  <nav>
    <ul>
      <li><a href="index.html">Inicio</a></li>
      <li><a href="acerca.html">Acerca de</a></li>
      <li><a href="servicios.html">Servicios</a></li>
      <li><a href="contacto.html">Contacto</a></li>
    </ul>
  </nav>
</header>

Lenguaje del código: HTML, XML (xml)

No utilices la etiqueta <nav> para enlaces individuales

La etiqueta <nav> está diseñada para agrupar enlaces de navegación relacionados. Evita utilizarla para enlaces individuales que no forman parte de un conjunto de navegación.

Ejemplo incorrecto de uso de la etiqueta <nav> para un enlace individual:


<p>Visita nuestra <nav><a href="politica_privacidad.html">política de privacidad</a></nav> para obtener más información.</p>

Lenguaje del código: HTML, XML (xml)

No anides etiquetas <nav>

No es recomendable anidar una etiqueta <nav> dentro de otra, ya que esto puede generar confusiones en la navegación y afectar la accesibilidad del sitio.

Si necesitas crear subnavegación, utiliza listas anidadas dentro de la etiqueta <nav> en lugar de anidar etiquetas <nav>.

Ejemplo de uso adecuado de listas anidadas para subnavegación:

<nav>
  <ul>
    <li><a href="index.html">Inicio</a></li>
    <li><a href="productos.html">Productos</a>
      <ul>
        <li><a href="categoria1.html">Categoría 1</a></li>
        <li><a href="categoria2.html">Categoría 2</a></li>
        <li><a href="categoria3.html">Categoría 3</a></li>
      </ul>
    </li>
    <li><a href="servicios.html">Servicios</a></li>
    <li><a href="contacto.html">Contacto</a></li>
  </ul>
</nav>

Lenguaje del código: HTML, XML (xml)

Siguiendo estas pautas, podrás utilizar la etiqueta <nav> de manera efectiva en tus proyectos web, mejorando la semántica y la accesibilidad de la navegación en tu sitio.

Estructura básica de una etiqueta <nav>

La estructura básica de una etiqueta <nav> generalmente incluye una lista de enlaces de navegación, que pueden estar contenidos en una lista ordenada (<ol>) o no ordenada (<ul>).

A continuación, se presenta un ejemplo de la estructura básica de una etiqueta <nav> con una lista no ordenada y cómo adaptarla para diferentes casos de uso.

Ejemplo de estructura básica de una etiqueta <nav>:


<nav>
  <ul>
    <li><a href="index.html">Inicio</a></li>
    <li><a href="acerca.html">Acerca de</a></li>
    <li><a href="servicios.html">Servicios</a></li>
    <li><a href="contacto.html">Contacto</a></li>
  </ul>
</nav>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, la etiqueta <nav> contiene una lista no ordenada con cuatro elementos de lista (<li>), cada uno con un enlace de navegación (<a>).

Para casos de uso en los que el orden de los enlaces de navegación es relevante, se puede utilizar una lista ordenada (<ol>) en lugar de una lista no ordenada (<ul>). Por ejemplo, en una lista de capítulos de un libro o pasos de un tutorial, el orden puede ser importante.

Ejemplo de estructura básica de una etiqueta <nav> con una lista ordenada:


<nav>
  <ol>
    <li><a href="capitulo1.html">Capítulo 1: Introducción</a></li>
    <li><a href="capitulo2.html">Capítulo 2: Conceptos básicos</a></li>
    <li><a href="capitulo3.html">Capítulo 3: Técnicas avanzadas</a></li>
    <li><a href="capitulo4.html">Capítulo 4: Conclusión</a></li>
  </ol>
</nav>

Lenguaje del código: HTML, XML (xml)

Además de las listas ordenadas y no ordenadas, también puedes utilizar otras estructuras para la navegación, como una lista de enlaces separados por un separador, como una barra vertical (|).

Sin embargo, las listas ordenadas y no ordenadas son las estructuras más comunes y accesibles para la mayoría de los casos de uso.

Ejemplo de estructura básica de una etiqueta <nav> con enlaces separados por barras verticales:


<nav>
  <a href="index.html">Inicio</a> |
  <a href="acerca.html">Acerca de</a> |
  <a href="servicios.html">Servicios</a> |
  <a href="contacto.html">Contacto</a>
</nav>

Lenguaje del código: HTML, XML (xml)

Ten en cuenta que, aunque este enfoque es menos accesible que utilizar listas ordenadas o no ordenadas, sigue siendo una opción válida en ciertos casos. No obstante, es recomendable utilizar las listas para garantizar una mejor accesibilidad y semántica en la mayoría de los casos.

Atributos y estilos

Una vez que hayas creado la estructura básica de la etiqueta <nav>, puedes mejorar su apariencia y accesibilidad utilizando atributos y estilos relevantes.

En esta sección, exploraremos algunos atributos y estilos comunes que se pueden aplicar a la etiqueta <nav> y sus elementos internos.

Atributo “arial-label”

El atributo “aria-label” permite proporcionar un título descriptivo para la etiqueta <nav> que será leído por las tecnologías asistivas, mejorando la accesibilidad del sitio.

Ejemplo de uso del atributo “aria-label” en la etiqueta <nav>:


<nav aria-label="Menú principal">
  <ul>
    <!-- Elementos de la lista de navegación -->
  </ul>
</nav>

Lenguaje del código: HTML, XML (xml)

Atributos “class” e “id”:

Puedes utilizar los atributos “class” e “id” para asignar clases e identificadores a la etiqueta <nav>, lo que facilita la selección y manipulación de la etiqueta en CSS y JavaScript.

Ejemplo de uso de atributos “class” e “id” en la etiqueta <nav>:


<nav class="menu-principal" id="navegacion" aria-label="Menú principal">
  <ul>
    <!-- Elementos de la lista de navegación -->
  </ul>
</nav>

Lenguaje del código: HTML, XML (xml)

Atributo “style”

Aunque no es una práctica recomendada en la mayoría de los casos, es posible aplicar estilos CSS directamente a la etiqueta <nav> utilizando el atributo “style”.

Es importante mencionar que utilizar estilos en línea puede dificultar el mantenimiento y la organización del código, por lo que generalmente es preferible aplicar estilos utilizando hojas de estilo externas o bloques de estilo dentro del elemento <style>.

Ejemplo de aplicación de estilos en línea en la etiqueta <nav>:


<nav class="menu-principal" id="navegacion" aria-label="Menú principal" style="background-color: #333; padding: 10px;">
  <ul>
    <!-- Elementos de la lista de navegación -->
  </ul>
</nav>

Lenguaje del código: HTML, XML (xml)

Aplicar estilos CSS a la etiqueta <nav> y sus elementos

Puedes utilizar CSS para aplicar estilos y personalizar la apariencia de la etiqueta <nav> y sus elementos internos.

Por ejemplo, puedes cambiar el color de fondo, el estilo de los enlaces y la disposición de los elementos de la lista.

Ejemplo de aplicación de estilos CSS en la etiqueta <nav> y sus elementos:


<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Ejemplo de estilos en etiqueta nav</title>
  <style>
    .menu-principal {
      background-color: #333;
      padding: 10px;
    }
    
    .menu-principal ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    
    .menu-principal li {
      display: inline;
    }
    
    .menu-principal a {
      color: white;
      text-decoration: none;
      padding: 10px;
    }
    
    .menu-principal a:hover {
      background-color: #555;
    }
  </style>
</head>
<body>
  <nav class="menu-principal" id="navegacion" aria-label="Menú principal">
    <ul>
      <li><a href="index.html">Inicio</a></li>
      <li><a href="acerca.html">Acerca de</a></li>
      <li><a href="servicios.html">Servicios</a></li>
      <li><a href="contacto.html">Contacto</a></li>
    </ul>
  </nav>

  <!-- Resto del contenido -->
</body>
</html>

Lenguaje del código: HTML, XML (xml)

Al combinar estos atributos generales, atributos específicos y estilos CSS, puedes personalizar aún más la etiqueta <nav> y adaptarla a las necesidades de tu proyecto y el diseño de tu sitio.

No dudes en experimentar y personalizar estos estilos según las necesidades de tu proyecto y el diseño de tu sitio.

Navegación accesible

Crear una navegación accesible es fundamental para garantizar que todos los usuarios, incluidos aquellos con discapacidades o que utilizan tecnologías asistivas, puedan navegar fácilmente por tu sitio web.

En esta sección, exploraremos algunas prácticas recomendadas para mejorar la accesibilidad de la etiqueta <nav> y sus elementos internos.

Utilizar el atributo “aria-label”

Como se mencionó anteriormente, el atributo “aria-label” permite proporcionar un título descriptivo para la etiqueta <nav> que será leído por las tecnologías asistivas. Asegúrate de asignar un valor descriptivo y significativo a este atributo.

Ejemplo de uso del atributo “aria-label” en la etiqueta <nav>:


<nav aria-label="Menú principal">
  <ul>
    <!-- Elementos de la lista de navegación -->
  </ul>
</nav>

Lenguaje del código: HTML, XML (xml)

Facilitar la navegación con el teclado

Asegúrate de que todos los enlaces de navegación sean accesibles mediante el uso del teclado, en particular mediante la tecla Tab. Los enlaces (<a>) dentro de la etiqueta <nav> deben tener un atributo “href” para garantizar que sean navegables con el teclado.


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

Lenguaje del código: HTML, XML (xml)

Utilizar texto claro y descriptivo para los enlaces

Asegúrate de que el texto de los enlaces sea claro y descriptivo para que los usuarios puedan entender fácilmente el propósito de cada enlace. Evita textos genéricos como “haz clic aquí” o “más información”.


<nav aria-label="Menú principal">
  <ul>
    <li><a href="index.html">Inicio</a></li>
    <li><a href="acerca.html">Acerca de nuestra empresa</a></li>
    <li><a href="servicios.html">Nuestros servicios</a></li>
    <li><a href="contacto.html">Contacto y soporte</a></li>
  </ul>
</nav>

Lenguaje del código: HTML, XML (xml)

Añadir estados de enfoque y activos visibles

Para mejorar la experiencia de navegación con el teclado, es fundamental proporcionar estilos visibles para los estados de enfoque y activos de los enlaces. Esto puede lograrse utilizando las pseudo clases CSS :focus y :active.

Ejemplo de estilos para estados de enfoque y activos:


.menu-principal a:focus, .menu-principal a:active {
  background-color: #777;
  outline: none;
}

Lenguaje del código: CSS (css)

Al seguir estas prácticas recomendadas, puedes mejorar significativamente la accesibilidad de la etiqueta <nav> y sus elementos internos, garantizando una navegación más fácil y agradable para todos los usuarios, independientemente de sus habilidades o las tecnologías que utilicen.

Navegación responsiva

En la era de los dispositivos móviles, es crucial asegurarse de que la navegación de tu sitio web se adapte y funcione correctamente en diferentes tamaños de pantalla y dispositivos.

En esta sección, exploraremos cómo crear una navegación responsiva utilizando la etiqueta <nav> y estilos CSS.

Utilizar consultas de medios CSS

Las consultas de medios son una característica de CSS que permite aplicar estilos específicos según las características del dispositivo o la ventana del navegador, como el ancho de la pantalla.

Para crear una navegación responsiva, puedes aplicar diferentes estilos en función del tamaño de la pantalla.

Ejemplo de consulta de medios para adaptar la navegación a diferentes tamaños de pantalla:


/* Estilos base para navegación */
.menu-principal ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu-principal a {
  display: block;
  text-decoration: none;
  padding: 10px;
}

/* Estilos para pantallas más grandes */
@media (min-width: 768px) {
  .menu-principal li {
    display: inline;
  }

  .menu-principal a {
    display: inline-block;
  }
}

Lenguaje del código: CSS (css)

Crear un menú hamburguesa

Un menú hamburguesa es un icono comúnmente utilizado en la navegación móvil para indicar que hay un menú oculto. Al hacer clic en este icono, se muestra el menú de navegación. Puedes crear un menú hamburguesa utilizando HTML, CSS y JavaScript.

Ejemplo de un menú hamburguesa básico:


<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejemplo de navegación responsiva</title>
  <style>
    /* Estilos base para navegación */
    .menu-principal ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: none;
    }

    .menu-principal a {
      display: block;
      text-decoration: none;
      padding: 10px;
    }

    /* Estilos para pantallas más grandes */
    @media (min-width: 768px) {
      .menu-principal li {
        display: inline;
      }

      .menu-principal a {
        display: inline-block;
      }

      .menu-principal ul {
        display: block;
      }
    }

    /* Estilos para menú hamburguesa */
    .hamburguesa {
      cursor: pointer;
      font-size: 24px;
      display: block;
      padding: 10px;
    }

    @media (min-width: 768px) {
      .hamburguesa {
        display: none;
      }
    }
  </style>
  <script>
    function toggleMenu() {
      var menu = document.querySelector(".menu-principal ul");
      menu.style.display = menu.style.display === "block" ? "none" : "block";
    }
  </script>
</head>
<body>
  <nav class="menu-principal" aria-label="Menú principal">
    <span class="hamburguesa" onclick="toggleMenu()">&#9776;</span>
    <ul>
      <li><a href="index.html">Inicio</a></li>
      <li><a href="acerca.html">Acerca de</a></li>
      <li><a href="servicios.html">Servicios</a></li>
      <li><a href="contacto.html">Contacto</a></li>
     </ul>

  </nav>
  <!-- Resto del contenido -->
</body>
</html>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, el menú hamburguesa se muestra en pantallas más pequeñas y se oculta en pantallas más grandes. Cuando se hace clic en el icono hamburguesa, la función toggleMenu() de JavaScript se encarga de mostrar u ocultar el menú de navegación.

Ajustar el diseño de la navegación según el tamaño de la pantalla

Dependiendo del diseño de tu sitio web, es posible que desees ajustar la disposición de los elementos de navegación según el tamaño de la pantalla. Por ejemplo, podrías cambiar el diseño de los elementos de la lista de horizontal a vertical en pantallas más pequeñas.

Ejemplo de ajuste de la disposición de la navegación según el tamaño de la pantalla:


.menu-principal li {
  display: inline;
}

.menu-principal a {
  display: inline-block;
}

@media (max-width: 767px) {
  .menu-principal li {
    display: block;
  }

  .menu-principal a {
    display: block;
  }
}

Lenguaje del código: CSS (css)

Al combinar estas técnicas, puedes crear una navegación responsiva que funcione correctamente en diferentes dispositivos y tamaños de pantalla. Esto garantiza una experiencia de usuario óptima y facilita la navegación por tu sitio web en dispositivos móviles y de escritorio.

Más ejemplos

Aquí hay algunos ejemplos más detallados de código HTML5 con la etiqueta <nav>:

Navegación principal:


<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, la etiqueta <nav> define una sección de navegación principal en la página web. El contenido dentro de la etiqueta está estructurado como una lista desordenada (<ul>) con elementos de lista (<li>) que contienen enlaces (<a>) a otras páginas o secciones dentro de la misma página.

Navegación secundaria:


<nav>
  <ul>
    <li><a href="#">Blog</a></li>
    <li><a href="#">FAQ</a></li>
    <li><a href="#">Terms & Conditions</a></li>
    <li><a href="#">Privacy Policy</a></li>
  </ul>
</nav>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, la etiqueta <nav> define una sección de navegación secundaria en la página web. El contenido dentro de la etiqueta está estructurado de la misma manera que en el ejemplo anterior, pero esta vez se enlazan a secciones o páginas secundarias o complementarias dentro del sitio.

Navegación con secciones anidadas:


<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">About</a>
      <ul>
        <li><a href="#">Our Team</a></li>
        <li><a href="#">Our History</a></li>
        <li><a href="#">Our Vision</a></li>
      </ul>
    </li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, la etiqueta <nav> define una sección de navegación principal con secciones anidadas. El contenido dentro de la etiqueta está estructurado como una lista desordenada (<ul>) con elementos de lista (<li>) que contienen enlaces (<a>) a otras páginas o secciones dentro de la misma página.