Semántica HTML5: H1 o H2 para títulos de ARTÍCULO en una SECCIÓN


10

Tengo entendido (basado en este capítulo de Inmersión en HTML5: http://goo.gl/9zliD ) que puede considerarse semánticamente apropiado usar etiquetas H1 en múltiples áreas de la página, como un método para establecer el título más importante para ese contenido en particular.

Si estoy usando esta metodología, y tengo una SECCIÓN a la que le he asignado un H1 de 'Artículos', ¿debo usar H1 o H2 para definir los títulos de los ARTÍCULOS en esa SECCIÓN? Esto es un poco confuso para mí, ya que los títulos de los artículos son el título más importante para su ARTÍCULO, pero también son "hijos" del título de la SECCIÓN.

Código de ejemplo:

<section class="article-list">
  <header>
    <h1>Articles</h1>
  </header>

  <article>
    <header>
      <h2>Article Title</h2>
      <time datetime="201-02-01">Today</time>
    </header>
    <p>Article text...</p>
  </article>

  <article>
    <header>
      <h2>Article Title</h2>
      <time datetime="2011-01-31">Yesterday</time>
    </header>
    <p>Article text...</p>
  </article>

  <article>
    <header>
      <h2>Article Title</h2>
      <time datetime="2011-01-30">The Day Before Yesterday</time>
    </header>
    <p>Article text...</p>
  </article>
</section>

He escuchado críticas mixtas de la serie Dive into ... Por lo que entiendo, puede que no sea la mejor referencia.
the_e

44
@espais: ¿Dónde escuchaste estas reseñas? ¿Tienes un enlace a uno de ellos negativos?
Lèse majesté

@ Lèse: No puedo decirle nada más que aquí en este momento. Estoy bastante seguro de que lo vi en uno de los sitios de SE en el pasado ... pero en este momento no tengo fuentes.
the_e

1
@espais bizarro, ya que todas las referencias que puedo encontrar en Webmasters y SO no solo son positivas, sino que generalmente están muy votadas. stackoverflow.com/search?q=%22dive+into+html5%22 , webmasters.stackexchange.com/search?q=%22dive+into+html5%22
Yahel

@ Lèse: sí, dado que realmente no puedo hacer una copia de seguridad de mi comentario, lo retiraré respetuosamente
2011

Respuestas:


7

Pilgrim no está solo en contender esto.

De acuerdo con HTML5 para diseñadores web de Jeremy Keith , puede usar múltiples correos <h1>electrónicos en un documento sin arruinar el resumen del documento, siempre que estén anidados dentro de etiquetas seccionales semánticas discretas.

Citando directamente del libro electrónico (que compré en iBooks)

Hasta ahora, el nuevo contenido de seccionamiento no nos está dando mucho más de lo que podríamos hacer con versiones anteriores de HTML. Aquí está el truco: en HTML5, cada pieza de contenido de seccionamiento tiene su propio esquema autónomo. Eso significa que no tiene que hacer un seguimiento de qué nivel de encabezado debe usar; puede comenzar desde h1 cada vez:

<h1>An Event Apart</h1> 
    <section>
        <header>
            <h1>Cities</h1>
        </header>
         <p>Join us in these cities in 2010.</p> 
        <section>
            <header>
                <h1>Seattle</h1>
            </header>
            <p>Follow the yellow brick road.</p> 
       </section>
        <section>
            <header>
                <h1>Boston</h1>
            </header>
            <p>That’s Beantown to its friends.</p> 
        </section> 
        <section>
             <header>
                   <h1>Minneapolis</h1>
             </header>
             <p>It's so <em>nice</em>.</p> 
         </section>
     </section> 
     <small>Accommodation not provided.</small>

(Código de muestra también del libro, página 73)


@ Matt no hay problema. Esto no quiere decir que no haya problemas al hacer esto. Dos vienen a la mente. Primero, esto puede ser un poco extraño para CSS, pero es manejable. Pero lo que es más importante, esto podría ser peligroso para el SEO, ya que existe una Sabiduría Convencional bastante bien establecida de que uno solo debe tener uno <h1>en su página, y que cualquier otra cosa diluye la capacidad de los rastreadores para descifrar su sitio. Pero no soy un gurú del SEO, así que no puedo comentar sobre eso.
Yahel

2

Tendería a estar de acuerdo con la interpretación de Mark Pilgrim . Si está adjuntando su artículo dentro de un articleelemento, puede comenzar de nuevo con un h1encabezado para el artículo.

En las especificaciones HTML5, articlese supone que los s deben tratarse como una parte independiente y autónoma de la página. Debería poder trasplantar el articleelemento tal como está en otra página sin volver a formatear los encabezados.

Si los encabezados de los artículos tuvieran que ser una continuación de la jerarquía de encabezados del documento, entonces, cuando coloque articledirectamente debajo de una bodyetiqueta, deberá ir a h1, pero si lo dejó en secciones anidadas, tendría que cambiarlo a h3/ h4/ h5/ etc., dependiendo de dónde lo coloque.

De hecho, cada vez que cree un nuevo sectiono article, debe volver a h1, ya que los siguientes son idénticos:

<article>
  <h1>Meta Data</h1>
    <h2>Data Warehousing</h2>
    <h2>On the Web</h2>
      <h3>Dublin Core</h3>
      <h3>XFN</h3>
      <h3>Microformats</h3>
      <h3>RDFa</h3>
</article>

y:

<article>
  <h1>Meta Data</h1>
  <section>
    <h1>Data Warehousing</h1>
  </section>
  <section>
    <h1>On the Web</h1>
    <section>
      <h1>Dublin Core</h1>
    </section>
    <section>
      <h1>XFN</h1>
    </section>
    <section>
      <h1>Microformats</h1>
    </section>
    <section>
      <h1>RDFa</h1>
    </section>
  </section>
</article>

Como nota al margen, si su encabezado es solo un elemento de encabezado (por ejemplo h1) y nada más, entonces no necesita envolverlo en un headerelemento.


Gracias Lèse ¿Podría proporcionar una referencia para su nota sobre el uso apropiado del elemento 'encabezado'? Estoy interesado en leer más sobre esto.
Matt

@ Matt: Principalmente baso esto en la redacción de la especificación HTML5, que se llama header"un grupo de ayudas introductorias o de navegación". Esto y el hecho de que las especificaciones para h1- h6no requieren que estén anidadas en un header(e incluyen muchos ejemplos de ellos utilizados directamente en la sección de la que forman parte) me sugieren que no es necesario. Oli Studholme y Remy Sharp de HTML5 Doctor se hacen eco de este sentimiento .
Lèse majesté

0

Si bien los títulos de los artículos de su página son importantes, generalmente el encabezado de nivel superior de la página define el contenido de la página. A veces es el nombre del artículo, y a veces, como muestra, es el título de una lista de artículos.

<h1>My Very Interesting Articles</h1>

Este encabezado define toda la página como 'artículos interesantes'. Luego, cada artículo aparece en la lista pero tiene un nivel de encabezado menor.


-1

La respuesta oficial de w3schools al uso de etiquetas de encabezado en una página es la siguiente: los encabezados H1 deben usarse como encabezados principales, seguidos por los encabezados H2, luego los encabezados H3 menos importantes, y así sucesivamente.


55
En realidad no hay nada "oficial" sobre W3Schools. Es un nombre engañoso, ya que no están afiliados ni respaldados por el W3C de ninguna manera.
Lèse majesté

de hecho, visite w3fools.com para obtener una descripción detallada de lo terrible que es W3Schools.
Yahel

Pensé que este sitio de preguntas y respuestas tendría algunos usuarios más constructivos. Ustedes chicos parecen un poco altivos.
Keith Groben

2
No tiene nada que ver con la arrogancia, y nada que ver con el deseo de ser malo, y todo lo que tiene que ver con el deseo de ver la información errónea anulada. Demasiadas personas piensan que w3schools es una fuente autorizada y precisa, y es extremadamente perjudicial para la calidad del desarrollo web. El objetivo de los sitios de stackexchange es proporcionar respuestas precisas y de calidad, y presionar y corregir las respuestas que son inexactas, incorrectas o engañosas.
Yahel

1
En realidad, su respuesta ignoró por completo mi pregunta y respondió una pregunta que no se hizo. Mi pregunta decía claramente 'Si estoy usando esta metodología ...' Esta porción estaba incluso en negrita para asegurar que la pregunta fuera clara. Supongo que esta es la razón más probable por la cual su respuesta fue rechazada.
Matt
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.