titulos que poner etiqueta ejemplos ejemplo cursiva como html usability accessibility semantics

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



tags h1 y cursiva ejemplos (8)

En la página de inicio de su blog, utilizaría H1 para designar 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.

Sin embargo, al ingresar un artículo en particular, 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 apreciará Google cuando rastree su sitio.

Dentro de una página orientada a artículos (como una publicación 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 en el elemento <title> ) o
  • el título del artículo

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

Para el propietario del sitio, que desee anunciar al mundo el nombre de su sitio / blog, usar un encabezado de nivel 1 alrededor del título del sitio puede parecer lógico.

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

Creo que el elemento <h1> debería 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 de ninguna manera.

Ejemplos:

  • Joel Spolsky usa <h1> para el título del artículo y un ancla para el título del sitio
  • Jeff Atwood no usa ningún <h1> , <h2> para el título del artículo y un ancla para el título del sitio
  • 37 SVN de Signals usa <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 en los que podría esperar una fuerte consideración para el marcado semántico correcto.

Creo que Joel tiene razón con Jeff en un segundo. Estoy bastante sorprendido de las opciones de marcado por parte de la gente de 37Signals.

Para mí, parece una decisión bastante simple: ¿qué tiene mayor relevancia para el consumidor del artículo? El título del artículo. Por lo tanto, ajuste el título del artículo en un elemento <h1> . Hecho.

¿Me equivoco? ¿Hay otras consideraciones que me falta? ¿Estoy en lo cierto? Si es así, ¿por qué el enfoque '' <h1> para el título del artículo'' no se usa más comúnmente?

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

Actualización : gracias por todas las respuestas hasta el momento. Realmente agradecería algún ángulo sobre cómo el uso del <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). ¡Las respuestas basadas en hechos en lugar de suposiciones personales obtendrán muchos puntos de bonificación!

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 una forma analizable por máquina, no para el diseño. Si se tratara solo de diseño, solo podría usar bloques <div> y <span> con diferentes clases / ID y aplicarles CSS. En lugar de

<h2>Sub Header</h2>

Podría usar

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

y en algún lugar tiene algún código CSS que hará que este <div> vea como h2 (tamaño de fuente, fuente en negrita, etc.). 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 saberlo? Podría nombrarlo de manera diferente que "encabezado2"), 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 mostrarle al usuario una lista estructurada de encabezados de una página, puede hacerlo

  • Jefe de nivel superior
    • Sub encabezado
      • Sub Sub encabezado
    • Sub encabezado
    • Sub encabezado
  • Jefe de nivel superior
    • Sub encabezado
      • Sub Sub encabezado
      • Sub Sub encabezado
    • Sub encabezado
      :

buscando los elementos H1 / H2 / H3 / ... y estructurandolos como se indica 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> ? Piense en eso por un momento y tenga su respuesta.

Por supuesto, podría decir "Pero el título no está 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 título de la pestaña); sin embargo, es posible que desee que también esté visible en la página. Puedo entenderlo. Sin embargo, ¿qué habla de hacer eso? ¿Quién dice que no puedes repetirlo? Pero me pregunto si deberías usar un elemento h1 para eso.

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

Use CSS para estilo #title la forma que desee. Que sea súper grande y súper audaz y tenga un color llamativo si lo desea, nada lo contradice. Los analizadores automáticos de páginas suelen ignorar 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. LA DISPOSICIÓN no es ESTRUCTURA , solo se puede aplicar estilo a ciertos elementos estructurales para generar un diseño, pero uno no debe confundirse con el otro). Todavía una computadora sabrá cuál es el título de la página, lo sabe gracias al elemento title.

Solo debe haber uno, y solo debe haber uno

h1 ; por lo general, este es el título de la página. Luego debería seguir a h2, h3, etc.

Entonces su página puede verse así (sin todas las demás etiquetas html)

h1 h2 h2 h3 ..etc

Como usuario de lector de pantalla, el nivel de encabezado no importa siempre que sea consistente. Diferentes blogs utilizan diferentes convenciones, por lo que no existe una forma estándar de hacerlo más accesible. Asegurarse de que los títulos coinciden con el nivel de contenido es más importante que el nivel de encabezado que se utiliza. Por ejemplo, si muestra una serie de entradas de blog con comentarios, todas las publicaciones de blog podrían tener un título de nivel 2 y al comienzo de los comentarios podría tener un título de nivel 3. Para un ejemplo de encabezados fáciles de navegar, busque cualquier artículo de Wikipedia con múltiples secciones y subsecciones. Puedo omitir fácilmente las secciones principales utilizando mis lectores de pantalla para 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 determinada, navegaré al siguiente título.

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

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

Para un sitio web típico, por ejemplo, un blog, 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>

Este #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 contenido (como en un artículo de Wikipedia) o una paginación para un artículo largo.}

Si usa el título del artículo como h1 , la navegación del sitio estaría dentro del 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 h2 ) es parte del artículo (→ iniciada por h1 ). Pero esto no es cierto, esta navegación no es la navegación para el artículo. Los enlaces son realmente parte de todo el sitio, y el sitio está representado por el título del sitio.

El problema se vuelve más claro cuando 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 forma de diferenciar los subtítulos 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".

Entonces, 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, usando 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 "Blog de Juan" (→ iniciado por h1 ) y contiene un artículo (→ iniciado por el primer h2 ) y un sitio de navegación (→ 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 del primer encabezado, por ejemplo, el encabezado del sitio, incluido el título del sitio y otras cosas. Para los usuarios que navegan por encabezados, este primer contenido sería "invisible". Por lo tanto, es una buena práctica dar a cada bloque por separado un título propio.

HTML5 formaliza esto con el algoritmo de seccionamiento / delineación . Resuelve muchos problemas de esquemas que podrías haber tenido con HTML 4.01, porque la orden de contenido puede (en su mayoría) ser gratuita ahora y no tienes que "inventar" encabezados reales si no quieres, gracias a la section / article / nav / aside . Pero también en HTML5 el encabezado del sitio debe ser el h1 que es un elemento secundario del body pero no un elemento secundario de ningún elemento / raíz de sección. Todas las demás secciones están en el alcance de este título del sitio.

Hay un consejo de Garantía de calidad del W3C sobre este tema:

<h1> es el elemento HTML para el encabezado de primer nivel de un documento:

  • Si el documento es básicamente independiente, por ejemplo Cosas para ver y hacer en Ginebra, el encabezado de nivel superior es probablemente el mismo que el título.

  • Si es parte de una colección, por ejemplo, una sección sobre Perros en una colección de páginas sobre mascotas, entonces el encabezado de nivel superior debe asumir una cierta cantidad de contexto; solo escriba <h1>Dogs</h1> mientras el título debería funcionar en cualquier contexto: Dogs - Your Guide to Pets.