H1 en la página del artículo - título del sitio o título del artículo?

Dentro de una página orientada a artículos (como una entrada de blog), el elemento <h1> (encabezado de nivel 1) se usa comúnmente para marcar:

  • el título del blog (es decir, el título del sitio a menudo grande en la parte superior de la página, no al elemento <title>), o
  • el título del artículo

¿Cuál es la mejor opción y por qué?

Al propietario del sitio, que puede querer gritar al mundo el nombre de su sitio / blog, usando un encabezado de nivel 1 alrededor del título del sitio podría parecer que tiene sentido.

Desde la perspectiva de lo que está tratando de comunicar al usuario, el título del sitio es de menor relevancia: el contenido del artículo es lo que está tratando de comunicar y el resto del contenido del sitio es secundario. Por lo tanto, usar <h1> para el título del artículo parece lo mejor.

Creo que el elemento <h1> debe centrarse en el título del artículo, no en el título del sitio u otro contenido. Esto no parece ser una convención popular por cualquier medio.

Ejemplos:

  • Joel Spolsky usa <h1> para el título del artículo, y un ancla para el título del sitio
  • Jeff Atwood usa no <h1> en absoluto, <h2> para el título del artículo y un ancla para el título del sitio
  • 37 Signals' SVN utiliza <h1> para el título del sitio y un ancla para el título del artículo

Esos son tres enfoques diferentes en tres sitios donde podría esperar una fuerte consideración para el marcado semántico correcto.

Creo que Joel tiene razón con Jeff en segundo lugar. Estoy bastante sorprendido por las opciones de marcado de las personas de 37Signals.

Me parece una decisión bastante simple: ¿qué es de mayor relevancia para el consumidor del artículo? El título del artículo. Por lo tanto, envuelva el título del artículo en un elemento <h1>. Terminado.

¿Me equivoco? ¿Hay otras consideraciones que me faltan? ¿Tengo razón? En caso afirmativo, ¿por qué se indica "<h1> para el título del artículo"? enfoque no más comúnmente utilizado?

¿Es la decisión de dónde usar el elemento <h1> tan invariable como lo pongo? ¿O hay que hacer también algunas consideraciones subjetivas?

Update : Gracias por todas las respuestas hasta ahora. Realmente apreciaría algún ángulo sobre cómo el uso de <h1> para el título del artículo en lugar del título del sitio beneficia la usabilidad y la accesibilidad (o no, según sea el caso o no). Respuestas basadas en hechos en lugar de solo personales suposición obtendrá muchos puntos de bonificación!

Author: Jon Cram, 2008-11-06
Source

8 answers

Hay un Consejo de Garantía de Calidad del W3C sobre este tema:

<h1> es el elemento HTML para el título de primer nivel de un documento:

  • Si el documento es básicamente independiente, por ejemplo Cosas para ver y Hacer en Ginebra, el nivel más alto el encabezamiento es probablemente el mismo que el titular.

  • Si es parte de un colección, por ejemplo una sección sobre Perros en una colección de páginas sobre mascotas, a continuación, el encabezado de nivel superior debe asumir una cierta cantidad de contexto; solo escribe <h1>Dogs</h1> mientras que el título debe funcionar en cualquier context: Perros-Su Guía de Mascotas.

 32
Author: xsl,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-08-04 07:27:18

Como usuario lector de pantalla, el nivel de encabezado no importa siempre y cuando sea consistente. Diferentes blogs utilizan diferentes convenciones, por lo que no hay una forma estándar de hacerlo más accesible. Asegurarse de que los encabezados coincidan con el nivel de contenido es más importante que el nivel de encabezado que se utiliza. Por ejemplo, si se muestra una serie de publicaciones de blog con comentarios, todas las publicaciones de blog podrían tener un nivel de encabezado 2 y al comienzo de los comentarios podría tener un nivel de encabezado 3. Para un ejemplo de fácil buscar cualquier artículo de Wikipedia con múltiples secciones y subsecciones. Puedo saltar fácilmente alrededor de las secciones principales mediante el uso de mis lectores de pantalla navegar por la función de encabezado para saltar a cualquier encabezado de nivel 2, y si quiero pasar a las subsecciones de una sección dada, navegaré al siguiente encabezado.

 12
Author: Jared,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2008-11-08 17:05:33

En la página de inicio de su blog, usaría H1 para denotar el título del sitio y H2 para los títulos de las publicaciones de blog individuales que se publican en la página principal.

Al ingresar un artículo en particular, sin embargo, usaría H1 para el título del artículo y un ancla para el título del sitio.

Esta es una configuración agradable y semántica que también será apreciada por Google cuando rastree su sitio.

 11
Author: JacobE,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2008-11-06 12:29:48

En Wikipedia, la etiqueta h1 contiene el nombre del artículo y los encabezados del documento comienzan con h2. El nombre Wikipedia es parte de la etiqueta title-tag en el encabezado html. También creo que ese es el camino a seguir. Así que para los blogs me gustaría Joel Spolsky en los ejemplos que has dado.

Y siempre empezaría con el nivel más alto, por lo que dejar salir h1 es en mi opinión una mala opción.

 3
Author: Mnementh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-04-21 13:46:44

La parte <head> de una página HTML tiene un elemento llamado <title>. Como su nombre lo indica, esto es para el título del sitio.

HTML se utiliza para estructurar una página en un formulario capaz de analizar la máquina, no para layouting. Si solo se trataba de layouting, solo podría usar <div> y <span> bloques con diferentes clases/ids y aplicarles CSS. En lugar de 

<h2>Sub Header</h2>

Podría usar 

<div class="header2>Sub Header</div>

Y en algún lugar tienen algún código CSS que hará que esto <div> se vea como h2 (tamaño de fuente, fuente en negrita, sucesivamente.). La diferencia es que una computadora no puede saber que mi <div> es de hecho un encabezado de segundo nivel en el primer ejemplo (¿cómo debería saber eso? Podría nombrarlo de manera diferente a "header2"), sin embargo, en el primer caso, sabe que es un encabezado de segundo nivel por el hecho de que es un elemento <h2> y si quiere mostrar al usuario una lista estructurada de encabezados de una página, puede hacerlo

  • Encabezado de Nivel superior
    • Sub Encabezado
      • Sub Sub Cabecera
    • Sub Encabezado
    • Sub Encabezado
  • Encabezado de Nivel superior
    • Sub Encabezado
      • Sub Sub Header
      • Sub Sub Header
    • Sub Encabezado
      :

Buscando el H1/H2/H3/... elementos y estructurarlos como arriba. Entonces, si una computadora intenta averiguar el título de una página, ¿dónde lo buscará? En un elemento llamado <title> o en un elemento llamado <h1>? Pensar acerca de eso por un momento y usted tiene su respuesta.

Por supuesto, podrías decir "Pero el título no es visible en la página". Bueno, por lo general es visible en la ventana del navegador en algún lugar (título de la ventana o al menos el título de la pestaña) - sin embargo, es posible que desee que sea visible en la página también - puedo entender eso. Sin embargo, ¿qué habla de hacer eso? ¿Quién dice que no puedes repetirlo? Pero me pregunto si debería utilizar un elemento h1 para eso.

<html>
<head>
<title>SOME TITLE</title>
</head>
:
<body>
<div id="title">SOME TITLE</div>
:
</body>
</html>

Use CSS para estilizar #title la forma en que como. Hágalo súper grande y súper audaz y tenga un color llamativo si lo desea, nada habla en contra. Los analizadores automáticos de páginas generalmente ignoran div y span hasta cierto punto, ya que no les dice nada (estos son elementos utilizados para diseñar la página para el lector, pero no dicen nada sobre la estructura de la página. LAYOUT no es STRUCTURE, solo puede aplicar estilo a ciertos elementos estructurales para generar un layout, pero uno no debe confundirse con el otro). Todavía el ordenador sabrá cuál es el título de la página, lo sabe gracias al elemento title.

 2
Author: Mecki,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2008-11-06 12:43:20

Para un sitio web típico, por ejemplo, un blog, el h1 debe contener el título del sitio. Sí, en cada página del sitio.

¿Por qué? En un sitio web, hay varias partes que se comparten para todas sus páginas web. Tomemos la navegación como ejemplo:

<ul id="site-navigation">
  <li><a href="/">Home</a></li>
  <li><a href="/about">About me</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

Esto #site-navigation se repite en cada página del sitio. Representa la navegación del sitio, no la navegación de la página. La diferencia es importante! {La navegación de la página podría ser una tabla de contenidos (como en un artículo de Wikipedia) o una paginación para un artículo largo.}

Si utilizas el título del artículo como h1, la navegación del sitio estaría en el alcance de este encabezado.

<body>
  <div>John’s blog</div> <!-- the site title -->
  <h1>My first blog post</h1> <!-- the article title -->
  <p>…</p>
  <h2>Navigation</h2>
  <ul id="site-navigation">…</ul> <!-- the site-wide navigation -->
</body>

Así que este marcado transmite: La navegación (→ iniciada por el h2) es parte del artículo (→ iniciada por el h1). Pero esto no es cierto, esta navegación no es la navegación para el artículo. Los enlaces realmente son parte de todo el sitio, y el sitio está representado por el encabezado del sitio.

El problema se hace más claro cuando el el artículo también contiene subtítulos: 

<body>
  <div>John’s blog</div> <!-- the site title -->
  <h1>My first blog post</h1> <!-- the article title -->
  <p>…</p>
  <h2>Why I’m blogging</h2>
  <p>…</p>
  <h2>Why you should read my blog</h2>
  <p>…</p>
  <h2>Navigation</h2>
  <ul id="site-navigation">…</ul> <!-- the site-wide navigation -->
</body>

Como puede ver, no hay manera de diferenciar los sub-encabezados del artículo de la navegación. Parece que el artículo tiene tres subtítulos: "Por qué estoy blogueando"," Por qué deberías leer mi blog "y"Navegación".

Así que si en su lugar usamos h1 para el título del sitio y h2 para el título del artículo, la navegación puede estar en el alcance del encabezado del sitio, utilizando h2, también: 

<body>
  <h1>John’s blog</h1> <!-- the site title -->
  <h2>My first blog post</h2> <!-- the article title -->
  <p>…</p>
  <h2>Navigation</h2>
  <ul id="site-navigation">…</ul> <!-- the site-wide navigation -->
</body>

Ahora este marcado transmite: Hay un sitio titulado "El blog de Juan" (→ iniciado por el h1) y contiene un artículo (→ iniciado por el primero h2) y una navegación del sitio (→ iniciado por el segundo h2). Los subtítulos del artículo serían h3 ahora, por supuesto.

Otro problema al usar h1 para el título del artículo es que normalmente hay contenido antes de el primer encabezado, por ejemplo, el encabezado del sitio que incluye el título del sitio y otras cosas. Para los usuarios que navegan a través de encabezados, este primer contenido sería "invisible". Por lo tanto, es una buena práctica darle a cada bloque separado un encabezado propio.

HTML5 formaliza esto con el algoritmo seccionado/delineado . Resuelve muchos problemas de esbozo que podría haber tenido con HTML 4.01, porque el orden de contenido puede ser (en su mayoría) gratuito ahora y no tiene que "inventar" encabezados reales si no quiere, gracias a section/article/nav/aside. Pero también en HTML5 el encabezado del sitio debe ser el h1 que es un hijo de body pero no un hijo de cualquier elemento seccionador / raíz. Todas las demás secciones están en el alcance de este encabezado del sitio.

 1
Author: unor,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-06-22 01:06:07

H1 en la página del artículo - título del sitio o título del artículo?

Ambos. Este artículo es informativo: La Verdad sobre Múltiples etiquetas H1 en la Era HTML5.

 1
Author: Mori,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-25 05:48:15

Solo debe haber uno, y solo debe haber uno 

h1
; normalmente este es el título de la página. Entonces debe seguir h2, h3, etc.

Para que tu página se vea así (sin todas las otras etiquetas html)

h1
  h2
  h2
    h3
..etc
 -4
Author: eddy147,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2008-11-06 12:28:48