etiquetas - que es p en html
Cómo usar h1 en HTML5 (3)
Como menciono en mi comentario y citas en el W3C, h1 es un encabezado y no un título. Cada elemento de sección puede tener su propio elemento (s) de encabezado. No se puede pensar en h1 como el título de una página solamente, sino como el encabezado de esa sección particular de la página. Al igual que la página principal de un periódico, cada artículo puede tener su propio encabezado (o título).
¿Cuál de las siguientes es la forma correcta de estructurar una página?
1) h1 solo en el header
<header>
<h1>Site title</h1>
<nav>...</nav>
</header>
<section>
<h2>Page title</h2>
</section>
Si utilizo h1 exclusivamente dentro del header como título del sitio, cada página tendrá el mismo contenido para la etiqueta h1 . Eso no parece muy informativo.
2) h1 en header y section , para el sitio y el título de la página
<header>
<h1>Site title</h1>
<nav>...</nav>
</header>
<section>
<h1>Page title</h1>
</section>
También he visto ejemplos de uso de h1 más de una vez, tanto en etiquetas de header como de section . Sin embargo, ¿no está mal tener dos títulos para la misma página? Este ejemplo muestra varias etiquetas de encabezado y h1 http://orderedlist.com/resources/html-css/structural-tags-in-html5/
3) h1 solo en la section , enfatizando el título de la página
<header>
<p>Site title</p>
<nav>...</nav>
</header>
<section>
<h1>Page title</h1>
</section>
Por último, W3 parece recomendar el uso de h1 dentro del elemento de section principal, ¿significa eso que no debería usarlo en el elemento de header ?
Las secciones pueden contener encabezados de cualquier rango, pero se recomienda encarecidamente a los autores que utilicen solo elementos h1 o que usen elementos del rango apropiado para el nivel de anidación de la sección.
Sin embargo, no olvide las cuestiones 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 un lector de pantalla podría no ser capaz de determinar la importancia relativa de las secciones con solo <h1> . Puede necesitar más niveles de encabezado, como <h2> y <h3> .
Yo recomendaría usar h1 todo momento. Olvídate de h2 a h6 .
De vuelta en HTML4, los 6 niveles de encabezado se usaron para definir implícitamente las secciones. Por ejemplo,
<body>
<h1>This is a top-level heading</h1>
<p>some content here</p>
<h2>This is the heading of a subsection</h2>
<p>content in the subsection</p>
<h2>Another subsection begins here</h2>
<p>content</p>
<h1>another top-level heading</h1>
Ahora, con el elemento de section , puede definir explícitamente las secciones en lugar de tener que depender de las secciones implícitas creadas por su navegador que leen los diferentes niveles de encabezado. Un navegador equipado con HTML5 sabe que todo dentro de un elemento de section se "degrada" en un nivel en el contorno del documento. Entonces, por ejemplo, una section > h1 se trata semánticamente como un h2 , una section > section > h1 es como un h3 , etc.
Lo que es confuso es que los navegadores TODAVÍA crean secciones implícitas basadas en los niveles de encabezado h2 - h6 , pero los elementos h2 - h6 no cambian sus estilos. Eso significa que un h2 , independientemente de la cantidad de secciones en las que esté anidado, seguirá apareciendo como un h2 (al menos en Webkit). Esto sería confuso si tu h2 supuestamente fuera, digamos, un rumbo de nivel 4.
Mezclar h2 - h6 con la section conduce a resultados muy inesperados. Solo quédese con h1 y use la section para crear secciones explícitas.
<body>
<!-- optional --><header>
<h1>This is a top-level heading</h1>
<p>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.</p>
<!-- optional --></header>
<section>
<h1>even though this is an h1, the browser "treats it" like an h2
because it''s inside an explicit section.
(it got demoted).</h1>
<p>content in the subsection</p>
</section>
<section>
<h1>Another subsection begins here, also treated like an h2</h1>
<p>content</p>
<h2>This is misleading. it is semantically treated like an h3.</h2>
<p>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.</p>
<section>
<h1>just do this instead.</h1>
<p>it is treated like an h3 because it''s in a section within a section.
(It got demoted twice.)</p>
</section>
</section>
<h1>another top-level heading</h1>
Además , puede usar el elemento <main> . Este elemento contiene solo información específica de la página y no debe incluir contenido que se repite en todo el sitio, como enlaces de navegación, encabezados / pies de página, etc. Puede haber solo un elemento <main> presente en el <body> . Entonces su solución puede ser tan simple como esto:
<header>
<h1>Site title</h1>
<nav>...</nav>
</header>
<main>
<h1>Page title</h1>
<p>page content</p>
</main>