Los titulares son comunes en la mayoría de las páginas web. De hecho, casi cualquier documento de texto tiende a tener al menos un título para que sepa el título de lo que está leyendo. Estos encabezados se codifican utilizando los elementos de encabezado HTML: h1, h2, h3, h4, h5 y h6.
En algunos sitios, es posible que los titulares estén codificados sin utilizar estos elementos. En cambio, los titulares pueden usar párrafos con atributos de clase específicos agregados o divisiones con elementos de clase. La razón por la que a menudo escucho sobre esta práctica incorrecta es que al diseñador "no le gusta la apariencia de los encabezados". De forma predeterminada, los encabezados se muestran en negrita y tienen un tamaño mayor, 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 solo el aspecto predeterminado de estos elementos! Con CSS, puedes hacer que el encabezado se vea como quieras! Puedes cambiar el tamaño de la fuente, eliminar el negrita y mucho más. Los encabezados son la forma correcta de codificar los titulares de una página. Aquí hay algunas razones de por qué.
Por qué usar etiquetas de encabezado en lugar de DIV y estilo
Etiquetas de motores de búsqueda como encabezado
Esta es la mejor razón para usar encabezados y usarlos en el orden correcto (es decir, h1, luego h2, luego h3, etc.). Los motores de búsqueda otorgan la mayor ponderación al texto incluido dentro de las etiquetas de encabezado porque hay un valor semántico en ese texto. En otras palabras, al etiquetar el título de su página H1, le dice a la araña del motor de búsqueda que ese es el enfoque número 1 de la página. Los encabezados H2 tienen el énfasis # 2, y así sucesivamente.
No tiene que recordar qué clases utilizó para definir sus titulares
Cuando sepa que todas sus páginas web tendrán un H1 que está en negrita, 2em y amarillo, entonces puede definir eso una vez en su hoja de estilo y listo. 6 meses después, cuando agrega otra página, simplemente agrega una etiqueta H1 en la parte superior de su página, no tiene que volver a otras páginas para averiguar qué estilo de identificación o clase utilizó para definir la página principal. Titulares y subtítulos.
Proporcionan un fuerte perfil de la página
Los esquemas hacen que el texto sea más fácil de leer. Es por eso que la mayoría de las escuelas de EE. UU. Enseñaron a los estudiantes a escribir un esquema antes de escribir el documento. Cuando utiliza etiquetas de encabezado en un formato de esquema, su texto tiene una estructura clara que se manifiesta muy rápidamente. Además, existen herramientas que pueden revisar el esquema de la página para proporcionar una sinopsis, y estas se basan en etiquetas de encabezado para la estructura del esquema.
Tu página tendrá sentido incluso con los estilos desactivados
No todos pueden ver o usar las hojas de estilo (y esto vuelve al # 1: los motores de búsqueda ven el contenido (texto) de su página, no las hojas de estilo). Si usa etiquetas de encabezado, estará haciendo que sus páginas sean más accesibles porque los titulares proporcionan información que una etiqueta DIV no proporcionaría.
Es útil para lectores de pantalla y accesibilidad de sitios web
El uso adecuado de los encabezados 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.
Estilo del texto y la fuente de sus titulares
La forma más fácil de alejarse del problema "grande, audaz y feo" de las etiquetas de encabezado es diseñar el texto de la forma en que desea que se vea. De hecho, cuando se trabaja en un nuevo sitio web, lo mejor es escribir los estilos de párrafo, h1, h2 y h3 por primera vez. Quédate con solo familia de fuentes y tamaño / peso. Por ejemplo, esto podría ser una hoja de estilo preliminar para un sitio nuevo (estos son solo algunos ejemplos de estilos que podrían usarse):
Puede modificar las fuentes de su título o cambiar el estilo del texto o incluso el color del texto. Todo esto convertirá su titular "feo" en algo más vibrante y acorde con su diseño.
Las fronteras pueden disfrazar titulares
Los bordes son una excelente manera de mejorar sus titulares y son fáciles de agregar. Pero no olvide experimentar con los bordes: no necesita un borde a cada lado de su titular. Y puede usar más que simples bordes aburridos.
Agregué un borde superior e inferior a mi titular de muestra para presentar algunos estilos visuales interesantes. Puede agregar bordes de cualquier forma que desee para lograr el estilo de diseño que desea.
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 título, generalmente el título del sitio y un gráfico. La mayoría de los diseñadores piensan en esto como dos elementos separados, pero no tienes que hacerlo. Si el gráfico está solo para decorar el título, ¿por qué no agregarlo a los estilos de título?
El truco de este titular es que sé que mi imagen tiene 90 píxeles de altura. Así que agregué relleno al final del título de 90px (relleno: 0.5 0 90px 0p;). Puede jugar con los márgenes, la altura de la línea y el relleno para obtener el texto del título para que se muestre exactamente donde lo desea.
Una cosa que debe recordar al usar imágenes es que si tiene un sitio web sensible (que debería) con un diseño que cambia según el tamaño de la pantalla y los dispositivos, su titular no siempre será del mismo tamaño. Si necesita que su titular tenga un 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, tan bien como a veces pueden verse.
Reemplazo de imágenes en los titulares
Esta es otra técnica popular para los diseñadores web porque le permite crear un título gráfico y reemplazar el texto de la etiqueta del encabezado con esa imagen.Esta es verdaderamente una práctica antigua 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 auge de las fuentes web realmente ha cambiado la forma en que los diseñadores se acercan a los sitios. Los titulares ahora se pueden configurar en una amplia variedad de fuentes y las imágenes con esas fuentes incrustadas ya no son necesarias. Como tal, solo encontrará reemplazo de imágenes CSS para titulares en sitios antiguos que aún no se han actualizado a prácticas más modernas.
Editado por Jeremy Girard el 9/6/17
