Curso HTML 10. HTML5 semántico

HTML5 Semántico

El HTML5 semántico introduce una serie de etiquetas que permiten describir el significado de cada parte de un documento, aportando ventajas en accesibilidad, SEO y mantenibilidad del código. A continuación, se explican en profundidad las principales etiquetas semánticas, su uso adecuado y ejemplos comentados.

1. Beneficios del HTML5 Semántico

• SEO mejorado: Los motores de búsqueda interpretan mejor la estructura.
• Accesibilidad: Lectores de pantalla reconocen secciones relevantes.
• Mantenibilidad: Código más legible y organizado.
• Outline automático: El navegador genera un índice de encabezados y secciones.

2. Estructura Básica con Etiquetas Semánticas

En lugar de usar contenedores genéricos (div), empleamos:

3. Implementación de la Estructura

Ejemplo de plantilla semántica básica:

  
  

    
    
Mi Sitio Web
    
    
  

  
  

    
    

      
Título del Artículo
      
Contenido del artículo...
    

    
    

      
Sección de Noticias
      
      

        
Noticia 1
        
Detalle de la noticia 1...
      
      

        
Noticia 2
        
Detalle de la noticia 2...
      
    

    
    
  

  
  

4. Profundizando en Cada Etiqueta

4.1 <header>

Define el bloque de introducción o encabezado de un documento o de una sección. Puede contener títulos, logotipos y navegación.

  
  
Acerca de Nosotros
  
  

4.2 <nav>

Encapsula menús de navegación. El atributo aria-label mejora la accesibilidad describiendo el propósito.

4.3 <main>

Debe haber solo uno por página. Contiene el contenido único y esencial.

  
Bienvenido a Nuestra Página
  
Contenido principal que representa la función central del sitio.

4.4 <article>

Para contenido autónomo que pueda distribuirse o sindicarse de forma independiente (posts, noticias).

  

    
Nuevo Lanzamiento de Producto
    1 de junio de 2024
  
  
Descripción del producto...
  

4.5 <section>

Para agrupar contenidos relacionados. Ideal cuando se titula la sección.

  
Características
  

    
Velocidad
    
Seguridad
    
Escalabilidad
  

4.6 <aside>

Contenido accesorio al contenido principal, como barras laterales, anuncios o enlaces relacionados.

4.7 <footer>

Pie de página de un documento o sección. Puede contener información de autor, derechos y enlaces secundarios.

5. Otros Elementos Semánticos Complementarios

• <figure> y <figcaption>: Para imágenes, diagramas y sus pies de foto.
• <time>: Representa fechas y horas con atributo datetime.
• <address>: Información de contacto del autor o sitio.
• <mark>: Para resaltar texto.
• <progress> y <meter>: Indicadores de progreso y métricas.
• <details> y <summary>: Paneles plegables.

Ejemplo con <figure>, <time> y <details>

  

    
Galería de Fotos
    20 de mayo de 2024
  
  

    
    
  
  

    
Ver descripción extendida
    
Esta fotografía fue tomada desde el mirador principal durante un viaje en primavera...
  

6. Buenas Prácticas y Accesibilidad

• Usar aria-label o aria-labelledby en nav y main.
• Evitar múltiples <main> o <header> sin contexto de sección.
• Describir imágenes con alt y usar <figure> cuando haya texto de pie.
• Emplear roles WAI-ARIA cuando la semántica nativa no sea suficiente.

Adoptar el HTML5 semántico mejora la experiencia de todos: desarrolladores, usuarios y buscadores. Cada etiqueta tiene un propósito; utilizarlas correctamente asegura un código robusto y escalable.