"Semántica", en HTML esa palabra complicada se refiere en términos simples al significado de las etiquetas, es decir, no poner etiquetas por ponerlas sino usar las etiquetas correctas para representar algo en particular.
La importancia de la semántica radica en tres aspectos:
- El código es fácil de leer
- Los motores de búsqueda entienden mejor la estructura de tu sitio
- Las tecnologías de asistencia como por ejemplo los lectores web para personas no videntes pueden brindar una mejor calidad de navegación
Estas son las etiquetas semánticas usadas en HTML:
| Etiqueta | Significado |
|---|---|
| <article> | Artículo, denota contenido que debe tener sentido por si mismo1 |
| <aside> | Agrupa el contenido relacionado indirectamente con lo mostrado en la página |
| <details> | Muestra el detalle de lo mostrado dentro de <sumary> |
| <figcaption> | Leyenda de una imagen contenida dentro de <figure> |
| <figure> | Agrupa una imagen y su leyenda (<figcaption>) |
| <footer> | Indica el pie de una página |
| <header> | Indica la cabecera de una página |
| <main> | Indica el contenido principal de una página |
| <mark> | Marca con resaltador su contenido |
| <nav> | Agrupa un set de enlaces de navegación |
| <section> | Define una sección dentro del documento |
| <summary> | Dentro se indica el resumen del contenido dentro de <details> |
| <time> | Se debe usar con horas específicas o fechas con hora |
Se considera muy buena práctica construir sitios web semánticos, y con estas etiquetas tienes lo necesario para sacar partido de ello.
Así de simple.