Titlurile sunt comune în majoritatea paginilor web. De fapt, aproape orice document text tinde să aibă cel puțin un titlu, astfel încât să știți titlul a ceea ce citiți. Aceste titluri sunt codificate folosind HTML elemente de titlu - h1, h2, h3, h4, h5 și h6.
Pe unele site-uri, puteți constata că titlurile sunt codificate fără a utiliza aceste elemente. În schimb, titlurile pot folosi paragrafe cu atribute de clasă specifice adăugate acestora sau diviziuni cu elemente de clasă. Motivul pentru care auzim adesea despre această practică incorectă este că designerului „nu îi place modul în care arată titlurile”. În mod implicit, titlurile sunt afișate cu caractere aldine și au dimensiuni mai mari, în special elementele h1 și h2 care se afișează cu o dimensiune a fontului mult mai mare decât restul textului unei pagini. Rețineți că acesta este doar aspectul implicit al acestor elemente! Cu CSS, puteți face rubrica să arate cum doriți! Puteți schimba dimensiunea fontului, puteți elimina boldul și multe altele. Titlurile sunt modalitatea corectă de codificare a titlurilor unei pagini. Iată câteva motive pentru care.
De ce să folosiți etichete de titlu mai degrabă decât divizii
Acesta este cel mai bun motiv pentru a utiliza titluri și pentru a le folosi în ordinea corectă (adică. h1, apoi h2, apoi h3 etc.). Motoare de căutare acordați cea mai mare pondere textului inclus în etichetele de titlu, deoarece textul respectiv are o valoare semantică. Cu alte cuvinte, etichetând titlul paginii dvs. H1, îi spuneți păianjenului motorului de căutare că acesta este punctul # 1 al paginii. Titlurile H2 au accentul # 2 și așa mai departe.
Nu trebuie să vă amintiți ce clase ați folosit pentru a vă defini titlurile
Când știți că toate paginile dvs. de Web vor avea un H1 aldin, 2em și galben, atunci îl puteți defini odată în foaia de stil și ați terminat. 6 luni mai târziu, când adăugați o altă pagină, trebuie doar să adăugați o etichetă H1 în partea de sus a paginii, nu aveți pentru a reveni la alte pagini pentru a afla ce ID stil sau clasă ați folosit pentru a defini titlul principal și sub-capetele.
Oferiți o schiță puternică a paginii
Schițele fac textul mai ușor de citit. De aceea, majoritatea școlilor americane i-au învățat pe elevi să scrie o schiță înainte de a scrie lucrarea. Când utilizați etichete de titlu într-un format de contur, textul dvs. are o structură clară care devine evidentă foarte repede. În plus, există instrumente care pot revizui schița paginii pentru a oferi un sinopsis, iar acestea se bazează pe etichete de titlu pentru structura schiței.
Pagina dvs. va avea sens chiar și cu stilurile dezactivate
Nu oricine poate vizualiza sau utiliza foi de stil (iar acest lucru revine la numărul 1 - motoarele de căutare vizualizează conținutul (textul) paginii dvs., nu foile de stil). Dacă utilizați etichete de titlu, vă faceți paginile mai accesibile, deoarece titlurile oferă informații pe care a Etichetă DIV nu voi.
Este util pentru cititorii de ecran și accesibilitatea site-ului web
Utilizarea corectă a titlurilor creează o structură logică pentru un document. Aceasta este ceea ce cititorii de ecran vor folosi pentru a „citi” un site unui utilizator cu deficiențe de vedere, făcând site-ul dvs. accesibil persoanelor cu dizabilități.
Stilizați textul și fontul titlurilor dvs.
Cel mai simplu mod de a vă îndepărta de problema „mare, îndrăzneață și urâtă” a etichetelor de titlu este de a stiliza textul așa cum doriți să arate. De fapt, atunci când lucrați la un nou site web, este mai bine să scrieți în mod obișnuit stilurile de paragraf, h1, h2 și h3. Rămâneți doar cu familia de fonturi și dimensiunea / greutatea. De exemplu, aceasta ar putea fi o foaie de stil preliminară pentru un site nou (acestea sunt doar câteva exemple de stiluri care ar putea fi utilizate):
Puteți modifica fișierul fonturi a titlului dvs. sau modificați stilul textului sau chiar culoarea textului. Toate acestea îți vor transforma titlul „urât” în ceva mai vibrant și în concordanță cu designul tău.
Frontierele pot îmbrăca titlurile
Frontierele sunt o modalitate excelentă de a vă îmbunătăți titlurile și sunt ușor de adăugat. Dar nu uitați să experimentați marginile - nu aveți nevoie de o margine pe fiecare parte a titlului. Și puteți folosi mai mult decât simple margini plictisitoare.
Am adăugat o margine de sus și de jos la titlul eșantionului nostru pentru a introduce câteva stiluri vizuale interesante. Puteți adăuga chenare în orice mod doriți să atingeți stilul de design dorit.
Adăugați imagini de fundal la titlurile dvs. pentru și mai mult Pizazz
Multe site-uri web au o secțiune de antet în partea de sus a paginii, care include un titlu - de obicei titlul site-ului și o imagine. Majoritatea designerilor consideră acest lucru ca fiind două elemente separate, dar nu trebuie. Dacă grafica este acolo doar pentru a decora titlul, atunci de ce să nu o adăugăm la stilurile de titlu?
Trucul acestui titlu este că știm că imaginea noastră are o înălțime de 90 de pixeli. Așa că am adăugat umplutură în partea de jos a titlului de 90 px (umplutură: 0,5 0 90 px 0p;). Puteți juca cu marginile, înălțimea liniei și căptușeala pentru a obține textul titlului pentru a afișa exact unde doriți.
Un lucru de reținut atunci când utilizați imagini este că, dacă aveți un site web receptiv (pe care ar trebui) cu un aspect care se modifică în funcție de dimensiunile ecranului și de dispozitive, titlul dvs. nu va avea întotdeauna aceeași dimensiune. Dacă aveți nevoie ca titlul dvs. să aibă o dimensiune exactă, acest lucru poate cauza probleme. Este unul dintre motivele pentru care evităm, în general, imaginile de fundal într-un titlu, la fel de mișto pe cât pot arăta uneori.
Înlocuirea imaginii în titluri
Aceasta este o altă tehnică populară pentru designerii de web, deoarece vă permite să creați un titlu grafic și să înlocuiți textul etichetei de titlu cu acea imagine. Aceasta este, cu adevărat, o practică veche de la designerii de web, care aveau acces la foarte puține fonturi și doreau să folosească fonturi mai exotice în munca lor. Creșterea fonturilor web a schimbat într-adevăr modul în care designerii abordează site-urile. Titlurile pot fi acum setate într-o mare varietate de fonturi și imaginile cu aceste fonturi încorporate nu mai sunt necesare. Ca atare, veți găsi doar înlocuirea imaginilor CSS pentru titlurile de pe site-urile mai vechi care nu au fost încă actualizate la practici mai moderne.
Editat de Jeremy Girard