HTML semántico
Etiquetas que describen el rol de cada bloque de la página.
Antes de HTML5, todo se maquetaba con <div> genéricos. HTML5 introdujo etiquetas semánticas que describen el propósito de cada sección: <header>, <nav>, <main>, <section>, <article>, <aside> y <footer>.
Usar estas etiquetas mejora el SEO (los buscadores entienden mejor la página), la accesibilidad (los lectores de pantalla pueden saltar directo a la navegación o al contenido principal) y la legibilidad del propio código para otros desarrolladores.
Regla práctica: usa un <div> solo cuando ninguna etiqueta semántica describe lo que estás agrupando.
Ejemplo — pruébalo tú mismo
Ponlo a prueba: Agrega una etiqueta <aside> con un dato curioso relacionado al artículo.