Usa letras, bordos e imaxes para decorar títulos
Os titulares son comúns na maioría das páxinas web. De feito, prácticamente calquera documento de texto tende a ter polo menos un titular para que coñeza o título do que está a ler. Estas titulares están codificadas usando os elementos de título HTML: h1, h2, h3, h4, h5 e h6.
Nalgúns sitios, pode que as titulares estean codificados sen usar estes elementos. En vez diso, os títulos poden usar parágrafos con atributos de clase específicos engadidos a eles, ou divisións con elementos de clase. A razón pola que moitas veces escoito falar sobre esta práctica incorrecta é que o diseñador "non lle gusta o xeito en que se vexan os encabezados". Por defecto, os encabezados móstranse en negra e son de tamaño máis grande, especialmente os elementos h1 e h2 que se amosan en tamaño de letra moito maior que o resto do texto dunha páxina. Teña en conta que este é só o aspecto predeterminado destes elementos. Con CSS, podes facer ollar o título que queiras. Pode cambiar o tamaño da fonte, eliminar o negrito e moito máis. Os encabezados son a forma adecuada de codificar os titulares dunha páxina. Aquí tes algunhas razóns.
Por que usar etiquetas de título en lugar de DIV e styling
Motores de busca como etiquetas de título
Este é o mellor motivo para usar os encabezados e usalos na orde correcta (ie h1, h2, h3, etc.). Os buscadores dan a maior ponderación ao texto incluído dentro das etiquetas de título porque hai un valor semántico para ese texto. Noutras palabras, ao etiquetar o título da páxina H1, dilles á araña do buscador que ese é o foco # 1 da páxina. Os títulos H2 teñen a énfase # 2, e así por diante.
Non debes recordar cales son as clases que usaches para definir as túas cabeceiras
Cando saiba que todas as páxinas web terán un H1 que sexa en negra, 2em e amarelo, entón podes definir unha vez na súa folla de estilo e facela. 6 meses despois, cando engades outra páxina, acaba de engadir unha etiqueta H1 á parte superior da túa páxina, non tes que volver a outras páxinas para descubrir que estilo ID ou clase usabas para definir a principal titulares e sub-xefes.
Proporcionan un contorno de páxina forte
Os contornos fan que o texto sexa máis fácil de ler. É por iso que a maioría das escolas de EE. UU. Ensinaban aos estudantes a escribir un esbozo antes de escribir o artigo. Cando usa as etiquetas de título nun formato de esquema, o seu texto ten unha estrutura clara que se fai evidente de forma moi rápida. Ademais, hai ferramentas que poden revisar o esquema da páxina para proporcionar unha sinopse e estas baséanse nas etiquetas de título para a estrutura do contorno.
A túa páxina fará sentido mesmo cos estilos desactivados
Non todos poden ver ou usar follas de estilo (e isto volve ao número 1: os motores de busca ven o contido (texto) da súa páxina e non as follas de estilo). Se usa as etiquetas de título, está facendo máis accesibles as súas páxinas porque os titulares fornecen información que non faría unha etiqueta DIV.
É útil para lectores de pantalla e accesibilidade de sitios web
O uso axeitado dos títulos crea unha estrutura lóxica para un documento. Isto é o que utilizarán os lectores de pantalla para "ler" un sitio a un usuario con discapacidade visual, facendo o seu sitio accesible a persoas con discapacidade.
Estilo o texto e a fonte das túas portadas
O xeito máis sinxelo de afastarse do problema "grande, ousado e feo" das etiquetas de título é o estilo do texto que desexa que mire. De feito, cando estou a traballar nun novo sitio web, adoito escribo o parágrafo h1, h2 e h3. Normalmente fico con só unha familia de fontes e tamaño / peso. Por exemplo, esta pode ser unha folla de estilo preliminar para un novo sitio (estes son só algúns estilos de exemplo que poderían usarse):
corpo, html {marxe: 0; padding: 0; } p {font: 1em Arial, Xenebra, Helvetica, sans-serif; } h1 {font: bold 2em "Times New Roman", Times, serif; } h2 {font: bold 1.5em "Times New Roman", Times, serif; } h3 {font: bold 1.2em Arial, Xenebra, Helvetica, sans-serif; }Pode modificar os tipos de letra do seu título ou cambiar o estilo de texto ou mesmo a cor do texto . Todos estes converterán o título "feo" en algo máis vibrante e de acordo co seu deseño.
h1 {font: negra cursiva 2em / 1em "Times New Roman", "MS Serif", "Nova York", serif; marxe: 0; padding: 0; cor: # e7ce00; }As fronteiras poden vestirse con títulos
Os bordos son unha boa forma de mellorar os títulos. E as fronteiras son fáciles de engadir. Pero non esqueza experimentar coas fronteiras - non precisa un borde a cada lado do seu título. E pode usar máis que simples bordos aburridos.
h1 {font: negra cursiva 2em / 1em "Times New Roman", "MS Serif", "Nova York", serif; marxe: 0; padding: 0; cor: # e7ce00; border-top: sólido # e7ce00 medio; borde inferior: punteado # e7ce00 fino; ancho: 600 píxeles; }Engadín un borde superior e inferior ao titular da mostra para introducir algúns estilos visuais interesantes. Pode engadir bordos de calquera forma que desexe acadar o estilo de deseño que desexa.
Engadir imaxes de fondo ás túas citas para aínda máis Pizazz
Moitos sitios web teñen unha sección de cabeceira na parte superior da páxina que inclúe un título - normalmente o título do sitio e un gráfico. A maioría dos deseñadores pensan niso como dous elementos separados, pero non tes que facelo. Se o gráfico hai só para decorar o título, entón por que non engadilo aos estilos de título?
h1 {font: negrita cursiva 3em / 1em "Times New Roman", "MS Serif", "Nova York", serif; fondo: #fff url ("fancyheadline.jpg") repetir-x fondo; padding: 0.5em 0 90px 0; alinear texto: centro; marxe: 0; límite inferior: sólido # e7ce00 0.25em; cor: # e7ce00; }O truco para este titular é que sei que a miña imaxe ten 90 píxeles de alto. Entón, eu engade relleno para o fondo do título de 90px (relleno: 0,5 0 90px 0p;). Podes xogar coas marxes, a altura da liña e o recheo para que o texto do título se mostre exactamente onde o desexes.
Unha cousa que recordar cando se usan imaxes é que se ten un sitio web sensible (que debería) cun deseño que cambia en función dos tamaños e dispositivos da pantalla, o título non sempre será do mesmo tamaño. Se precisa que o título sexa un tamaño exacto, isto pode causar problemas. É unha das razóns polas que generalmente evito as imaxes de fondo nun título, tan xenial como ás veces poden verse.
Reemplazo de imaxes nos titulares
Esta é outra técnica popular para os deseñadores web porque lle permite crear un título gráfico e substituír o texto da etiqueta de título con esa imaxe. Esta é verdadeiramente unha práctica antiquada dos diseñadores web que tiñan acceso a moi poucas fontes e quería usar fontes máis exóticas no seu traballo. O auxe das fontes web realmente cambiou o xeito no que os deseñadores achegan sitios. Os titulares agora poden configurarse nunha gran variedade de fontes e as imaxes con esas fontes incrustadas xa non son necesarias. Polo tanto, só atoparás substitucións de imaxes CSS para títulos en sitios antigos que aínda non se actualizaron a prácticas máis modernas.
Artigo orixinal de Jennifer Krynin. Editado por Jeremy Girard o 17/09/17