Curso HTML 15.5 Breadcrumbs y estructura de enlaces internos

15.5 Breadcrumbs y estructura de enlaces internos

En este apartado profundizaremos en dos conceptos clave de la navegación en páginas web estáticas y dinámicas:

• Breadcrumbs o migas de pan: rutas de navegación jerárquica que orientan al usuario.
• Estructura de enlaces internos: anclajes para facilitar el acceso rápido a secciones, contenidos truncados y tablas de contenidos.

1. Breadcrumbs (Migas de pan)

Las migas de pan muestran al usuario la posición relativa dentro de la pirámide de contenidos. Ayudan a:

• Mejorar la usabilidad y la orientación.
• Facilitar la navegación hacia niveles superiores sin recurrir al botón “atrás”.
• Contribuir al SEO al exponer la estructura semántica del sitio.

1.1 Marcado semántico y accesible

Los breadcrumbs suelen implementarse con un elemento <nav> especializado y una lista ordenada:

Explicación de atributos clave:

• aria-label='Breadcrumb': define el propósito y permite a lectores de pantalla interpretar correctamente.
• ol en lugar de ul: refleja la progresión jerárquica.
• aria-current='page': marca el elemento activo (no enlazable).

1.2 Microdatos para SEO (schema.org)

Se pueden añadir microdatos siguiendo la especificación de schema.org/BreadcrumbList:

2. Estructura de enlaces internos

Los enlaces internos facilitan:

• Acceso directo a secciones concretas de la misma página (anchor links).
• Navegación rápida en documentos extensos mediante índice o tabla de contenidos.
• “Back to top”, saltos de accesibilidad (“Skip to content”).

2.1 Anclas definidas con id

La forma moderna estándar es:

Ir a Contacto


Contacto

  Para consultas, envíe un correo a 
  info@ejemplo.com.

No usar ya <a name='...'> porque está obsoleto.

2.2 Tabla de contenidos con navegación interna

En documentos largos (tutoriales, manuales), añadir un índice al inicio:

Introducción
... contenido de introducción ...

Instalación
... pasos de instalación ...

Uso básico
... ejemplo de uso ...

Conclusiones
... conclusiones finales ...

2.3 “Volver arriba” y enlaces de salto de accesibilidad

Para mejorar la experiencia de usuario, se suelen incluir enlaces fijos o flotantes (sin CSS aquí) como:

  Saltar al contenido principal




  




  Volver arriba

3. Buenas prácticas

• Usar siempre aria-label o aria-current para accesibilidad.
• Mantener URLs limpias y relativas.
• Evitar duplicar ids en la misma página.
• En migas de pan, respetar el orden y no incluir demasiados niveles (máximo 5–6).
• Proporcionar siempre un enlace al inicio (home) y al menos un nivel superior.

Con estos conceptos y ejemplos en código puro HTML estarás en condiciones de implementar sistemas de navegación jerárquica y anclajes internos de forma correcta, accesible y amigable para motores de búsqueda.