Articles

encabezados HTML: La guía completa para agregar encabezados para la estructura del documento

encabezados de contenido

las seis etiquetas de encabezado son una parte importante de la escritura de contenido HTML. Además de la necesidad algo obvia que llenan (la gente a veces quiere poner los titulares por encima de las cosas), las etiquetas de titulares también tienen valor SEO, te ayudan a ser un escritor más organizado y hacen que las páginas sean más fáciles de usar.,

etiquetas de titulares y SEO

hay dos cosas que un motor de búsqueda está tratando de averiguar acerca de su página:

  • ¿De qué se trata?
  • ¿qué tan bueno es?

generalmente, los enlaces a una página se utilizan como una medida de calidad (qué tan buena es) y el análisis en la página se utiliza para averiguar de qué se trata la página. (Hay cierta superposición aquí, por supuesto: Google hace algunos juicios sobre la calidad de una página mirando la página, y también trata de averiguar de qué se trata la página mirando lo que otras páginas dicen cuando enlazan a ella., Una de las (muchas) cosas que Google y otros motores de búsqueda buscan determinar el contenido de una página son las palabras que aparecen dentro de las etiquetas de encabezado. Es por eso que, si estás tratando de posicionarte para palabras o frases en particular, es realmente una idea incluir esas palabras y frases en tus etiquetas de titulares.

escritura más organizada

Cuando la gente escribe sin usar etiquetas de encabezado (por ejemplo, cuando escribe a mano o en un editor visual como MS Word), a menudo simplemente escriben en flujos de texto largos e ininterrumpidos que duran demasiado tiempo., O, peor aún, podrían agregar titulares visuales (con negrita, mayúsculas, texto más grande u otra cosa. Esto es muy común, ya que las personas instintivamente saben que deben dividir el texto en trozos más pequeños. El problema con eso es que no está claro cómo las diferentes secciones se relacionan entre sí. ¿Se supone que la sección encabezada con fuente de 15pt es una subsección de los titulares de parte con fuente en negrita de 14pt? A menudo, incluso el escritor no lo sabe porque realmente no lo pensaron.,

las etiquetas de encabezado crean una jerarquía de contenido

en una página con una sola pieza de contenido (que debe ser la mayoría de las páginas), el título principal de ese contenido debe ser una etiqueta <h1>. Las secciones principales dentro de ese contenido deben encabezarse con <h2>. Las subsecciones dentro de esas secciones deben estar encabezadas con <h3>, y así sucesivamente. Debería ser posible extraer un esquema de tus etiquetas de titulares. (De hecho, hacemos esto — mira el widget de contenido en la parte superior de la página.,) Esta estructura hace que la escritura sea más organizada, lo que (al menos el 99% de las veces) también hace que la escritura sea mejor.

Protip: muchos de nosotros que escribimos en línea en realidad trazamos los titulares primero y luego rellenamos las secciones. Es solo un esbozo anticuado, pero seguro que puede hacer que la escritura vaya mucho más rápido y el resultado final suele ser mucho más coherente que si solo comenzaras en la parte superior y esperaras llegar a algún lugar antes de terminar.

los titulares son buenos para los usuarios

Aquí hay un pequeño secreto sucio sobre el contenido en línea: lectores descremados. Casi nadie lee cada palabra de un artículo en línea., Y hay muy poco que puedas hacer al respecto. Ciertamente no puedes detenerlo. Pero puedes hacerlo para que los skimmers tengan algo a lo que aferrarse mientras sus ojos se mueven por la página. Los titulares, si están bien distribuidos y son relevantes para su contenido, le dan a los skimmers un montón de pequeñas maneras de regresar al texto del artículo. También dividen el artículo en trozos del tamaño de un bocado aparentemente digeribles, para que un skimmer ansioso no se sienta ansioso por una larga columna de texto ininterrumpido.,

y no olvides enlazar

a partir de HTML5, puedes enlazar a cualquier elemento de una página añadiendo un signo hash (#) y el id del elemento. (En el pasado, solo se podía enlazar a elementos de anclaje.) Al agregar un id a cada título de su página, puede permitir que las personas enlacen a cualquier lugar de su Documento. (De nuevo, mira cómo funcionan los enlaces de contenido en la parte superior de la página.,) Estos enlaces en el documento pueden ser tremendamente útiles, especialmente si proporciona contenido de referencia de cualquier tipo, o si sus artículos son particularmente largos.

usar etiquetas de encabezado para estructurar tu contenido

en términos generales, hay dos tipos de páginas de contenido: páginas de contenido único (que presentan una sola pieza de contenido) e páginas de índice (que enumeran un montón de contenido). Las páginas de índice incluyen la página principal del blog de un sitio, los archivos de categorías y etiquetas, las páginas del autor que enumeran todos los artículos escritos por el autor, y así sucesivamente., Luego también está el contenido (barras laterales, widgets, pies de página) que aparece en casi todas las páginas y que en realidad no es «contenido».»La forma en que usas etiquetas de titulares en estas situaciones puede tener un impacto en el SEO y la usabilidad.

<h1> and <h2> elements

On single content pages throughout your site, the title of that una pieza particular de contenido casi siempre debe estar en la etiqueta <h1> cerca de la parte superior de la etiqueta <body>., Luego, como se mencionó anteriormente, sus secciones dentro del artículo pueden usar etiquetas <h2>.

<main><article> <h1>All About Headlines</h1> . . . <h2>Headlines and SEO</h2> . . . <h2>Headlines and Structure</h2> . . . </article></main> 

en una página de índice, generalmente tiene sentido poner el título del sitio en una etiqueta <h1>, o poner el nombre del índice allí: el nombre de la categoría, el nombre del autor o lo que sea que defina esa página. Entonces los títulos de todas las piezas individuales que se enumeran allí deben tener un elemento <h2> para sus títulos.,

en el pasado, era común usar una etiqueta <h2> para el título del sitio cuando aparece en páginas de contenido único.

<header> <h2>HTML Code Tutorials</h2> <nav><!-- menu --></nav> </header> <main> <h1>Actual Title of This Page</h1? . . . </main> 

Las opiniones son mixtas sobre esto, pero la tendencia es cada vez menor. Más personas simplemente colocan el título (y, más probablemente, un logotipo img) en el encabezado y guardan las etiquetas de encabezado para contenido específico en la página. Parte de su propia consideración de si hacer esto probablemente tendrá que ver con lo importante que es el título de su propio sitio en relación con sus objetivos de SEP.,

Widgets y otros «sin contenido»

también ha sido común hasta hace poco utilizar <h3> o <h4> elementos para títulos de widgets en barras laterales. Muchos sistemas de gestión de contenidos simplemente hacen esto automáticamente, por lo que puede que no te importe. Pero es algo en lo que deberías pensar si estás diseñando el marcado de toda tu página desde cero. ¿Quieres que los elementos del título sugieran que el verdadero significado de tu página es «iniciar sesión»o» registrarse en la lista de correo»?, (Por supuesto, esto se evita parcialmente colocando la barra lateral en un elemento <aside>.)

Adam es un escritor técnico que se especializa en la documentación para desarrolladores y tutoriales.