HTML Course 10. Semantic HTML5

HTML Course 10: Semantic HTML5

1. ¿Qué es HTML Semántico?

HTML semántico consiste en usar etiquetas que describen claramente el contenido que envuelven. En lugar de utilizar contenedores genéricos como <div> o <span> para todo, empleamos elementos especializados (<header>, <article>, <footer>, etc.) cuya denominación refleja su propósito.

2. Ventajas de usar HTML Semántico

Accesibilidad: Lectores de pantalla y tecnologías asistivas comprenden mejor la estructura.
SEO: Motores de búsqueda indizan más inteligentemente el contenido.
Mantenibilidad: Código más claro y fácil de leer para desarrolladores.
Estilo predictable: Selectores CSS y comportamientos por defecto más coherentes.

3. Principales etiquetas semánticas en HTML5

Etiqueta	Propósito
`<header>`	Encabezado de una sección o página
`<nav>`	Enlaces de navegación principal
`<main>`	Contenido principal único de la página
`<article>`	Contenido independiente y autocontenido
`<section>`	Sección temática genérica dentro de un artículo o página
`<aside>`	Contenido lateral, como barras laterales o widgets
`<footer>`	Pie de sección o página
`<figure>`	Agrupa medios (imagen, diagrama, vídeo) con `<figcaption>`
`<figcaption>`	Descripción o título de un `<figure>`
`<time>`	Fecha u hora legible por máquina
`<mark>`	Texto resaltado o relevante
`<details>`	Sección colapsable que muestra/oculta contenido
`<summary>`	Resumen visible de un `<details>`

4. Ejemplos detallados

4.1. Estructura genérica vs semántica



  Mi Web
  ...


  ...
  ...

Derechos reservados



  Mi Web
  
    
      Inicio
      Blog
    
  


  
    Bienvenidos
    Este es un sitio de ejemplo.
  
  
    Enlaces rápidos
    
      Contacto
    
  


  © 2024 Mi Web. Todos los derechos reservados.

4.2. Uso de `article` y `section`

Cuando tengas varios artículos o contenidos independientes, usa article:


  
    
      Título del Artículo 1
      15 de junio de 2024
    
    Contenido del primer artículo...
  

  
    
      Título del Artículo 2
      10 de junio de 2024
    
    Contenido del segundo artículo...
    
      
      Figura 1: Ejemplo de figura.

4.3. Elementos interactivos: `details` y `summary`


  Ver más información
  Aquí hay datos ocultos que el usuario puede expandir o contraer.

5. Buenas prácticas y recomendaciones

No anidar <section> o <article> sin razón. Cada uno debe tener un propósito claro.
Usar <main> una sola vez por página. Todo el contenido principal debe ir dentro.
<header> y <footer> pueden repetirse en article o en la página global.
Evitar usar role o aria innecesariamente si ya existe la etiqueta semántica adecuada.
Combinar semántica con microdatos (JSON-LD) o schema.org para mejorar SEO.

6. Conclusión

La adopción de etiquetas semánticas en HTML5 mejora la accesibilidad, legibilidad del código y optimiza el posicionamiento en buscadores. Al estructurar tu contenido con elementos que describan su función, generas aplicaciones web más robustas y mantenibles a largo plazo.

HTML Course 10. Semantic HTML5