Image for post
Image for post
Imagen de https://undraw.co

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

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.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store