Virsraksti ir izplatīti lielākajā daļā tīmekļa lapu. Faktiski gandrīz jebkuram teksta dokumentam parasti ir vismaz viens virsraksts, lai jūs zināt, ko jūs lasāt. Šīs virsraksti tiek kodēti, izmantojot HTML pozīcijas elementus - h1, h2, h3, h4, h5 un h6.
Dažās vietnēs jūs varat atrast, ka virsrakstus kodē, neizmantojot šos elementus. Tā vietā virsraksti var izmantot punktus ar īpašiem klases atribūtiem, kas tiem pievienoti, vai sadalījumu ar klases elementiem. Iemesls, ko bieži dzirdu par šo nepareizo praksi, ir tāds, ka dizainers "nepatīk, kā izskatās pozīcijas". Pēc noklusējuma pozīcijas tiek parādītas treknrakstā, un tās ir lielākas, jo īpaši h1 un h2 elementi, kas parāda daudz lielāku fonta lielumu nekā pārējais lapas teksts. Paturiet prātā, ka šis ir tikai šo elementu noklusējuma izskats! Ar CSS, jūs varat padarīt pozīciju izskatās tomēr vēlaties! Varat mainīt fonta lielumu, noņemt treknrakstu un vēl daudz vairāk. Virsraksti ir pareizs veids, kā kodēt lapas virsrakstus. Tālāk ir minēti daži iemesli.
Kāpēc lietot virsrakstus, nevis DIV un stilu
Meklētājprogrammas, piemēram, virsrakstu birkas
Tas ir labākais iemesls, kā izmantot pozīcijas, un izmantot tos pareizā secībā (ti, h1, tad h2, pēc tam h3 utt.). Meklētājprogrammas dod visaugstāko svērumu tekstā, kas iekļauts rubrikā "tagi", jo šim tekstam ir semantiska vērtība. Citiem vārdiem sakot, marķējot lapas nosaukumu H1, jūs informējat meklētājprogrammu zirnekli, ka tas ir lapas pirmais fokuss. H2 virsrakstos ir # 2 uzsvars, un tā tālāk.
Jums nav jāatceras, kādas klases jūs izmantojat, lai noteiktu jūsu virsrakstus
Kad jūs zināt, ka visām jūsu tīmekļa lapām būs H1, kas ir treknā, 2em un dzeltenā krāsā, tad to var definēt vienu reizi savā stilu tabulā un izdarīt. 6 mēnešus vēlāk, kad pievienojat citu lapu, jūs vienkārši pievienojat H1 tagu savas lapas augšdaļā, jums nav jāatgriežas citās lapās, lai uzzinātu, kurš stila ID vai klase jums ir izmantota, lai noteiktu galveno virsraksts un apakšgrupas.
Tie nodrošina spēcīgu lappusi
Konstruēšana padara tekstu vieglāk lasāmu. Tāpēc lielākā daļa ASV skolas mācīja skolēnus rakstīt izklāstu, pirms viņi raksta papīru. Kad jūs izmantojat virsraksta tagus vispārīgā formātā, jūsu tekstam ir skaidra struktūra, kas izpaužas ļoti ātri. Turklāt ir arī rīki, kas var pārskatīt lapas aprakstu, lai sniegtu kopsavilkumu, un tie balstās uz virsraksta struktūras tagu virsrakstiem.
Jūsu lapa darīs skaņu, pat ja stili ir izslēgti
Ne visi var apskatīt vai izmantot stila lapas (un tas atgriežas pie # 1 - meklētājprogrammās tiek apskatīts lapas saturs (teksts), nevis stilu lapas). Ja izmantojat frāžu tagus, padarāt savas lapas pieejamākas, jo virsrakstos tiek sniegta informācija, ka DIV tags nebūtu.
Tas ir noderīgi ekrāna lasītājiem un tīmekļa vietņu pieejamībai
Pareiza pozīciju izmantošana rada loģisku dokumenta struktūru. Tas ir tas, ko ekrāna lasītāji izmantos, lai "lasītu" vietni lietotājam ar redzes traucējumiem, padarot jūsu vietni pieejamu cilvēkiem ar invaliditāti.
Stiliet savu virsrakstu tekstu un fontu
Vienkāršākais veids, kā izvairīties no "lielas, treknējas un neglītas" pozīcijas tagu problēmas, ir teksta stils tā, kā vēlaties tos meklēt. Faktiski, strādājot pie jauna tīmekļa vietnes, vislabāk vispirms vispirms rakstīt rindkopu, h1, h2 un h3 stilus. Stick ar tikai fontu saimes un izmēru / svaru. Piemēram, tā var būt sākotnējā stila lapa jaunai vietnei (šie ir tikai daži piemēri, kurus var izmantot):
Varat mainīt sava virsraksta fontus vai mainīt teksta stilu vai pat teksta krāsu. Visi šie padara jūsu "neglītu" virsrakstu par kaut ko vairāk dinamisku un atbilstoši jūsu dizainam.
Robežas var saģērbt virsrakstus
Robežas ir lielisks veids, kā uzlabot virsrakstus, un tos ir viegli pievienot. Bet neaizmirstiet eksperimentēt ar robežām - jums nevajag robežu katrā virsrakstā. Un jūs varat izmantot ne tikai vienkāršas urbšanas robežas.
Mana parauga virsrakstā es pievienoju augšējo un apakšējo malu, lai ieviestu interesantus vizuālos stilus. Jūs varētu pievienot robežas tādā veidā, kā jūs gribējāt sasniegt vēlamo dizaina stilu.
Pievienojiet fona attēlus jūsu virsrakstiem vēl vairāk Pizazz
Daudzām tīmekļa vietnēm ir galvenes sadaļa lapas augšdaļā, kas ietver virsrakstu - parasti vietnes nosaukumu un grafiku. Lielākā daļa dizaineru to uzskata par diviem atsevišķiem elementiem, bet jums to nav. Ja grafika ir tikai, lai izrotātu virsrakstu, tad kāpēc ne pievienot to pozīcijas stiliem?
Šim virsrakstam triks ir tas, ka es zinu, ka mans attēls ir 90 pikseļu garš. Tāpēc es pievienoju polsterējumu 90px virsraksta apakšai (polsterējums: 0.5 0 90 pikseļi 0p;). Jūs varat spēlēt ar starpību, līnijas augstumu un polsterējumu, lai iegūtu virsraksta tekstu, lai parādītu tieši to vietu, kur to vēlaties.
Viena lieta, kas jāatceras, izmantojot attēlus, ir tāda, ka, ja jums ir pielāgojama vietne (kas jums vajadzētu) ar izkārtojumu, kas mainās atkarībā no ekrāna izmēriem un ierīcēm, virsraksts ne vienmēr būs vienāda izmēra. Ja jums ir nepieciešams, lai jūsu virsraksts būtu precīzs izmērs, tas var radīt problēmas. Tas ir viens no iemesliem, kāpēc es vispār izvairītos no fona attēla virsrakstā, tikpat jaudīgi, kā dažreiz var izskatīties.
Attēlu aizstāšana virsrakstos
Šī ir vēl viena populāra Web izstrādātāju tehnoloģija, jo tā ļauj jums izveidot grafisko virsrakstu un aizvietot virsraksta tagu ar šo attēlu.Tas ir patiesi novecojusi tīmekļa dizaineru prakse, kurai bija pieejams pavisam nedaudz fontu un vēlējās izmantot eksotiskus fontus savā darbā. Interneta fontu pieaugums patiešām ir mainījis to, kā dizaineri tuvojas vietnēm. Tagad virsrakstus var iestatīt dažādos fontos, un šie fonti vairs nav vajadzīgi. Tādējādi jūs atradīsit CSS attēlu noņemšanu tikai virsrakstos vecākajās vietnēs, kuras vēl nav atjauninātas, lai veidotu mūsdienīgākas darbības.
Rediģējis Džeremijs Girards no 9/6/17
