Tienda
1


















La imagen muestra un fondo azul con un texto centrado en letras blancas que muestra la palabra nav

Última modificación: 2024-06-17

<nav> en HTML5: Descripción Detallada

El elemento <nav> es una etiqueta estructural en HTML5 que se utiliza para definir un conjunto de enlaces de navegación. Este elemento ayuda a organizar y estructurar el contenido de un sitio web, facilitando que los usuarios encuentren y accedan a diferentes secciones o páginas del mismo. A continuación, se describen los atributos y características específicos del elemento <nav>.

Atributos de <nav>

Aunque el elemento <nav> no tiene atributos específicos y únicos, puede utilizar los atributos globales que son comunes a todos los elementos HTML. Estos atributos permiten mejorar la accesibilidad y la interacción del elemento dentro de la página. Aquí hay una lista de algunos atributos globales que se pueden aplicar a <nav>:

  1. id: Proporciona un identificador único para el elemento. Puede ser utilizado para aplicar estilos CSS específicos o para manipular el elemento mediante JavaScript.

    <nav id="main-navigation"></nav>
  2. class: Asigna una o más clases CSS al elemento, lo cual permite aplicar estilos específicos de CSS o seleccionar el elemento mediante JavaScript.

    <nav class="primary-nav"></nav>
  3. style: Permite aplicar estilos en línea directamente al elemento.

    <nav style="background-color: #333;"></nav>
  4. title: Provee información adicional sobre el elemento. Este texto suele mostrarse como un tooltip al pasar el cursor sobre el elemento.

    <nav title="Main navigation"></nav>
  5. role: Define un rol para el elemento para mejorar la accesibilidad. Por ejemplo, el rol navigation puede explicitar la función del elemento a las tecnologías asistivas.

    <nav role="navigation"></nav>
  6. aria-label: Ofrece una etiqueta accesible para describir el propósito del elemento <nav>. Este atributo es particularmente útil para usuarios que dependen de lectores de pantalla.

    <nav aria-label="Main site navigation"></nav>

Uso de <nav> en HTML5

El elemento <nav> es muy útil para marcar secciones de navegación en un documento HTML5. Aquí te presento algunos ejemplos sencillos de utilización de <nav>:

Ejemplo 1: Navegación Principal del Sitio

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo de Navegación</title>
</head>
<body>
    <!-- Navegación principal del sitio -->
    <nav>
        <ul>
            <li><a href="#inicio">Inicio</a></li>
            <li><a href="#sobre-nosotros">Sobre Nosotros</a></li>
            <li><a href="#servicios">Servicios</a></li>
            <li><a href="#contacto">Contacto</a></li>
        </ul>
    </nav>
    <section id="inicio">
        <h1>Bienvenidos</h1>
        <p>Contenido de la página de inicio.</p>
    </section>
    <!-- Otras secciones del sitio -->
</body>
</html>

Ejemplo 2: Navegación Secundaria en una Página

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Artículo de Blog</title>
</head>
<body>
    <article>
        <header>
            <h1>Título del Artículo</h1>
        </header>
        <!-- Navegación secundaria dentro del artículo -->
        <nav>
            <ul>
                <li><a href="#introduccion">Introducción</a></li>
                <li><a href="#contenido-principal">Contenido Principal</a></li>
                <li><a href="#conclusion">Conclusión</a></li>
            </ul>
        </nav>
        <section id="introduccion">
            <h2>Introducción</h2>
            <p>Texto de introducción del artículo.</p>
        </section>
        <section id="contenido-principal">
            <h2>Contenido Principal</h2>
            <p>Texto principal del artículo.</p>
        </section>
        <section id="conclusion">
            <h2>Conclusión</h2>
            <p>Texto de conclusión del artículo.</p>
        </section>
    </article>
</body>
</html>

En resumen, el elemento <nav> en HTML5 es esencial para definir bloques de navegación en un documento web. Este elemento admite varios atributos globales que pueden enriquecer su funcionalidad y accesibilidad. Su uso adecuado mejora la estructura y la experiencia de usuario en sitios web.




Colaboraciónes de nuestros usuarios

¿Tienes algo que agregar? ¡Déjanos tu colaboración!