Etiquetas de navegación

2.1 Enlaces de anclaje

La navegación dentro de una página HTML ayuda a los usuarios a moverse rápidamente a diferentes secciones del documento. Esto es especialmente útil para páginas largas con mucho contenido. En HTML, hay varias formas de implementar dicha navegación, incluyendo el uso de enlaces de anclaje, el atributo id, y la navegación a través de JavaScript.

Enlaces de anclaje — es la forma más común de navegación dentro de una página. Permiten a los usuarios moverse a partes específicas del documento usando etiquetas de anclaje.

Ejemplo de uso:

Crear anclajes con el atributo id:

    
      <h2 id="section1">Section 1</h2>
      <p>Contenido de la sección 1...</p>
      <h2 id="section2">Section 2</h2>
      <p>Contenido de la sección 2...</p>
      <h2 id="section3">Section 3</h2>
      <p>Contenido de la sección 3...</p>
    
  

Creación de enlaces a anclajes:

    
      <nav>
        <ul>
          <li><a href="#section1">Ir a la Sección 1</a></li>
          <li><a href="#section2">Ir a la Sección 2</a></li>
          <li><a href="#section3">Ir a la Sección 3</a></li>
        </ul>
      </nav>
    
  

Navegación usando el atributo name

El atributo name también se puede usar para crear anclajes, aunque su uso es menos común y se considera obsoleto.

Ejemplo

    
      <a name="top"></a>
      <p>Parte superior de la página...</p>
      <a name="bottom"></a>
      <p>Parte inferior de la página...</p>
      <nav>
        <ul>
          <li><a href="#top">Ir al principio</a></li>
          <li><a href="#bottom">Ir al final</a></li>
        </ul>
      </nav>
    
  

2.2 Scroll usando JavaScript

JavaScript ofrece más posibilidades flexibles para la navegación dentro de una página. Usando métodos como scrollIntoView, scrollTo y otros, se puede implementar un scroll suave hacia varios elementos de la página.

Ejemplo de uso:

Este código hace un scroll suave hacia el elemento especificado cuando se pulsa un botón.

    
      <button onclick="scrollToSection('section1')">Ir a la Sección 1</button>
      <button onclick="scrollToSection('section2')">Ir a la Sección 2</button>
      <button onclick="scrollToSection('section3')">Ir a la Sección 3</button>

      <h2 id="section1">Section 1</h2>
      <p>Contenido de la sección 1...</p>
      <h2 id="section2">Section 2</h2>
      <p>Contenido de la sección 2...</p>
      <h2 id="section3">Section 3</h2>
      <p>Contenido de la sección 3...</p>
    
  

    
     // Función para hacer un scroll suave a una sección específica en la página
      function scrollToSection(sectionId) {
        // Encuentra el elemento por su ID
        document.getElementById(sectionId).scrollIntoView({ behavior: 'smooth' });
      }
    
  

2.3 Etiqueta <nav>

La etiqueta <nav> en HTML5 está diseñada para definir una sección de la página que contiene enlaces de navegación. Esta etiqueta ayuda a designar semánticamente bloques de navegación, lo que mejora la estructura del sitio web y lo hace más accesible tanto para los usuarios como para los motores de búsqueda.

La etiqueta <nav> se utiliza para agrupar enlaces destinados a la navegación por el sitio o dentro del documento actual. Estos pueden ser menús principales, menús secundarios, migas de pan (breadcrumbs), listas de páginas y otros elementos de navegación.

Sintaxis

    
      <nav>
        <!-- Elementos de navegación -->
      </nav>
    
  

Ejemplo de uso

    
      <header>
        <h1>Mi sitio</h1>
        <nav>
          <ul>
            <li><a href="#home">Inicio</a></li>
            <li><a href="#about">Sobre nosotros</a></li>
            <li><a href="#services">Servicios</a></li>
            <li><a href="#contact">Contacto</a></li>
          </ul>
        </nav>
      </header>
    
  

Explicación

• Etiqueta <header>: se utiliza para crear un encabezado de página que incluye el menú de navegación
• Etiqueta <nav>: contiene una lista de enlaces que llevan a varias secciones de la página
• Etiquetas <ul> y <li>: se utilizan para crear una lista de enlaces de navegación
• Etiqueta <a>: define los enlaces en sí, donde los usuarios pueden hacer clic para navegar a otras partes de la página o del sitio

2.4 Aplicación de la etiqueta <nav>

La etiqueta <nav> se utiliza para agrupar enlaces de navegación, tales como:

• Menú principal del sitio
• Menús secundarios
• Migas de pan (breadcrumbs)
• Enlaces a páginas de paginación
• Otros enlaces de navegación

Menú principal del sitio

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

Menú secundario

    
      <nav>
        <ul>
          <li><a href="#faq">Preguntas Frecuentes</a></li>
          <li><a href="#support">Soporte</a></li>
          <li><a href="#privacy">Política de Privacidad</a></li>
        </ul>
      </nav>
    
  

Migas de pan (breadcrumbs)

    
      <nav aria-label="breadcrumb">
        <ol>
          <li><a href="/home">Inicio</a></li>
          <li><a href="/category">Categoría</a></li>
          <li>Página Actual</li>
        </ol>
      </nav>
    
  

Ventajas de usar la etiqueta <nav>

Marcado semántico

El uso de la etiqueta <nav> ayuda a los motores de búsqueda y a las tecnologías para personas con discapacidades a entender mejor la estructura de la página. Esto hace que el sitio sea más accesible y mejora su SEO.

Mejora de la estructura de la página

La etiqueta <nav> separa claramente los elementos de navegación del contenido principal, lo que hace que el marcado de la página sea más lógico y estructurado.

Facilidad de estilización

Los elementos de navegación encapsulados en la etiqueta <nav> son fáciles de estilizar con CSS para mejorar la apariencia y la usabilidad.