Las etiquetas semánticas estructurales o de estructura nos permiten definir zonas de maquetación (proceso que permite definir cual es el área de las diferentes secciones de nuestro sitio web, como pueden ser la cabecera, el pie de página, el contenido principal, la publicidad, el contenido lateral…).
Estructura semántica HTML
Este es el esquema de una estructura semántica con HTML
A partir de HTML5 en 2009 nacen nuevas etiquetas contenedoras ya con cierto significado, que son las siguientes:
- <header></header>: cabecera de un sitio o de una sección.
- <main></main>: define la sección principal del documento. Sólo puede existir una etiqueta <main> por documento.
- <footer></footer>: representa el pie de página de un sitio web o una sección del sitio.
- <nav></nav>: representa una navegación, es decir, un conjunto de enlaces que forme una navegación, o también una botonera.
- <article></article>: representa una sección de autocontenido, es decir, por sí sola entendemos todo el contexto del autocontenido sin tener contexto de toda la interfaz del sitio, por ejm un sitio de blogs.
- <aside></aside>: representa un contenido complementario o secundario.
- <section></section>: representa una sección de contenido genérico.
- <address></adress>: semánticamente representa una dirección.