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 titulares se codifican con el HTML elementos de encabezado: 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 escuchamos acerca de esta práctica incorrecta es que al diseñador "no le gusta cómo se ven los títulos". De forma predeterminada, los títulos se muestran en negrita y son de mayor tamaño, 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 título se vea como quieras! Puede cambiar el tamaño de fuente, eliminar el negrita y mucho más. Los títulos son la forma correcta de codificar los títulos de una página. Aquí hay algunas razones de por qué.
Por qué utilizar etiquetas de encabezado en lugar de divisiones
Esta es la mejor razón para usar encabezados y usarlos en el orden correcto (p. Ej. h1, luego h2, luego h3, etc.). Los motores de búsqueda otorgue la mayor ponderación al texto incluido dentro de las etiquetas de encabezado porque hay un valor semántico para 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 # 1 de la página. Los encabezados H2 tienen el énfasis n. ° 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 en negrita, 2em y amarillo, puede definirlo 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 para volver a otras páginas y averiguar qué ID de estilo o clase usó para definir el título principal y los subtítulos.
Proporcione un esquema de página sólido
Los contornos facilitan la lectura del texto. 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 artículo. Cuando usa etiquetas de encabezado en un formato de esquema, su texto tiene una estructura clara que se hace evidente muy rápidamente. Además, existen herramientas que pueden revisar el esquema de la página para proporcionar una sinopsis, y se basan en etiquetas de encabezado para la estructura del esquema.
Tu página tendrá sentido incluso con los estilos desactivados
No todo el mundo puede ver o usar 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, está haciendo que sus páginas sean más accesibles porque los encabezados brindan información que un Etiqueta DIV no lo haría.
Es útil para lectores de pantalla y accesibilidad a sitios web
El uso adecuado de los títulos crea una estructura lógica para un documento. Esto es lo que los lectores de pantalla usarán para "leer" un sitio a un usuario con discapacidad visual, haciendo que su sitio sea accesible para personas con discapacidades.
Diseñe el texto y la fuente de sus titulares
La forma más fácil de alejarse del problema "grande, en negrita 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 sitio web nuevo, lo mejor es escribir los estilos de párrafo, h1, h2 y h3 a primera hora. Quédese solo con la familia de fuentes y el tamaño / peso Por ejemplo, esta podría ser una hoja de estilo preliminar para un nuevo sitio (estos son solo algunos estilos de ejemplo que podrían usarse):
Puede modificar el fuentes de su título o cambie 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 los 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 título. Y puede usar más que simples bordes aburridos.
Agregamos un borde superior e inferior a nuestro título de muestra para presentar algunos estilos visuales interesantes. Puede agregar bordes de la forma que desee para lograr el estilo de diseño que desee.
Agregue imágenes de fondo a sus titulares para obtener aún más dinamismo
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 usted no tiene por qué hacerlo. Si el gráfico está ahí solo para decorar el título, ¿por qué no agregarlo a los estilos de título?
El truco de este titular es que sabemos que nuestra imagen tiene 90 píxeles de alto. Así que agregamos relleno en la parte inferior del título de 90 px (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 título se muestre exactamente donde lo desee.
Una cosa para recordar al usar imágenes es que si tiene un sitio web adaptable (que debería) con un diseño que cambia según el tamaño de la pantalla y los dispositivos, su título no siempre será del mismo tamaño. Si necesita que su título tenga un tamaño exacto, esto puede causar problemas. Es una de las razones por las que generalmente evitamos las imágenes de fondo en un titular, por muy interesantes que puedan parecer a veces.
Reemplazo de imágenes en 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 título 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 utilizar 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 más antiguos que aún no se han actualizado a prácticas más modernas.
Editado por Jeremy Girard