HTML5

¿Se puede utilizar más de un <h1> en HTML5?

Concha Alviz | 15 octubre, 2016 | 12:09 pm

Hasta hace relativamente poco tiempo, solo existían dos verdades universales a las que sujetarte en este mundo caótico: que el sol sale cada mañana por el este y que en todo documento html debía existir SOLO un Heading 1, es decir, solo debíamos utilizar una etiqueta <h1>. El caso es que, desde hace unos años, concretamente desde la llegada de HTML5, solo podemos fiarnos del sol. Aún hoy, HTML5 se me antoja un lenguaje útil pero tremendamente confuso, y este asunto de los <h1> es muestra más de lo ambiguo que puede resultar el tema.

Antes de la aparición de HTLM5, la estructura de nuestras páginas solía ser de este tipo:

<!DOCTYPE html>
<html>
 <head>
  <title>El título de la página</title>
 </head>
 <body>
  <div id="header">
   <h1>El título supremo de la página</h1>
  </div>
  <div id="content">
   <h2>Título menos importante</h2>
   <h2>Título menos importante</h2>
   <h2>Título menos importante</h2>
   <h2>Título menos importante</h2>
  </div>
  <div id="sidebar">
   <h3>Título menor</h3>
   <h3>Título menor</h3>
   <h3>Título menor</h3>
   <h3>Título menor</h3>
  </div>
  <div id="footer">
   <h4>Título que nadie lee</h4>
   <h4>Título que nadie lee</h4>
   <h4>Título que nadie lee</h4>
  </div>
 </body>
</html>

En definitiva, solo un <h1> en toda la página y títulos de menor importancia, y jerarquizados, para las secciones que la conformaban. La etiqueta <h1> era (y es) muy importante a nivel de SEO y posicionamiento, ya que era la que conformaba la temática esencial de nuestra página. Sin embargo, la mayoría de veces esta etiqueta se destinaba a el nombre o marca de la página — ¿acaso hay algo más importante? — que no siempre coincidía — de hecho, ¿cuándo lo hace? — con la temática de la página.

Por ejemplo, imaginemos que tenemos un blog de cocina llamado «Donde hay pan se moja», en el que acabamos de publicar un artículo con nuestra maravillosa receta de friajones con chorizo. Según el esquema superior, «Donde hay pan se moja», además de ser el <title> de nuestra página, será, lógicamente, nuestro codiciado <h1>. Sin embargo, realmente, lo más importante de nuestro artículo sería nuestra receta de Friajones con chorizo, que es, precisamente, lo que deberíamos destacar a nivel SEO. De hecho, nuestro
<h1> debería ser Friajones con chorizo… Aunque, ya lo es el título de nuestro blog de cocina, que también se lo merece, ¿no? ¡Qué lío!

Sin embargo, tras la aparición de HTML5, los problemas de ego de nuestros titulares tienen fácil solución. HTML5 admite que existan en una misma página varios <h1>, eso sí, utilizados con cabeza. La estructura del documento, de hecho, cambia sustancialmente:

Cada una de las etiquetas contenedoras (<header>, <footer>, <section>, <aside> y <article>) admiten titulares del <h1> al <h6>, por lo que podríamos tener estructuras de este tipo:

<!DOCTYPE html>
<html>
	<head>
		<title>El título de la página</title>
	</head>
	<body>
		<header>
			<h1>El título de la página</h1>
		</header>
		<section>
			<h1>Títular de la Sección</h1>
			<article>
				<header>
					<h1>Título del artículo</h1>
					<h2>Subtítulo</h2>
				</header>
				<p>Contenido del artículo</p>
				<footer>
				<!--Comentarios y material relacionado --->
				</footer>
			</article>
			<article>
				<header>
					<h1>Título del artículo</h1>
					<h2>Subtítulo</h2>
				</header>
				<p>Contenido del artículo</p>
				<footer>
				<!--Comentarios y material relacionado --->
				</footer>
			</article>
		</section>
		<aside>
			<!--Contenido del aside --->
		</aside>
		<footer>
			<!--Contenido del footer --->
		</footer>
	</body>
</html>

En el caso de nuestro blog de cocina, la estructura podría ser de este tipo:

<!DOCTYPE html>
<html>
	<head>
		<title>Donde hay pan se moja</title>
	</head>
	<body>
		<header>
			<h1>Donde hay pan se moja</h1>
		</header>
		<article>
			<header>
				<h1>Friajones con chorizo</h1>
			</header>
			<p>Contenido del artículo</p>
			<footer>
			<!--Comentarios y material relacionado --->
			</footer>
		</article>
		<aside>
			<!--Contenido del aside --->
		</aside>
		<footer>
			<!--Contenido del footer --->
		</footer>
	</body>
</html>

De esta manera, en nuestro artículo de recetas, tendríamos dos <h1>: uno en el <header> principal (el título del blog) y otro en el <header> de nuestro <article> (el título de la receta). De esta manera, en relación al SEO, destacamos tanto la información corporativa de nuestro blog como al artículo en cuestión, y todo está totalmente aceptado por la W3C.

Maravilloso, ¿verdad?