Cuándo usar main, section, article, header, footer y aside en el HTML
Hay 6 elementos que podemos utilizar para estructurar nuestro HTML semánticamente.
- main
- header
- footer
- article
- section
- aside
Estos elementos tienen un significado semántico que no tiene por qué estar relacionado a su estilo visual ni a su posición en la página. Habitualmente vemos el footer debajo de todo y el header arriba, pero eso no tiene por qué ser así.
Uso de cada elemento
main
Este elemento nos indica que lo que está dentro suyo es el contenido principal de la página en la que estamos. Sólo puede ser usado una vez por cada página.
header
Se usa para identificar contenido que nos sirva de introducción a un bloque de código de nuestro HTML, puede ser usado por cada sección que lo necesite.
footer
Lo utilizamos para indicar información menos importante sobre la sección en la que estemos, contenido relacionado, datos de la web, etc.
article
Esto es usado para agrupar contenido que puede ser reutilizado en otras partes de nuestra web o aplicación. Cada conjunto de información puede ser incluída en este elemento. A menudo se lo confunde con section pero no funcionan igual. article tiene valor semántico.
section
Se utiliza para diferenciar secciones. Si vamos a usar section lo ideal es que usemos también un aria-label que describa de qué trata esa sección, de esta forma un lector de pantallas podría anunciarlo al lector.
Piensa, por ejemplo, en un artículo de un blog. Si ese artículo tuviese un resumen al principio, podríamos meter el resumen en un <section aria-label="Resumen del artículo"> y el contenido del artículo en un <article> .
A menudo un section suele usarse como un contenedor, una especie de div .
aside
Se usa principalmente para mostrar información que no es parte principal del documento, sino información adicional, temporal o relacionada en cierta manera con el contenido de la página.
