Etiqueta nav en HTML

¿Qué es etiqueta <nav> en HTML?

La etiqueta <nav> en HTML5 es un elemento semántico que sirve para identificar una sección de navegación en una página web y proporcionar información semántica importante sobre su contenido.

La etiqueta <nav> ayuda a los motores de búsqueda y a los lectores de pantalla a comprender la estructura de la página y a ofrecer una experiencia de usuario más accesible y eficiente.

Además, la etiqueta <nav> permite a los desarrolladores web diseñar la sección de navegación de manera clara y accesible, mejorando la experiencia del usuario final. Esto puede incluir la navegación a otras páginas dentro del mismo sitio web o a otras páginas en internet.

Ejemplo


<nav>
  <a href="#home">Inicio</a>
  <a href="#about">Acerca de</a>
  <a href="#services">Servicios</a>
  <a href="#contact">Contacto</a>
</nav>

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

En este ejemplo se utiliza la etiqueta <nav> de HTML5 para encerrar un conjunto de enlaces. Cada enlace está dentro de una etiqueta <a> y tiene un atributo “href” que indica a qué URL o sección de la página debe llevar el enlace.

Ejemplo de uso

Aquí te presento un ejemplo más detallado de cómo utilizar la etiqueta <nav> en una página web:


<!DOCTYPE html>
<html>
  <head>
    <title>Mi sitio web</title>
  </head>
  <body>
    <header>
      <h1>Mi sitio web</h1>
    </header>
    <nav>
      <ul>
        <li><a href="#home">Inicio</a></li>
        <li><a href="#about">Acerca de</a></li>
        <li><a href="#services">Servicios</a></li>
        <li><a href="#contact">Contacto</a></li>
      </ul>
    </nav>
    <main>
      <h2>Bienvenidos a mi sitio web</h2>
      <p>En este sitio encontrarás información sobre mi empresa y los servicios que ofrecemos.</p>
    </main>
    <footer>
      <p>Copyright © 2021 Mi sitio web</p>
    </footer>
  </body>
</html>

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

En este ejemplo, se utiliza la etiqueta <nav> para crear una sección de navegación en la parte superior de la página. Dentro de la etiqueta <nav>, se utiliza una lista sin orden <ul> para contener los enlaces de navegación.

Cada elemento de la lista <li> contiene un enlace <a> con un atributo “href” que indica a qué URL o sección de la página debe llevar el enlace.

También se utilizan etiquetas como <header>, <main> y <footer> para marcar el contenido principal y los elementos estructurales de la página.

Atributos

La etiqueta <nav> en HTML5 no tiene atributos específicos; sin embargo, al ser una etiqueta de bloque es posible utilizar los atributos globales de HTML5 como:

  • class: Este atributo permite especificar uno o más nombres de clases para un elemento HTML, lo que facilita la personalización y el estilo en cascada (CSS) de los elementos.
  • id: Este atributo permite especificar un identificador único para un elemento HTML, lo que permite a los desarrolladores web hacer referencia a él en el código HTML, JavaScript o CSS.
  • style: Este atributo permite especificar estilos CSS en línea para un elemento HTML, lo que facilita la personalización y el estilo de los elementos en una página web.
  • title: Este atributo permite especificar un título descriptivo para un elemento HTML, que se utiliza como descripción o información adicional para el elemento.
  • accesskey: Este atributo permite especificar una tecla de acceso para un elemento HTML, lo que permite a los usuarios activar el elemento con una combinación de teclas específica.
  • tabindex: Este atributo permite especificar el orden de enfoque de los elementos HTML cuando se utiliza la tecla Tab para moverse por la página.
  • hidden: Este atributo permite ocultar un elemento HTML de la página, lo que significa que no se mostrará ni se incluirá en el diseño de la página.
  • data-*: Estos son atributos personalizados que permiten a los desarrolladores web añadir información adicional a un elemento HTML, como información sobre el estado o las características de un elemento.

Es importante destacar que estos atributos no son específicos de la etiqueta <nav> y pueden ser utilizados en cualquier otra etiqueta HTML.

La función principal de la etiqueta <nav> es proporcionar una marca semántica para identificar una sección de navegación en una página web y no requiere atributos específicos para cumplir con su función.

Ejemplos

Aquí hay algunos ejemplos de código HTML5 que muestran cómo usar los atributos en la etiqueta <nav>:

  1. Uso del atributo class:

<nav class="navigation">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

Lenguaje del código: HTML, XML (xml)
  1. Uso del atributo id:

<nav id="main-nav">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

Lenguaje del código: HTML, XML (xml)
  1. Uso del atributo style:

<nav style="background-color: lightblue;">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

Lenguaje del código: HTML, XML (xml)
  1. Uso del atributo title:

<nav title="Main navigation section">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

Lenguaje del código: HTML, XML (xml)
  1. Uso del atributo accesskey:

<nav accesskey="n">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

Lenguaje del código: HTML, XML (xml)
  1. Uso del atributo tabindex:

<nav tabindex="1">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

Lenguaje del código: HTML, XML (xml)
  1. Uso del atributo hidden:

<nav hidden>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

Lenguaje del código: HTML, XML (xml)
  1. Uso de atributos personalizados data-*:

<nav data-status="active">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

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

Estos son solo algunos ejemplos básicos de código HTML5 que ilustran cómo se pueden usar los atributos en la etiqueta <nav>. Es importante destacar que estos atributos deben ser usados de manera coherente y estructurada para garantizar la accesibilidad y la funcionalidad de una página web.

Otros atributos

Además de los atributos genéricos mencionados anteriormente, también es posible utilizar algunos atributos específicos de las etiquetas dentro de <nav> para mejorar la navegación y la accesibilidad del sitio web. Por ejemplo:

  • role: Este atributo es utilizado para indicar el rol de un elemento en relación con el contenido general de la página. Es utilizado en conjunto con el atributo aria-* para mejorar la accesibilidad de la página.
  • aria-label: Este atributo es utilizado para proporcionar una descripción de un elemento para los usuarios de asistencia.
  • aria-current: Este atributo es utilizado para indicar el enlace actualmente seleccionado en la barra de navegación.

Es importante mencionar que estos atributos son específicos para mejorar la accesibilidad y no son necesarios en todos los casos, pero son recomendados para mejorar la experiencia del usuario y el rendimiento en motores de búsqueda.

Ejemplo:


<nav role="navigation" aria-label="Menu principal">
  <ul>
    <li><a href="#home" aria-current="page">Inicio</a></li>
    <li><a href="#about">Acerca de</a></li>
    <li><a href="#services">Servicios</a></li>
    <li><a href="#contact">Contacto</a></li>
  </ul>
</nav>

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

En este ejemplo se utiliza el atributo “role” para indicar que la etiqueta <nav> es un elemento de navegación y el atributo “aria-label” para proporcionar una descripción de la navegación.

También se utiliza el atributo “aria-current” para indicar el enlace actualmente seleccionado en el menú de navegación.

Más ejemplos

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

  1. 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.

  1. 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.

  1. 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.