Los elementos semánticos HTML son aquellos que describen claramente su significado de una manera legible por humanos y máquinas.
Elementos tales como <header>, <footer> y <article> son considerados semánticos porque describen con precisión el propósito del elemento y el tipo de contenido que hay dentro de ellos.
¿Qué son los Elementos Semánticos?
HTML fue creado originalmente como lenguaje de código para describir documentos en los comienzos de internet. A medida que internet crecía y fue adoptado por más gente, sus necesidades cambiaron.
Donde internet estaba destinado para compartir documentos científicos, ahora la gente también quería compartir otras cosas. Muy rápidamente, la gente comenzó a querer que la web se viera mejor.
Debido a que la web no se creó inicialmente para ser diseñada, los programadores usaron diferentes trucos para hacer que las cosas estén dispuestas en diferentes maneras. En lugar de usar <table></table> para describir información usando una tabla, los programadores las usarían para posicionar otros elementos en una página.
A medida que avanzaba el uso de maquetaciones visualmente diseñadas, los programadores comenzaron a usar una etiqueta genérica «no semántica» como <div>. A menudo les darían a estos elementos un atributo class o id para describir su propósito. Por ejemplo, en lugar de <header> esto era a menudo escrito como <div class="header">.
Como HTML5 es todavía relativamente nuevo, este uso de elementos no semánticos sigue siendo muy común en los sitios web de hoy.