Durante mucho tiempo, cuando hemos creado páginas web, hemos encerrado los elementos en cajas div y les hemos dado las características que hemos querido, hemos hecho headers, articulos, barras de navegación, secciones, etc, de la siguiente forma:
- <div id="article">
- <div id="footer">
- <div id="header">
- <div id="nav">
- <div id="section">
Desarrollar de esta manera si bien es correcto, la irrupción de los elementos semánticos, cambia el panorama. Permite trabajar las cajas en las que podremos maquetar usando un nombre significativo para cada elemento. Con únicamente ver la etiqueta podremos saber de que se trata y su función dentro de la página web.
Algunos elementos semánticos son los siguientes:
article
figcaption
main
mark
nav
section
summary
figure
footer
header
aside
details
time
Article
Este elemento representa una sección independiente en una página, este puede ser reutilizable independiente del resto del sitio web. Por ejemplo artículo de blog o periódico
Main
Este es el elemento principal de la página web y el resto de las partes tendrían que estar contenidas dentro de él
Nav
Comúnmente vemos este elemento reflejado en los navbars. Este tendría que contener los links de todas las páginas del sitio web
Aside
Este elemento es idóneo para colocar barras laterales que van al costado, esta sección se ve fácilmente en las parte lateral derecha en los blogs
Footer
Fácil de deducir dónde está ubicado, aca veremos por lo general el copyright, sitemap, información de contacto, redes sociales.etc