Semántica HTML
El uso de etiquetas HTML que describen el significado y rol del contenido (header, nav, article, footer) en vez de solo su apariencia.
La semántica HTML se refiere al uso de etiquetas que comunican el significado del contenido, no solo su apariencia visual. En vez de usar <div> para todo, se usan etiquetas que describen qué es cada sección:
<!-- Sin semántica -->
<div class="header">...</div>
<div class="content">...</div>
<div class="footer">...</div>
<!-- Con semántica -->
<header>...</header>
<main>...</main>
<footer>...</footer>Beneficios:
- Accesibilidad: lectores de pantalla navegan por landmarks semánticos
- SEO: motores de búsqueda entienden la estructura de la página
- Mantenimiento: código más legible para desarrolladores
Etiquetas semánticas principales: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure>, <figcaption>, <time>, <mark>.