Saltar al contenido principal

Estructura de página

Organiza el documento en partes lógicas, indicando el tipo de contenido de cada sección, con la ayuda de los elementos estructurales de HTML.

Identificando cada área de la página con la etiqueta adecuada, ofrecemos puntos de referencia (landmarks) para los usuarios de lectores de pantalla.

Cabecera

La cabecera o encabezado de una página se representa mediante el elemento header.

El elemento header define un punto de referencia del tipo banner. Este rol identifica contenido situado al principio de la página y orientado al sitio en general, como por ejemplo el logo, la navegación principal o un buscador.

HTML
<header>
...
</header>

Nota: Cuando el elemento header está dentro de otros elementos estructurales ( article, main, section…) no se considera como banner.

El elemento nav representa una sección con enlaces de navegación. Define un punto de referencia navigation.

HTML
<nav>
    <ul>
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Servicios</a></li>
        <li><a href="#">Contacto</a></li>
    </ul>
</nav>

Es importante que los componentes de una página sigan el orden lógico de lectura, por ejemplo, el menú de navegación debería estar al principio del documento.

Después podemos cambiar visualmente su ubicación mediante CSS (ejemplo: menú lateral a la derecha), pero para usuario con un lector de pantalla aparecerá en el orden adecuado.

Contenido principal

Identificamos el contenido principal de un documento con el elemento main. Este es el contenido único de cada página, a diferencia de otras secciones como la cabecera o el pie de página que suelen repetirse.

HTML
<main>
...
</main>

Contenido complementario

Se considera contenido complementario cualquier información relacionada con el contenido principal. Por ejemplo, la biografía del autor de un artículo, o un grupo de artículos relacionados.

Se representa con el elemento aside y define un punto de referencia del tipo complementary.

HTML
<aside>
    <h3>Artículos relacionados</h3>
    ...
</aside>

Secciones

El elemento section sirve para agrupar contenido relativo a un mismo tema. Normalmente cada sección se identifica con un encabezado (h1- h6).

HTML
<section>
    <h1>Noticias internacionales</h1>
    <p>...</p>
</section>

Nota: No hay que utilizar section como contenedor genérico. Para agrupar contenidos con el objetivo de darles estilo, hay que utilizar el elemento div.

Artículos

El elemento article identifica contenido de un sitio web que puede ser publicado o distribuido de forma independiente. Este contenido puede ser, por ejemplo, un artículo en un blog o un mensaje en un foro.

El elemento article puede contener a su vez otros elementos estructurales como header o footer e incluso diferentes secciones (section).

HTML
<article>
    <h2>Título del artículo</h2>
    <p>...</p>
    <footer>
        <p>Publicado el <time datetime="2016-11-03 11:00">03 de Noviembre</time> por John Doe</p>
    </footer>
</article>

Búsqueda

Un punto de referencia de búsqueda se define usando el rol search (no existe etiqueta HTML para este rol).

HTML
<form role="search">
    <input type="search" aria-label="Buscar">
    <button type="submit">Buscar</button>
</form>

Pie de página

Para representar el pie de página usamos el elemento footer.

El elemento footer define un punto de referencia del tipo contentinfo, siempre que descienda directamente del elemento body.

El rol contentinfo indica que se trata de información sobre el sitio web, como el copyright o enlaces a políticas de privacidad.

HTML
<footer>
    <p>&copy; 2016 Nombre empresa</p>
</footer>

Ejemplo de estructura de página

Aquí tenemos un ejemplo de una estructura de página moderna, utilizando elementos de HTML estructurales.

HTML
<header>

    <h1>Título principal</h1>

    <nav>
    <!-- Navegación principal -->
    </nav>

</header>

<!-- Contenido de la página -->
<main>

<!-- Artículo -->
    <article>

    <h2>Título del artículo</h2>
    <!-- Contenido del artículo -->

    </article>

    <aside>

    <h3>Artículos relacionados</h3>
    <!-- Contenido relacionado -->

    </aside>

</main>

<footer>
<!-- Contenido del pie de página -->
</footer>