Esta duda se puede abordar de variadas maneras, pero nosotros te compartimos la que para nosotros es la respuesta más completa.
Solución:
Como digo en mi comentario y usted cita en el W3C, h1 es un encabezado y no un título. Cada elemento de sección puede tener su(s) propio(s) elemento(s) de encabezado. No puede pensar en h1 solo como el título de una página, sino como el encabezado de esa sección particular de la página. Al igual que la portada de un periódico, cada artículo puede tener su propio encabezado (o título).
Aquí hay un buen artículo sobre esto.
Yo recomendaría usar h1
a lo largo de. olvidarse de h2
mediante h6
.
En HTML4, los 6 niveles de encabezado se usaban para definir implícitamente las secciones. Por ejemplo,
This is a top-level heading
some content here
This is the heading of a subsection
content in the subsection
Another subsection begins here
content
another top-level heading
Ahora con el section
elemento, puede definir explícitamente las secciones en lugar de tener que depender de las secciones implícitas creadas por su navegador que lee los diferentes niveles de encabezado. Un navegador equipado con HTML5 sabe que todo dentro de un section
el elemento se “degrada” un nivel en el esquema del documento. Así por ejemplo un section > h1
se trata semánticamente como un h2
, a section > section > h1
es como un h3
, etc
Lo que es confuso es que los navegadores AÚN crear secciones implícitas basadas en el h2
–h6
niveles de encabezado, sin embargo, el h2
–h6
los elementos no cambian sus estilos. Eso significa que un h2
, sin importar en cuántas secciones esté anidado, seguirá apareciendo como un h2
(al menos en Webkit). Esto sería confuso si su h2
se suponía que era, digamos, un encabezado de nivel 4.
mezclando h2
–h6
con section
conduce a resultados muy inesperados. Solo quédate con h1
solamente, y usar section
para crear secciones explícitas.
This is a top-level heading
you may optionally wrap this p and the h1 above it inside a header element.
the header element doesn't affect the doc outline.
the section element does, however.
even though this is an h1, the browser "treats it" like an h2
because it's inside an explicit section.
(it got demoted).
content in the subsection
Another subsection begins here, also treated like an h2
content
This is misleading. it is semantically treated like an h3.
that is because after an h1, an h2 is demoted one level. the h1 above is
already a "level 2" heading, so this h2 becomes a "level 3" heading.
just do this instead.
it is treated like an h3 because it's in a section within a section.
(It got demoted twice.)
another top-level heading
además, puede usar el elemento. Este elemento contiene solo información específica de la página y no debe incluir contenido que se repita en todo el sitio, como enlaces de navegación, encabezados/pies de página del sitio, etc. Puede haber solo uno
elemento presente en el
. Así que su solución puede ser tan simple como esto:
Site title
Page title
page content
Sin embargo, no olvide las preocupaciones de accesibilidad. Según MDN, “actualmente no hay implementaciones conocidas del algoritmo de contorno en navegadores gráficos o agentes de usuario de tecnología de asistencia”. Eso significa que es posible que un lector de pantalla no pueda calcular la importancia relativa de las secciones con solo
. Es posible que necesite más niveles de encabezado, como
y
.
Al final de todo puedes encontrar los informes de otros administradores, tú igualmente tienes la opción de dejar el tuyo si dominas el tema.