Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a HTML 5: Introducción que contiene a Secuencia de encabezados y elementos estructurales

Datos de búsqueda

HTML 5

Secuencia de encabezados y elementos estructurales

Secuencia de encabezados

A pesar de poder utilizar únicamente elementos H1 para cualquier encabezado, siempre que vayan dentro de los elementos que configuran la secuencia de encabezado, no es recomendable dicha práctica. Hasta que los navegadores soporten la secuencia de encabezado que proporciona HTML 5, es recomendable seguir utilizando el mismo sistema H1-H6 que en HTML 4, aunque se utilicen también los elementos que configuran la secuencia de encabezado.

De ese modo se evitarán problemas con: ayudas técnicas (lectores de pantalla) o con la visualización de los encabezados cuando se carece de CSS (hay navegadores que al no interpretar la secuencia de encabezados de HTML 5 mosttrarían todos los encabezados con el mismo aspecto).

Las estructuras de encabezado que hoy son correctas en HTML 4 lo siguen siendo en HTML 5.

Además de los elementos H1-H6 tradicionales aparecen los elementos SECTION, ARTICLE, HEADER, HGROUP, FOOTER, ASIDE, NAV.

Todos ellos actúan de forma similar a un elemento DIV, pero con la diferencia de poseer significación semántica e influencia en la secuencia de encabezados.

Cada uno tiene su propósito, por lo que para bloques sin significación semántica deberá seguir utilizándose el elemento DIV.

Saber más:

Ejemplos

Para la siguiente secuencia de encabezados:

  1. Título de página / Subtítulo de página
    1. Título de navegación (1)
    2. Título de navegación (2)
    3. Título de contenido / Subtítulo de contenido
      1. Epígrafe 1.1
        1. Epígrafe 1.1.1
      2. Epígrafe 1.2
      3. Epígrafe 2.1
        1. Epígrafe 2.1.1
        2. Epígrafe 2.1.2
    4. Título de ASIDE
    5. Título de FOOTER

Tendriamos el código:

<body>
  
  <header>
    <hgroup>
      <h1>Título de página</h1>
      <h2>Subtítulo de página</h2>
    </hgroup>
  </header>
  
  <nav>
    <h1>Título de navegación (1)</h1>
    <ul>[...]</ul>
    
    <h1>Título de navegación (2)</h1>
    <ul>[...]</ul>
  </nav>
  
  <article>
    
    <header>
      <hgroup>
        <h1>Título de contenido</h1>
        <h2>Subtítulo de contenido</h2>
        <p><time datetime="2009-10-22T18:00-01:00" pubdate="pubdate">Domingo, 31 de octubre de 2010, 18 h. 30 min.</time></p>
      </hgroup>
    </header>
    
    <footer>
      <p><a href="#">Volver a página anterior</a></p>
    </footer>
    
    <section>
      <h1>Epígrafe 1.1</h1>
      [texto]
      <h2>Epígrafe 1.1.1</h2>
      [texto]
      <h1>Epígrafe 1.2</h1>
      [texto]
    </section>
    
    <section>
      <h1>Epígrafe 2.1</h1>
      [texto]
      <section>
        <h1>Epígrafe 2.1.1</h1>
      </section>
      <section>
        <h1>Epígrafe 2.1.2</h1>
      </section>
    </section>
    
    <footer>
      <p><a href="#">Volver a página anterior</a></p>
    </footer>
    
  </article>
  
  <aside>
    <h1>Título de aside</h1>
    [contenidos relacionados]
  </aside>
  
  <footer>
    <h1>Título de footer</h1>
    [texto]
  </footer>
</body>
Ejemplo secuencia de encabezados

Ejemplo de secuencia de encabezados.

Validación de secuencia de encabezados

Existen extensiones para Chrome / Chromium y para Opera (11) que validan secuencia de encabezados en HTML 5:

Elementos estructurales

Compartir este artículo:

  • Compartir en del.icio.us
  • Compartir en Technorati
  • Añadir a Google Bookmarks
  • Compartir en Google Buzz

Datos del artículo:

Comentarios de la página

Puedes comentar o hacer trackback desde tu propio sitio web.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Todavía no hay comentarios.

Hacer un comentario