Saltar al contenido principal

Estructura

img

Las secciones de nuestro sitio pueden ser organizadas mediante un marcado semántico. La semántica literalmente significa usar un lenguaje “significativo”, a partir de HTML5 disponemos de una serie de etiquetas de marcado semántico que nos ayudan a describir y jerarquizar el contenido.

Estas son algunas de las etiquetas de contenido que podemos usar en nuestro sitio:

header, nav, main, article, aside, address, footer

Ejemplo de estructura semántica:

    <header>
<img src="logo.png" alt="Mi web" />
<nav>
<!-- menú principal -->
</nav>
</header>


<aside>
<nav>
<!-- menú secundario -->
</nav>
</aside>

<main>
<h1>Título principal</h1>
<section>
<header>Título sección presentación</header>
</section>

<section>
<header>Título sección artículos</header>
<article>
<header>
<h2> Título artículo 1 </h2>
<header>
</article>
<header>
<h2> Título artículo 2 </h2>
</header>
<article>
</section>
</main>

<footer>
</footer>

El header es la primera zona que nos encontramos en cada página, y contiene información común, como puede ser el logotipo del sitio web, la función de búsqueda y las opciones de navegación.

<header>
<img src="logo.png" alt="Mi web" />
</header>

<!-- main -->

<!-- footer -->

Se utiliza para determinar la navegación principal de la página.

En el caso de tener varios menús de navegación, por ejemplo uno en la cabecera y otro en el pie, deberíamos usar el atributo aria-labelledby, para que los lectores de pantalla sepan distinguir el tipo de navegación.

<header>
<!-- contenido header -->

<nav aria-labelledby="menu-principal">
<h2 id="menu-principal">Menu de navegación principal</h2>
<!-- elementos del menú -->
</nav>
</header>

<!-- main -->

<footer>
<nav aria-labelledby="menu-secundario">
<h2 id="menu-secundario">Menú de navegación secundario</h2>
<!-- elementos del menú -->
</nav>
</footer>

Main

La etiqueta main indica el contenido principal, esta etiqueta debe ser única por página.

<!-- header -->

<main>
<!-- contenido principal -->
</main>

<!-- footer -->

Aside

Son secciones que podrían ir en el contenido principal, pero pueden ser separadas y significativas por sí mismas; Por ejemplo, una nota al margen explicando o anotando el contenido principal.

Al igual que el encabezado, es un área con la misma información en todas las páginas, se suele colocar la información legal, privacidad, redes sociales o enlaces de navegación.

Article

La etiqueta article define un contenido independiente y autónomo, es decir fuera del contexto de la web seguiría teniendo significado.

Ejemplos de uso

  • Noticias
  • Entrada de un blog

Section

Esta etiqueta se usa para definir una sección, es similar a un div, pero con carácter semántico. Los lectores de pantalla lo identifican como una región.

Se utiliza para crear grupos, capítulos o secciones de un contenido.

<article role="article">
<header>
<h2>Mi opinión sobre el mundo</h2>
</header>
<section class="content">
<p>Aquí voy hablar de lo maravilloso que es el mundo.</p>
</section>
<section class="comments">
<div class="comment" role="article">
<p>Increible post</p>
</div>
<div class="comment" role="article">
<p>Me gusta cómo sintetizas</p>
</div>
</section>
</article>