Lección 18. Etiquetas Semánticas HTML5. 
Las etiquetas semánticas dan significado al contenido, ayudando a la accesibilidad y al SEO.
<header>Encabezado</header>
<nav>Navegación</nav>
<main>Contenido principal</main>
<section>Sección</section>
<article>Artículo</article>
<aside>Barra lateral</aside>
<footer>Pie de página</footer>Donde:
<header> -> Representa el encabezado de una página o sección. Suele contener logos, menús, títulos o información introductoria.
<nav> -> Contiene la navegación principal del sitio: enlaces, menús, barras de navegación.
<main> -> Define el contenido principal del documento. Solo debe existir uno por página.
<section> -> Representa una sección temática del contenido (capítulos, bloques, temas).
<article> -> Contenido independiente que puede existir por sí mismo: publicaciones, noticias, comentarios, tarjetas, posts.
<aside> -> Contenido complementario: barras laterales, anuncios, widgets, bloques secundarios.
<footer> -> Es el pie de página. Normalmente incluye información final: copyright, enlaces secundarios, datos del sitio.
Nota: Todas estas etiquetas funcionan igual a div, siendo de tipo Bloque (Block).
Div vs etiquetas semánticas._
La etiqueta div no tiene significado, se usa solo para agrupar.
<!-- Malo para SEO -->
<div id="header"></div>
<!-- Bueno -->
<header></header>Nota: Las etiquetas semánticas indican la función del contenido.