Los titulares son comunes en la mayoría de las páginas web. De hecho, casi todos los documentos de texto tienden a tener al menos un titular para que sepas el título de lo que estás leyendo. Estos titulares se codifican utilizando los elementos de encabezado HTML – h1, h2, h3, h4, h5, y h6.

En algunos sitios, usted puede encontrar que los titulares están codificados sin usar estos elementos. En su lugar, los titulares pueden utilizar párrafos con atributos de clase específicos añadidos a ellos, o divisiones con elementos de clase. La razón por la que a menudo oigo hablar de esta práctica incorrecta es que al diseñador «no le gusta cómo se ven los encabezados». Por defecto, los encabezados se muestran en negrita y son más grandes, especialmente los elementos h1 y h2 que se muestran en un tamaño de fuente mucho mayor que el resto del texto de una página. Tenga en cuenta que este es sólo el aspecto por defecto de estos elementos! Con CSS, puedes hacer que el encabezado se vea como quieras! Puede cambiar el tamaño de la fuente, quitar el negrita y mucho más. Los encabezados son la forma correcta de codificar los titulares de una página. He aquí algunas razones.

Por qué usar etiquetas de encabezado en lugar de DIVs y estilos

Motores de búsqueda como las etiquetas de encabezado

Esta es la mejor razón para usar los encabezados, y usarlos en el orden correcto (es decir, h1, luego h2, luego h3, etc.). Los motores de búsqueda dan la mayor ponderación al texto incluido dentro de las etiquetas de encabezado porque hay un valor semántico a ese texto. En otras palabras, al etiquetar el título de su página H1, usted le dice a la araña del motor de búsqueda que ese es el enfoque #1 de la página. Los encabezados H2 tienen énfasis #2, y así sucesivamente.

Usted no tiene que recordar qué clases usó para definir sus titulares

Cuando usted sabe que todas sus páginas Web van a tener un H1 que es negrita, 2em, y amarillo, entonces usted puede definir eso una vez en su hoja de estilo y listo. 6 meses después, cuando añades otra página, sólo tienes que añadir una etiqueta H1 en la parte superior de la página, no tienes que volver a otras páginas para averiguar qué ID de estilo o clase usaste para definir el título principal y los subtítulos.

Proporcionan un esquema de página fuerte

Los contornos hacen que el texto sea más fácil de leer. Es por eso que la mayoría de las escuelas de Estados Unidos enseñaron a los estudiantes a escribir un bosquejo antes de escribir el trabajo. Cuando utiliza etiquetas de encabezado en un formato de esquema, su texto tiene una estructura clara que se hace evidente muy rápidamente. Además, hay herramientas que pueden revisar el esquema de la página para proporcionar una sinopsis, y éstas se basan en las etiquetas de encabezado para la estructura del esquema.

Su página tendrá sentido incluso con los estilos desactivados

No todo el mundo puede ver o usar hojas de estilo (y esto vuelve a #1 – los motores de búsqueda ven el contenido (texto) de su página, no las hojas de estilo). Si utiliza etiquetas de encabezado, está haciendo que sus páginas sean más accesibles porque los titulares proporcionan información que una etiqueta DIV no tendría.

Es útil para los lectores de pantalla y accesibilidad al sitio web

El uso adecuado de los títulos crea una estructura lógica para un documento. Esto es lo que los lectores de pantalla utilizarán para «leer» un sitio a un usuario con discapacidad visual, haciendo que su sitio sea accesible para personas con discapacidades.

Estilizar el texto y la fuente de los titulares

La manera más fácil de alejarse del problema de las etiquetas de encabezado, que son «grandes, negritas y feas», es cambiar el estilo del texto de la manera en que se desea que luzcan. De hecho, cuando se trabaja en un nuevo sitio web, lo mejor es escribir los estilos de párrafo, h1, h2 y h3 lo primero. Manténgase sólo con la familia tipográfica y el tamaño y el peso. Por ejemplo, ésta podría ser una hoja de estilo preliminar para un nuevo sitio (estos son sólo algunos ejemplos de estilos que podrían ser usados):

Puede modificar las fuentes de los titulares o cambiar el estilo del texto o incluso el color del texto. Todo esto convertirá tu titular «feo» en algo más vibrante y acorde con tu diseño.

Borders Can Dress Up Headlines

Los bordes son una gran manera de mejorar sus titulares y son fáciles de añadir. Pero no olvide experimentar con los bordes – no necesita un borde a cada lado de su titular. Y puede utilizar algo más que simples y aburridos bordes.

Añadí un borde superior e inferior al encabezado de mi muestra para presentar algunos estilos visuales interesantes. Usted puede agregar bordes de cualquier manera que desee para lograr el estilo de diseño que desee.

Agregue imágenes de fondo a sus titulares para aún más Pizazz

Muchos sitios Web tienen una sección de encabezado en la parte superior de la página que incluye un encabezado, normalmente el título del sitio y un gráfico. La mayoría de los diseñadores piensan en esto como dos elementos separados, pero usted no tiene que hacerlo. Si el gráfico está ahí sólo para decorar el titular, ¿por qué no añadirlo a los estilos de encabezado?

El truco de este titular es que sé que mi imagen tiene 90 píxeles de alto. Así que agregué relleno en la parte inferior del titular de 90px (relleno: 0,5 0 90px 0p;). Puede jugar con los márgenes, la altura de la línea y el relleno para que el texto del titular se muestre exactamente donde lo desee.

Una cosa a recordar al usar imágenes es que si usted tiene un sitio web sensible (lo cual debería) con un diseño que cambia basado en el tamaño de la pantalla y los dispositivos, su titular no siempre será del mismo tamaño. Si necesita que su titular sea de tamaño exacto, esto puede causar problemas. Es una de las razones por las que generalmente evito las imágenes de fondo en un titular, por muy guay que parezcan a veces.

Reemplazo de imágenes en los titulares

Esta es otra técnica popular para los diseñadores Web porque le permite crear un encabezado gráfico y reemplazar el texto de la etiqueta del encabezado con esa imagen. Esto es verdaderamente una práctica anticuada de los diseñadores web, que tenían acceso a muy pocas fuentes y querían usar fuentes más exóticas en su trabajo. El aumento de las fuentes web ha cambiado realmente la forma en que los diseñadores se acercan a los sitios. Los titulares ahora pueden ser colocados en una amplia variedad de fuentes e imágenes con esas fuentes incrustadas ya no son necesarias. Como tal, sólo encontrará imágenes CSS de reemplazo para titulares en sitios más antiguos que aún no han sido actualizados a prácticas más modernas.

Editado por Jeremy Girard el 9/6/17