Usar varias etiquetas H1 en una web HTML5. Tutorial gratis

+900 cursos gratis nuevos Diciembre 2018!!

Usar varias etiquetas H1 en una web HTML5

Tanto si eres webmaster como diseñador web, hay una cuestión que seguramente has preguntado o respondido en numerosas ocasiones:

¿Cuántas etiquetas <h1> puedo usar en cada página, y cómo implementarlas?

Generalmente hay dos razones por las que se cuestiona esta pregunta. La primera y más común está relacionada con el SEO: asegurarnos que el contenido se formatee lo mejor posible para mejorar la indexación en los motores de búsqueda. La segunda es por corrección técnica: que el marcado se escriba de acuerdo a las especificaciones del W3C.

Con la entrada en escena de HTML5 la respuesta a esta pregunta ha cambiado significativamente tanto en el ámbito SEO como en el técnico. Ahora no sólo es posible tener múltiples encabezados de nivel 1 (<h1>) por página que serán tenidos en cuenta por los motores de búsqueda, sino que es la pauta recomendada.

Sin embargo, dado que las especificaciones HTML5 todavía no han sido ampliamente asimiladas, continúa habiendo consejos -algunos escritos muy recientemente- basados en la reglas del diseño web pre-HTML5.

En este tutorial, basado en el de Kezz Bracey, vamos a aclararte algunas ideas equivocadas. Veremos en profundidad el significado de las etiquetas <h1> en HTML5 y cómo beneficiarte de las mejoras introducidas en HTML5, que nos permitirán crear páginas web más correctas semántica y estructuralmente.

Usar varias etiquetas H1, teoría e historia

Durante mucho tiempo se consideró una de las reglas cardinales de HTML y SEO que cada página de un sitio web debía tener un único encabezado <h1>. Además, la regla establecía que este único <h1> debía denotar la temática principal de esa página.

Esta regla fue ampliamente seguida con la intención de ayudar a los motores de búsqueda a entender mejor el propósito principal de cada página, de modo que pudieran determinar su relevancia para criterios de búsqueda variados, mejorando la precisión de las búsquedas y, por tanto, mejorar las posiciones de los sitios web bien elaborados.

Consideremos un ejemplo de tienda online pre-HTML5. En este ejemplo el nombre de la tienda se muestra en la cabecera de todas las páginas, la página principal presenta una descripción del comercio, y en otra área del sitio se publican artículos especializados.

Cumpliendo la normal de "una única etiqueta <h1>", la página inicial de esta web tiene las etiquetas <h1> sobre el nombre del comercio, en la cabecera, indicando que el comercio en sí es lo más relevante de esa página.


Sin embargo, en un artículo publicado en cualquier otro lugar de ese sitio web, las etiquetas <h1> se quitan del nombre del negocio en la cabecera y en su lugar se sitúan en el título del artículo. Esto se hace porque el título del artículo proporciona una etiqueta mucho más representativa de la temática de esa página, que ahora es el contenido del artículo en lugar de la descripción del negocio, que lo fue en la página principal.

Una versión pre-HTML5 de esta web se maquetaría de forma más o menos así:

Ejemplo de sitio web pre-HTML5. Página principal
<body>
   <div>
      <h1>Nombre de la empresa</h1><!-- El título se corresponde con la principal temática de la página -->
   </div>
   <div>
      <p>Descripción del negocio 
[ .... ]</p>
   </div>
</body>
Ejemplo de sitio web pre-HTML5. Página de un artículo
<body>
   <div>
      <p>Nombre de la empresa</p><!-- ya no es el asunto de más importancia de la página, por lo que se le quita el encabezado h1 -->
   </div>
   <div>
     <h1>Título del artículo</h1><!-- asunto principal de la página marcado con h1 -->
     <p>Contenido del artículo 
	 [ .....]
	 </p>
   </div>
</body>

Directorio de cursos para encontrar trabajoCursos de desarrollo web
En nuestro directorio privado encontrarás muchos cursos de desarollo web con los que aprenderás estas y otras cuestiones relacionadas con el esquema web.

¿Por qué los encabezados importan? Los esquemas del documento

Las etiquetas <h1> nunca han sido un elemento que trabaje aisladamente, con independencia del resto del documento. Hay un motivo por el que es importante dónde colocar la etiqueta de encabezado, tanto en la era pre-HTML5 como en la HTML5: la generación de los resúmenes o esquemas del documento.

Los esquemas de documentos son una especie de tabla de contenido de un sitio web. Se generan automáticamente a partir del marcado de cualquier página.

Con anterioridad a HTML5, los resúmenes de documentos se generaban a partir de las etiquetas de encabezado, desde <h1> hasta <h6>. Cada aparición de un encabezado implicaría el comienzo de una nueva sección de contenido.

Tomemos como ejemplo el siguiente html y fijémonos en el emplazamiento de las etiquetas <h1>, <h2> y <h3>, que determinarán el resumen del documento:

Ejemplo de marcado Pre-HTML5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <title>Ejemplo de marcado Pre-HTML5</title>
   </head>
   <body>
      <h1>Uso adecuado de los cacahuetes</h1>
      <h2>Cómo comer cacahuetes</h2>
      <p>Los cacahuetes se pueden comer con sal.</p>
      <p>Este es un uso adecuado de cacahuetes.</p>
      <h3>Formas magistrales de comer cacahuetes</h3>
      <p>Los cachuetes están mucho más buenos cuando se combinan con chocolate.</p>
      <p>Recomendamos este método para obtener los mejores resultados</p>
      <h2>Uso incorrecto de los cacahuetes</h2>
      <p>Los cacahuetes no se deben introducir en los parquímetros.</p>
      <p>No serán todo lo efectivos posible.</p>
   </body>
</html>

Antes de HTML5, el marcado de arriba generaría un esquema del documento como este:

  • 1. (documento) El uso apropiado de los cacahuetes
    • 1. (h2) Cómo comer cacahuetes
      • 1. (h3) Métodos magistrales para comer cacahuetes
    • 2. (h2) Usos inapropiados de los cacahuetes

El primer elemento <h1> se considera la etiqueta de todo el documento. Los encabezados posteriores se consideran etiquetas de las secciones del contenido, formando un árbol por debajo de él.

El ejemplo de arriba es bastante simple, pero en la web raramente es así. Cuando necesitamos representar un contenido más complejo lidiamos con los grandes problemas del marcado pre-HTML5 y el motivo por el que anteriormente era necesario emplear un único encabezado <h1> por página.

En el ejemplo de arriba tenemos un único asunto a discutir: "El uso apropiado de los cacahuetes". ¿Qué pasaría si esta cuestión aparece en una página con múltiples artículos igual de importantes, como sucede en un blog?

Veámos el siguiente html con dos artículos mostrados (cada uno envuelto en etiquetas <div>):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <title>Ejemplo de marcado Pre-HTML5</title>
   </head>
   <body>
      <div>
         <h1>El uso apropiado de los cacahuetes</h1>
         <h2>Cómo comer cacahuetes</h2>
         <p>Los cacahuetes se pueden comer con sal.</p>
         <p>Este es un uso correcto de los cacahuetes.</p>
         <h3>Métodos magistrales para comer cacahuetes</h3>
         <p>Los cacahuetes están muchísimo más buenos cuando se combinan con chocolate.</p>
         <p>Recomendamos este método para obtener el mejor resultado.</p>
         <h2>Uso incorrecto de los cacahuetes</h2>
         <p>Los cacahuetes no se deben emplear en los parquímetros.</p>
         <p>No serán todo lo efectivos posible.</p>
      </div>
      <div>
         <h1>Hervir habas</h1>
         <h2>¿Vale la pena hervir las habas?</h2>
         <p>Seamos honestos, cuesta una eternidad.</p>
         <p>En su lugar, recomendamos comprar habas enlatadas.</p>
      </div>
   </body>
</html>

Antes de HTML5, este marcado habría generado el siguiente esquema:

  • 1. (documento) El uso apropiado de los cacahuetes
    • 1. (h2) Cómo comer cacahuetes
      • 1. (h3) Métodos magistrales para comer cachuetes
    • 2. (h2) Uso incorrecto de los cacahuetes
  • 2. (h1) Hervir habas
    • 1. (h2) ¿Vale la pena hervir las habas?

Ahora, con dos artículos igual de importantes en la página, el encabezado del primer artículo "El uso apropiado de los cacahuetes" se interpreta como la etiqueta representativa de todo el documento simplemente porque es el primer encabezado que se ha encontrado. Esto implica que toda la temática de esta página sea "El uso apropiado de los cacahuetes" aún cuando el segundo artículo trata de un asunto completamente distinto.

La forma típica de evitar esto era crear encabezados <h1> donde apareciesen secciones de contenido de igual importancia, en un intento de representarlas todas con la misma relevancia. Por ejemplo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <title>Ejemplo de marcado Pre-HTML5</title>
   </head>
   <body>
      <div>
         <h1>Blog de literatura leguminosa</h1>
      </div>
      <div>
         <h2>El uso apropiado de los cacahuetes</h2>
         <h3>Cómo comer cacahuetes</h3>
         <p>Los cacahuetes se pueden comer con sal.</p>
         <p>Este es un uso correcto de los cacahuetes.</p>
         <h4>Métodos magistrales para comer cacahuetes.</h4>
         <p>Los cacahuetes están muchísimo más buenos cuando se combinan con chocolate.</p>
         <p>Recomendamos este método para obtener el mejor resultado.</p>
         <h3>Uso incorrecto de cacahuetes</h3>
         <p>Los cacahuetes no se deberían emplear en los parquímetros.</p>
         <p>No serán todo lo efectivos posible.</p>
      </div>
      <div>
         <h2>Hervir habas</h2>
         <h3>¿Vale la pena hervir las habas?</h3>
         <p>Seamos honestos, se tarda una eternidad.</p>
         <p>En su lugar, recomendamos habas enlatadas.</p>
      </div>
   </body>
</html>

Observa el empleo generalizado de etiquetas <h1>, y la degradación de cada encabezado a partir del primer nivel.
El esquema que generaría este documento es:

  • 1. (document) Blog de literatura leguminosa
    • 1. (h2) Uso correcto de los cacahuetes
      • 1. (h3) Cómo comer cacahuetes
        • 1. (h4) Métodos magistrales para comer cacahuetes
      • 2. (h3) Uso inapropiado de los cacahuetes
    • 2. (h2) Hervir habas
      • 1. (h3) ¿Vale la pena hervir las habas?

Problemas ocasionados por los esquemas pre-HTML5

El esquema de este documento, aún siendo la mejor representación que se podía hacer antes de HTML5, tiene algunos problemas muy importantes:

  • La etiquetación generalizada a lo largo de la página diluye la relevancia.
  • Tenemos el título, encabezado con <h1>, "Blog de literatura leguminosa", actuando como etiqueta de toda la página pero ese texto encabezado da sólo una representación generalizada del contenido. Esto diluye la capacidad de los motores de búsqueda para interpretar el asunto de la página y su relevancia para las frases de búsqueda.
  • Los artículos independientes se interpretan como subsecciones de una única pieza de contenido.
  • No hay ninguna forma de distinguir entre dos artículos igual de importantes en la misma página. Ambos son vistos como parte de una única pieza de contenido, aunque no lo sean.
  • Se precisa distinto marcado para distintas zonas del sitio.
  • Si un visitante visualizara uno de los artículos en sí, como sucede en un blog, el marcado debería ser rehecho de modo que la etiqueta <h1> se aplicara al título del artículo en lugar de al título de toda la web, como se ilustró con el ejemplo de la web de un comercio en la sección anterior.
  • Hay restricciones en la naturaleza de la etiqueta del documento y el título del sitio.
  • En muchas ocasiones el título de un sitio, (que tiende a jugar el rol de etiqueta del documento incluso en HTML5), no debería referirse significativamente al contenido de una página. Por ejemplo, tengo que poner en marcha un blog con el título "Kelly dice" y mostrará un artículo sobre codificación HTML y otro sobre mascotas. En este caso no tendría sentido que el título del sitio sea representativo ni tampoco que lo sea en ninguno de estos artículos, de modo que tendría que cambiar el nombre de mi blog. Esto puede ser un problema, particularmente si un sitio desea hacer marca con un nombre que debe ser memorizable pero que no aporte ningún significado.

Aquí es donde aparece HTML5 y soluciona todos y cada uno de estos problemas.

El algoritmo de esquemas de HTML5

Si consideras cada uno de los problemas descritos arriba, todos tienen un común -y en cierto modo sencillo- origen: la asunción de que cada página web es un documento con un único tema que requiere de una única etiqueta.

La igualmente sencilla solución a estos problemas vendría de la capacidad de indicar si una página web tiene secciones discretas, con múltiples temas cada una y con su propia etiqueta significativa.

Si fuera posible indicar que cada artículo de una página sea independiente, podríamos etiquetarlos con encabezados significativos que representen su contenido con precisión, dándoles a cada uno de ellos la misma importancia.

Si fuera posible hacerlo claramente cuando el título de un sitio no sea representativo del contenido de una página, el problema de diluir la relevancia se habría solucionado.

Con una clara diferenciación de los títulos del documento y artículos, ya no sería necesario cambiar el marcado en función de cada área: un título de página marcado con un <h1> podría mantener sus etiquetas <h1> a lo largo del sitio.

Y dado que habría que aclarar si el título del sitio es o no representativo del contenido del artículo, sería posible prescindir por completo de él.

HTML5 hace todo esto posible mediante la introducción de elementos semánticos y su algoritmo de esquema.

Aspectos clave del algoritmo de esquema de HTML5

Mientras que el esquema del documento antes de HTML5 se representaba puramente a partir de las etiquetas, el algoritmo de esquemas de HTML5 emplea los siguientes aspectos clave:

Raíz de seccionado
una raíz de seccionado es un contenedor que proporciona un ámbito para las secciones de contenido discreto que se definen dentro de él. Cada raíz de seccionado obtiene su propio esquema individual. La raíz de seccionado principal de cualquier página está formada por las etiquetas <body>, de manera que siempre se genera un esquema para cualquier página web, que comienza en las etiquetas <body> y que recorre todas las secciones en que éste se divide.
Las etiqueas de raíz de seccionado son: <body>, <blockquote>, <figure>, <td>, <details>, <dialog>, <fieldset>
Seccionado de contenido
Cada raíz de seccionado se divide en secciones de contenido. Estas secciones se crean posicionaondo las etiquetas de seccionado de contenido sobre partes del contenido. Los elementos de seccionado de contenido son anidables y semánticas. El tipo que debería emplearse depende de la naturalez del contenido que representará. (Más adelante veremos cómo emplear cada elemento de seccionado de contenido).
Las etiquetas de seccionado de contenido son: <section>, <article>, <nav>, <aside>
Contenido de encabezamiento
Etiquetas de texto para las secciones de contenido. En ausencia de etiquetas de de seccionado de contenido, la presencia de una etiqueta de encabezamiento se interpreta como el comienzo de una nueva sección de contenido.
Las etiquetas de encabezamiento son: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Entender cómo se utilizan estos aspectos de HTML5 es relativamente sencillo, el proceso generalmente es más o menos así:

  • La raíz de seccionado del documento se forma con sus etiquetas <body>.
  • Dentro de esta raíz de seccionado, el documento se divide en secciones de contenido, por ejemplo envolviendo artículos con las etiquetas <article>.
  • Las etiquetas de encabezamiento se colocan en las secciones de contenido según sea necesario, actuando la primera etiqueta de encabezado de cada sección como etiqueta para esa sección.

Hay otros muchos aspectos en el algoritmo de esquemas de HTML5. En la W3C hay mucha información al respecto.

Sin embargo, solo con las consideraciones mencionadas, seremos capaces de solventar todos los problemas descritos en la sección anterior de este tutorial.

Resolviendo los problemas del anterior esquema de documentos

Echemos otro vistazo a nuestro "Blog de literatura leguminiosa", como si pudiera ser maquetado empleando HTML5. Hemos realizado las siguientes simples modificaciones:

  • <!DOCTYPE html> añadido para declarar HTML5
  • Se han añadido etiquetas <article> envolviendo cada artículo, reemplazando las genéricas etiquetas <div>
  • Los encabezados del artículo se han cambiado de <h2> a <h1>
  • El resto de etiquetas de encabezamiento se han modificado por las del nivel inmediatamente superior a cada una.
  • Se emplea un título del sitio que hace referencia a la marca y que no aporta significado

Ahora el algoritmo de esquema de HTML5 nos daría lo siguiente:
1. (document) Whackamoon Legumes!
1. (article) The proper use of peanuts
1. (h2) How to eat peanuts
1. (h3) Superior peanut eating methods
2. (h2) Incorrect application of peanuts
2. (article) Boiling beans
1. (h2) Is boiling beans really worth it?
Lo primero que podrías identificar es la aparición en el esquema del elemento <article> junto a los encabezados de cada uno de nuestros artículos.

Observa que en HTML5 las etiquetas <article> son específicas para indicar "una composición, completa o auto completa, en un documento, página, aplicación o sitio que es, a priori, distribuida independientemente, o reutilizable, por ejemplo en sindicación. Esto podría ser una respuesta en un foro, un artículo en una revista o periódico, una entrada de un blog, un comentario enviado por un usuario, un elemento interactivo, o cualquier otra pieza de contenido independiente." (fuente: W3C)

La aparición del elemento (article) a continuación de los encabezamientos del artículo, en lugar de las etiquetas de encabezado como vimos anteriomente, nos indican que en el esquema está ocurriendo lo siguiente:

Cada artículo ha sido reconocido como un parte de contenido con idéntica relevancia cada uno.
Los titulares del artículo ahora encajan correctamente con el contenido, como etiquetas significativas que representan el asunto.
Dado que los artículos han sido etiquetados correctamente con sus propios encabezados, el título del sitio ya no está siendo interpretado como representativo para el contenido en esos artículos.

Esto significa que todos los problemas que subrayamos anteriormente en este tutorial se han resuelto de golpe:

  • Solucionado: La etiquetación generalizada a lo largo de toda la página diluye la relevancia.
    Ya no hay pérdida de relevancia, en tanto que cada etiqueta está claramente asociada para cada artículo.
  • Solucionado: artículos independientes son interpretados como subsecciones de una única pieza de contenido.
    La página ya no es interpretada como una única pieza de contenido, dado que la presencia de las etiquetas <article> indica que la página se divide en secciones independientes.
  • Solucionado: Se requiere distinto lenguaje de marcado para cada área de la web.
    Dado que las etiquetas <h1> empleadas en la maquetación ahora se interpretan con corrección y ya no tenemos que preocuparnos sobre la pérdida de relevancia de las etiqeutas, ya no necesitaremos aplicar etiquetas distintas para el título del sitio sino que puede continuar etiquetado con <h1> en todas las páginas.
  • Solucionado: Hay restricciones en la naturaleza de la etiqueta del documento/título del sitio.
    En tanto que el título del sitio ya no es interpretado como una etiqueta para el contenido del artículo, somos libres de configurarlo como queramos. Ya no necesita actuar como un "atrapa-todo" que sea representativo de todo el contenido de la página, de modo que puede ser tanto un concepto abstracto como una marca que no tenga relación alguna con el contenido del artículo.

Por qué es correcto emplear múltiples etiquetas <h1>

Puede verse, a partir del esquema generado por nuestro marcado, que es perfectamente correcto emplear tantas etiquetas <h1> como se requiera; esto es una por cada raíz de seccionado o sección de contenido.

A partir de este ejemplo también puede observar cómo sería menos correcto configurar una única etiqueta <h1>, y que la configuración con múltiples etiquetas <h1> representan el contenido con más precisión.

Si todavía tenías las etiquetas <h1> aplicándose únicamente en el título del sitio, y las etiquetas <h2> en el título de los artículos, el esquema de tus artículos podría venirse abajo.

Esto se debe a que etiquetar los titulares de los artículos con <h2> equivale a que son encabezados de nivel dos, aunque actúen como nivel uno dentro del ámbito de la sección definida por el <article>.

En cambio, los encabezados de segundo nivel de tus artículos se marcarían necesariamente con etiquetas <h3> incorrectas, los de tercer nivel con etiquetas de cuarto nivel, y así sucesivamente.

Las especificaciones HTML5 permiten emplear encabezados menores que <h1> para etiquetar una sección, y en ocasiones puedes quererlo por motivos de visualización, como mostrar un encabezado más pequeño en un lateral. Sin embargo, recomendaría hacer esto únicamente en el caso de secciones de contenido de menor relevancia de tu sitio donde no sea una prioridad para los niveles de encabezamiento generar un esquema del documento que represente efectivamente una tabla de contenido.

Lo mejor que puedes hacer en todos estos casos es considerar cuidadosamente el contenido y determinar la mejor forma de seccionarlo y etiquetarlo en base a lo que sabes sobre el algoritmo de esquematización de HTML5.

Nuevas reglas de uso de las etiquetas <h1> en HTML5

Sí, es verdad. Con HTML5 puedes emplear tantas etiquetas <h1> como sea necesario. Pero esto no significa que puedan usarse a tu antojo arbitrariamente.

Así como había reglas de uso en el anterior esquema de documento, también hay nuevas reglas basadas en el algoritmo de esquemas de HTML5.
A simple vista:

Emplea un conjunto de etiquetas <h1> por raíz de seccionado.
Siempre debe haber un nivel de encabezado <h1> entre la apertura de <body> y la primera sección de contenido, que etiquete todo el contenido.
Cuando un encabezado <h1> deba etiquetar una sección de conteniod, debería ser el primer encabezado que aparezca en la sección, porque el primer encabezado siempre se interpreta como la etiqueta de la sección.
Si una etiqueta de nivel <h1> se emplea para etiquetar una sección de contenido, cualquier otro encabezado empleado en esa sección debería ser H2 o inferior para crear un esquema correcto.
Como mencioné anteriormente, las etiquetas de secciones no están obligadas a tener etiquetas <h1>. Las especificaciones HTML5 permiten que cualquier encabezado actúe como etiqueta de la sección, desde <h1> hasta <h6>. No obstante, siempre recomiendo encabezados de nivel 1 para maquetar el contenido de un artículo.

Pero si decides emplear otra etiqueta en lugar de <h1> para etiquetar una sección, asegúrate de seguir las mismsa reglas mencionadas anteriormente, reemplazando <h1> en cada regla por la etiqueta que hayas elegido.

Sobre las etiquetas de seccionamiento de contenido

Aunque sólo hay cuatro juegos de etiquetas que puedes emplear para denotar secciones de contenido en tu página web, puede ser un poco difícil de asimilar al principio. Son:
<article>, <section>, <nav>, <aside>

Las dos que más emplearás son las etiquetas <article> y <section>. Son muy similares, pero con una diferencia importante:

Las etiquetas <article> deben emplearse donde una pieza de contenido pueda quitarse por completo de la página pero continuar teniendo significado por sí misma sin contenido contextual.

Por otra parte, las etiquetas <section> deberían emplearse para contenido que se agrupa de acuerdo a una temática, pero sólo tiene sentido en el contexto que le rodea.
Para ejemplos más detallados sobre cómo usar cada una de estas etiquetas, dirígite a estas páginas del W3C:

The Article Element
The Section Element

Las etiquetas <nav> se han diseñado para indicar bloques de navegación en una página web, como la barra de menú o paginación. No deben aplicarse a enlaces regulares, sólo a secciones significativas que estén dedicadas específicamente a la navegación.

Las etiquetas <aside> pueden definirse como "cualquier otro" elemento del contenido que no sea ni <article>, ni <section> ni <navigation>. El W3C recomienda emplear esta etiqueta cuando algo está tangencialmente relacionado con el contenido que le rodea pero separado del contenido principal de una página, como pasa en las barras laterales, etc.

Para ampliar información sobre las etiquetas <nav> y <aside>, visita:

Consejo rápido: tratar con temas

Ahora sabemos que HTML5 puede emplear con normalidad etiquetas <h1> tanto en el título de nuestro sitio como en cualquier área. Sin embargo, pese a ser una práctica común, técnicamente hablando las etiquetas <h2> no deberían utilizarse en subencabezados o lemas solitarios.

El W3C dice:

Los elementos h1–h6 no deben emplearse para marcar subencabezados, subtítulos, títulos alternativos y lemas a menos que se pretenda que sean el encabezado de una nueva sección o subsección.

La razón por la que esto es así es que el esquema de documento de HTML5 siempre interpreta una etiqueta de encabezado como el principio de una nueva sección de contenido, tanto si las etiquetas de sección de contenidos están o no envueltas a su alrededor.

Durante mucho tiempo hubo una solución alternativa que proponía emplear etiquetas <h2> para lemas si estaban agrupadas con el encabezamiento principal dentro de un juego de etiquetas <hgroup>. Sin embargo, <hgroup> se ha eliminado de las especificaciones de HTML5 y su uso causará errores en las validaciones.

De tal manera, la mejor forma de trabajar con temas es emplear etiquetas <div> o <p> y aplicar CSS para que parezcan lemas, consiguiendo nuestro propósito sin afectar negativamente al esquema del documento.

Elementos HTML5 adicionales que podemos emplear

En este tutorial hemos estado centrándonos en el uso de etiquetas <h1> en HTML5 y en cómo funciona el nuevo algoritmo de esquema de documento. Por esta razón no se ha hablado sobre cualquier elemento HTML5 que no sea evaluado por el algoritmo de esquema.

Sin embargo, sería descuidado si no te señalo en la dirección correcta sobre unos pocos de las etiquetas más valoradas que puedes emplear en el marcado para que sea más correcto semánticamente.

El elemento <main>

Debe emplearse un elemento <main> por página para indicar el área de contenido principal de la página.

Si muestras un grupo de dos artículos, envolvería a los mismos. Por ejemplo:

<!DOCTYPE html>
<html>
   <head>
      <title>Ejemplo de marcado HTML5</title>
   </head>
   <body>
      <h1>Mis legumbres favoritas</h1>
      <main>
         <article>
            <h1>Uso apropiado de los cacahuetes</h1>
            <h2>Cómo comer cacahuetes</h2>
            <p>Los cacahuetes se pueden comer con sal.</p>
            <p>Este es un uso adecuado de cacahuetes.</p>
            <h3>Formas magistrales de comer cacahuetes</h3>
            <p>Los cachuetes están mucho más buenos cuando se combinan con chocolate.</p>
            <p>Recomendamos este método para obtener los mejores resultados</p>
            <h3>Uso incorrecto de los cacahuetes</h3>
            <p>Los cacahuetes no se deben introducir en los parquímetros.</p>
            <p>No serán todo lo efectivos posible.</p>
         </article>
         <article>
            <h1>Hervir habas</h1>
            <h2>¿Vale la pena hervir las habas?</h2>
            <p>Seamos honestos, tarda una eternidad.</p>
            <p>Recomendamos comprar habas enlatadas.</p>
         </article>
      </main>
   </body>
</html>

Más información sobre el elemento main.

El elemento <header>

El elemento header puede emplearse al comienzo de cualquier raíz o sección de contenido para agrupar el contenido introductorio de esa sección.

Puede emplearse para agrupar el título y resumen, o el título de un artículo de un blog y su categoría. Por ejemplo:

<!DOCTYPE html>
<html>
   <head>
      <title>Ejemplo de marcado HTML5</title>
   </head>
   <body>
      <header>
         <h1>¡Mis legumbres favoritas!</h1>
         <p>Nos encantan las habas</p>
      </header>
      <main>
         <article>
            <header>
               <h1>Hervir las habas</h1>
               <p>Categoría: Habas</p>
            </header>
            <h2>¿Vale la pena hervir las habas?</h2>
            <p>Seamos honestos, se tarda una eternidad.</p>
            <p>Recomendamos comprar habas enlatadas.</p>
         </article>
      </main>
   </body>
</html>

Más información: el elemento header.

El elemento <footer>

El elemento footer es básicamente la inversa del elemento <header>, en tanto que puede emplearse en el final de cualquier raíz y sección de contenido, para agrupar contenido adicional de esa sección.

El W3C recomienda emplearlo para aspectos como información sobre el autor, enlaces, mensajes de copyright, etc. Por ejemplo:

<!DOCTYPE html>
<html>
   <head>
      <title>Ejemplo de marcado HTML5</title>
   </head>
   <body>
      <header>
         <h1>!Mis legumbres favoritas!</h1>
         <p>Nos encantan las habas</p>
      </header>
      <main>
         <article>
            <header>
               <h1>Hervir habas</h1>
               <p>Categoría: Habas</p>
            </header>
            <h2>¿Vale la pena hervir las habas?</h2>
            <p>Seamos honestos, se tarda una eterniadad.</p>
            <p>Recomendamos comprar habas enlatadas.</p>
            <footer>
               <a href="../">Volver al inicio</a>
            </footer>
         </article>
      </main>
      <footer>
         <p>Copyright ¡Mis habas favoritas! 2014</p>
      </footer>
   </body>
</html>

Más información: el elemento footer.

Todo junto

Ejemplo de página principal en HTML5
<body>
   <header>
      <h1>Nombre de la empresa</h1>
   </header>
   <section>
      Descripción del negocio
      [...]
   </section>
</body>
Ejemplo de página de un artículo en HTML5
<body>
<header>
   <h1>Nombre de la empresa</h1>
</header>
<article>
   <h1>Título del artículo</h1>
   <p>Contenido del artículo
   [...]
   </p>
</article>
</body>

Este sencillo ejemplo muestra lo fácil que es emplear y comprender el algoritmo de documentos HTML5 para solucionar los antiguos problemas sobre las etiquetas <h1> y para asegurarnos de que el contenido de nuestras páginas sea más preciso que nunca.

Lecturas recomendadas

Te recomendamos que leas estas otras guías para implementar correctamente todas las etiquetas que conforman la estructura de una página web:

Herramientas recomendadas

Heading Map 2.0.5 para Firefox
Esta extensión genera un mapa de documento o índice de cualquier documento HTML5 estructurado con cabeceras o secciones. Muestra la estructura de los encabezados, los errores en la estructura (ej.: niveles incorrectos) y también resalta los elementos.
HTML5 Outliner para Chrome
Esta extensión emplea el algoritmo de resúmenes de HTML5 para crear una tabla de contenido. El contenido de la tabla es clickable e ilumina el encabezado o sección en cuestión tras el salto.

Otros Cursos que te Pueden Interesar

Formación OnlineAutor: Formación Online | Plataforma web para promoción de cursos online gratuitos, tutoriales, guías de formación y herramientas de e-Learning.
(3 votos, media: 5,00 de 5)

Puntúa este artículo sobre el curso, deja un comentario o ¡compártelo!

Un comentario en “Usar varias etiquetas H1 en una web HTML5. Tutorial gratis

  1. Vixtorman dijo

    Estupendo artículo, muy interesante. Muchas gracias por compartirlo.

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Acepto la política de privacidad

Responsable: Activo Marketing Solutions SL

Finalidad: Gestión y moderación de comentarios.

Legitimación: Consentimiento del interesado.

Destinatarios: Proveedor de hosting de la web en EU, Raiola Networks SL, cuyos niveles de protección son adecuados según Comisión de la UE. Ver política de privacidad de Raiola Networks.

Derechos: acceder, rectificar, limitar y suprimir tus datos.

Es imprescindible introducir los datos de carácter personal del formulario para poder atenderte a través de los comentarios. Puedes ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en info(arroba)formaciononline.eu, así como el derecho a presentar una reclamación ante una autoridad de control. *