Saltar al contenido

Cómo usar correctamente h1 en HTML5

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 h2h6 niveles de encabezado, sin embargo, el h2h6 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 h2h6 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.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *