Utilitzeu els tipus de lletra, les vores i les imatges per decorar els titulars
Els titulars són comuns a la majoria de les pàgines web. De fet, pràcticament qualsevol document de text acostuma a tenir almenys un títol perquè conegui el títol del que està llegint. Aquests titulars es codifiquen amb els elements de l'etiqueta HTML: h1, h2, h3, h4, h5 i h6.
En alguns llocs, podeu trobar que els titulars estan codificats sense utilitzar aquests elements. En canvi, els titulars poden utilitzar paràgrafs amb atributs específics de classes afegits o divisions amb elements de classe. La raó per la qual sovint parlo d'aquesta pràctica incorrecta és que el dissenyador "no li agrada la forma en què es veuen els encapçalaments". De manera predeterminada, els encapçalaments es mostren en negreta i són de mida més gran, especialment els elements h1 i h2 que es mostren en una mida de lletra molt més gran que la resta del text de la pàgina. Tingueu en compte que això només és l'aspecte predeterminat d'aquests elements. Amb CSS, podeu fer que el títol es mostri com vulgueu. Podeu canviar la mida de la lletra, treure l'en negreta i molt més. Les capçaleres són la manera correcta de codificar els titulars d'una pàgina. Aquests són alguns motius pels quals.
Per què utilitzar etiquetes d'encapçalament en comptes de DIV i estilització
Motors de cerca com etiquetes de títol
Aquesta és la millor raó per utilitzar els encapçalaments, i utilitzar-los en l'ordre correcte (és a dir, h1, després h2, després h3, etc.). Els motors de cerca donen la màxima ponderació al text inclòs dins de les etiquetes de l'encapçalament perquè hi ha un valor semàntic a aquest text. Dit d'una altra manera, mitjançant l'etiquetatge del títol de la vostra pàgina H1, us indiquem a l'aranya del motor de cerca que aquest és el focus número 1 de la pàgina. Els encapçalaments H2 tenen l'èmfasi # 2, i així successivament.
No heu de recordar quines classes heu utilitzat per definir els vostres titulars
Quan sàpigues que totes les pàgines web tindran un H1 en negreta, 2em i groc, llavors podeu definir-lo una vegada al vostre full d'estils i fer-ho. 6 mesos més tard, quan afegiu una altra pàgina, només heu d'afegir una etiqueta H1 a la part superior de la vostra pàgina, no haureu de tornar a altres pàgines per esbrinar quina identificació o classe d'estil usava per definir la principal capçalera i caps secundaris.
Proporcionen un esquema fort de la pàgina
Els esquemes permeten que el text sigui més fàcil de llegir. Per això, la majoria de les escoles dels EUA van ensenyar als estudiants a escriure un esquema abans d'escriure el document. Quan feu servir etiquetes de capçalera en un format de contorn, el vostre text té una estructura clara que es fa evident molt ràpidament. A més, hi ha eines que poden revisar l'esbós de la pàgina per proporcionar una sinopsi, i aquestes confien en etiquetes de títol per a l'estructura del contorn.
La vostra pàgina tindrà sentit fins i tot amb els estils desactivats
No tothom pot visualitzar o utilitzar fulls d'estil (i això torna a # 1: els motors de cerca veuen el contingut (text) de la vostra pàgina, no els fulls d'estil). Si utilitzeu etiquetes de rúbrica, fa que les vostres pàgines siguin més accessibles perquè els titulars proporcionen informació que no seria una etiqueta DIV.
És útil per a lectors de pantalla i accessibilitat per a llocs web
L'ús adequat dels encapçalaments crea una estructura lògica per a un document. Això és el que utilitzaran els lectors de pantalla per "llegir" un lloc a un usuari amb discapacitat visual, fent accessible el vostre lloc a persones amb discapacitat.
Estil el text i la font dels vostres titulars
La manera més fàcil d'allunyar-se del problema "gran, atrevit i lleig" de les etiquetes de títol és l'estil del text de la manera que vulgueu que es vegin. De fet, quan treballo en un lloc web nou, normalment escric els paràgrafs, h1, h2 i h3. En general, em quedo amb la família de fonts i la mida / pes. Per exemple, aquest podria ser un full d'estil preliminar per a un lloc nou (aquests són només alguns estils d'exemple que es podrien utilitzar):
cos, html {marge: 0; farcit: 0; } p {font: 1em Arial, Ginebra, 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, Geneva, Helvetica, sans-serif; }Podeu modificar els tipus de lletra del títol o canviar l'estil de text o fins i tot el color del text . Tot plegat converteix el títol "lleig" en una cosa més vibrant i d'acord amb el vostre disseny.
H1 {font: negreta cursiva 2em / 1em "Times New Roman", "MS Serif", "Nova York", serif; marge: 0; farcit: 0; color: # e7ce00; }Les fronteres poden vestir els titulars
Les fronteres són una bona manera de millorar els vostres titulars. I les fronteres són fàcils d'afegir. Però no us oblideu d'experimentar amb les fronteres: no necessiteu una vora a cada costat del títol. I podeu utilitzar més que simples barreres avorrides.
H1 {font: negreta cursiva 2em / 1em "Times New Roman", "MS Serif", "Nova York", serif; marge: 0; farcit: 0; color: # e7ce00; border-top: sòlid # e7ce00 medium; frontera inferior: puntejada # e7ce00 prima; ample: 600 px; }He afegit una vora superior i inferior al títol de la meva mostra per introduir alguns estils visuals interessants. Podeu afegir vora de qualsevol manera que vulgueu aconseguir l'estil de disseny que voleu.
Afegiu imatges de fons a les vostres titulars Per a més Pizazz
Molts llocs web tenen una secció de capçalera a la part superior de la pàgina que inclou un títol, normalment el títol del lloc i un gràfic. La majoria dels dissenyadors pensen en això com dos elements separats, però no cal fer-ho. Si el gràfic només hi ha per decorar el titular, llavors per què no afegir-lo als estils de l'encapçalament?
h1 {font: negreta cursiva 3em / 1em "Times New Roman", "MS Serif", "Nova York", serif; background: #fff url ("fancyheadline.jpg") repeat-x bottom; farcit: 0,5em 0 90px 0; align-text: centre; marge: 0; frontera inferior: sòlid # e7ce00 0.25em; color: # e7ce00; }El truc d'aquest títol és que sé que la meva imatge és de 90 píxels d'alçada. Així que vaig afegir farcit a la part inferior del títol de 90px (farcit: 0,5 0 90px 0p ;). Podeu jugar amb els marges, l'alçada de la línia i el farcit perquè el text del títol es mostri exactament on el voleu.
Una cosa a recordar quan s'utilitzen imatges és que si teniu un lloc web sensible (que us hauria de fer) amb un disseny que canvia segons talles i dispositius de la pantalla, el títol no sempre serà de la mateixa mida. Si necessiteu que el títol tingui una mida exacta, això pot causar problemes. És un dels motius pels quals generalment evito imatges de fons en un títol, tan genial com de vegades es pot veure.
Reemplaçament d'imatges als titulars
Aquesta és una altra tècnica popular per als dissenyadors web perquè permet crear un títol gràfic i reemplaçar el text de l'etiqueta de títol amb aquesta imatge. Això és veritablement una pràctica antiquada dels dissenyadors web que tenien accés a molt poques fonts i volien utilitzar fonts més exòtiques en el seu treball. L'augment de fonts web ha canviat realment com els dissenyadors s'apropen als llocs. Les capçaleres ara es poden establir en una gran varietat de fonts i les imatges amb aquestes fonts incrustades ja no són necessàries. Com a tal, només trobareu reemplaçament d'imatges CSS per titulars en llocs més antics que encara no s'han actualitzat a pràctiques més modernes.
Article original de Jennifer Krynin. Editat per Jeremy Girard el 17/09/17