Outbook

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

Datos de búsqueda

HTML 5: Secuencia de encabezados y elementos estructurales

Elemento HGROUP

Éste elemento ha sido propuesto para su eliminación, por lo que no debería utilizarse

El elemento HGROUP representa el encabezado de una sección, agrupando únicamente elementos de encabezado H1-H6 cuando necesite varios niveles para contener títulos secundarios, títulos alternativos, etc.

Para la secuencia de encabezado del documento se toma como texto de encabezado el contenido elemento H1-H6 de mayor rango, o si no hubiera ninguno de esos elementos, el texto contenido en el elemento HGROUP.

Saber más: hgroup – heading group (enlace externo, en inglés).

Ejemplos

En ocasiones nos encontramos con títulos de página que contienen a continuación un subtítulo, que debería formar parte del encabezado, pero que se deja fuera para que dicho encabezado no sea excesivamente largo (en este caso un párrafo tras el encabezado):

  1. H1 – Título de página
    1. P – Subtítulo
    2. H2 – Contenido 1
    3. H2 – Contenido 2

Otra opción es añadir el subtítulo como encabezado, pero será un encabezado fantasma y distorsionará la secuencia de encabezados:

  1. H1 – Título de página
    1. H2 – Subtítulo
    2. H2 – Contenido 1
    3. H2 – Contenido 2

O se podría cambiar a H3 los encabezados de contenidos, pero estarían bajo un encabezado que no les corresponde:

  1. H1 – Título de página
    1. H2 – Subtítulo
      1. H3 – Contenido 1
      2. H3 – Contenido 2

De las soluciones expuestas la adecuada sería que el subtítulo fuese un párrafo.

Pero en HTML 5 queda la alternativa del elemento HGROUP:

  1. HGROUP – Título de página
    1. H2 – Contenido 1
    2. H2 – Contenido 2

Quedando el siguiente código:

<header>
  <hgroup>
    <h1>Título de página</h1>
    <h2>subtítulo de página</h2>
  </hgroup>
  [Otros elementos de la cabecera]
</header>
<h2>Contenido 1</h2>[...]
<h2>Contenido 2</h2>[...]

Ejemplo de uso de HGROUP

Ejemplo de HGROUP en secciones dentro de un artículo:

<article>
  <section>
    <hgroup>
      <h1>Título de encabezado de la sección 1</h1>
      <h2>Subtítulo de encabezado</h2>
    </hgroup>
    <p>Texto de la sección 1</p>
  </section>

  <section>
    <hgroup>
      <h1>Título de encabezado de la sección 2</h1>
      <h2>Subtítulo del encabezado</h2>
    </hgroup>
    <p>Texto de la sección 2</p>
  </section>
</article>

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.

Hay un comentario a “Elemento HGROUP”

Jose Miguel dice:

Fecha de comentario: 2012/06/18 19:04

Gracias por la informacion, hace poco que me entere que el tamaño del titulo era importante en el seo, y estaba un poco perdido, esto ha aclarado mis dudas.

Hacer un comentario