Además de los elementos propios del contenido, h1…, párrafos, elementos de énfasis y demás elementos para manejar contenidos de texto y mediáticos. HTML cuenta con un set de elementos que permiten agrupar contenidos, de manera que estos sean fácilmente reconocibles y puedan sumar al significado y estructura del documento. Estos elementos corresponden a los casos más comunes que se identificaron en la web desde su lanzamiento. En la web moderna es posible agrupar contenidos de manera que referencien Cabeceras generales, pies de contenido y secciones de contenido.
Cabecera, pies y secciones
El elemento ‘header’, no confundir con el elemento ‘head’ del documento, se usa para agrupar el contenido introductorio e identitario y en algunos casos la navegación principal y algunas acciones y accesos rapidos.
<header>contenido</header>El elemento ‘footer’, se usa para agrupar el contenido relacionado a la sección que representa, vínculos a elementos relacionados, copyright, información de contacto….
<footer>contenido</footer>El elemento ‘section’, se usa para agrupar el que solo pueda ser relacionado dentro de sí mismo, las características de un producto puede ser una sección, los comentarios de un artículo, una serie de artículos, una sección de contacto. En general cada sección es única dentro del documento.
<section>contenido</section>Artículo, navegación e info relacionada
El elemento ‘article’, se usa para agrupar cada uno de los contenido que sean estructuralmente repetitivo, como artículos de blog, reseñas, comentarios, tarjetas, productos….
<article>contenido</article>El elemento ‘nav’, se usa para agrupar vínculos.
<nav>links</nav>El elemento ‘aside’, se usa para agrupar información relacionada o tangencial con el tema principal.
<aside>contenidos</aside>Agrupación de contenidos con Main y Div
El elemento ‘main’, se usa para agrupar el o los contenidos principales del documento.
<main>contenidos</main>El elemento ‘div’, se usa para agrupar elementos de manera genérica, div NO tiene semántica, pero es muy útil para agrupar elementos y asignar reglas CSS. Si se quiere adicionar semántica a un div se puede usar atributos de clase e id, en este caso es posible que los navegadores identifiquen de mejor manera el contenido que contienen.
<div class=”contenido-alterno”>contenidos</div>
Deja una respuesta