Naslovi su česti na većini web stranica. U stvari, gotovo svaki tekstualni dokument obično ima barem jedan naslov kako biste znali naslov onoga što čitate. Ovi su naslovi kodirani pomoću HTML elementi naslova - h1, h2, h3, h4, h5 i h6.
Na nekim web mjestima možete pronaći da su naslovi kodirani bez upotrebe ovih elemenata. Umjesto toga, naslovi mogu koristiti odlomke s dodanim određenim atributima klase ili odjeljke s elementima klase. Razlog zbog kojeg često čujemo ovu pogrešnu praksu je taj što se dizajneru "ne sviđa kako izgledaju naslovi". Prema zadanim postavkama naslovi se prikazuju podebljano i veće su veličine, posebno elementi h1 i h2 koji se prikazuju u mnogo većoj veličini fonta od ostatka teksta stranice. Imajte na umu da je ovo samo zadani izgled ovih elemenata! S CSS, možete zaglavlje izgledati kako god želite! Možete promijeniti veličinu fonta, ukloniti podebljano i još mnogo toga. Naslovi su pravi način kodiranja naslova stranice. Evo nekoliko razloga zašto.
Zašto koristiti oznake naslova, a ne podjele
To je najbolji razlog da se naslovi koriste u ispravnom redoslijedu (tj. h1, pa h2, pa h3 itd.). Tražilice daju najveću težinu tekstu koji se nalazi unutar oznaka naslova jer taj tekst ima semantičku vrijednost. Drugim riječima, označavanjem naslova stranice H1 kažete pauku tražilice da je to prvo mjesto fokusa stranice. H2 naslovi imaju naglasak # 2, i tako dalje.
Ne morate se sjećati koje ste razrede koristili za definiranje svojih naslova
Kad znate da će sve vaše web stranice imati H1 podebljano, 2em i žuto, tada to možete jednom definirati u svom listu stilova i biti gotovo. 6 mjeseci kasnije, kada dodajete još jednu stranicu, na vrh stranice samo dodate oznaku H1, a nemate da biste se vratili na druge stranice da biste saznali koji ste ID ili klasu stila koristili za definiranje glavnog naslova i podnaslova.
Navedite snažan obris stranice
Obrisi olakšavaju čitanje teksta. Zbog toga je većina američkih škola naučila učenike da napišu strukturu prije nego što napišu rad. Kada upotrebljavate oznake zaglavlja u formatu obrisa, vaš tekst ima jasnu strukturu koja vrlo brzo postaje očita. Osim toga, postoje alati koji mogu pregledati obris stranice kako bi pružili sinopsis, a oni se oslanjaju na oznake naslova za strukturu obrisa.
Vaša će stranica imati smisla čak i kad su stilovi isključeni
Ne mogu svi pregledavati ili koristiti tablice stilova (i to se vraća na 1. mjesto - tražilice pregledavaju sadržaj (tekst) vaše stranice, a ne tabele stilova). Ako upotrebljavate oznake naslova, svoje ćete stranice učiniti dostupnijima jer naslovi pružaju informacije koje a DIV oznaka ne bi.
Korisno je za čitače zaslona i dostupnost web lokacijama
Pravilna upotreba naslova stvara logičnu strukturu dokumenta. To će čitači zaslona koristiti za "čitanje" web mjesta korisniku s oštećenjem vida, čineći vaše web mjesto dostupnim osobama s invaliditetom.
Oblikujte tekst i font naslova
Najlakši način da se odmaknete od "velikog, podebljanog i ružnog" problema naslovnih oznaka je oblikovanje teksta onako kako vi želite da izgleda. Zapravo, kada radite na novom web mjestu, najbolje je prvo napisati stilove paragrafa, h1, h2 i h3. Držite se samo obitelji fontova i veličine / težine. Na primjer, ovo bi mogao biti preliminarni tabela stilova za novo web mjesto (ovo su samo neki primjeri stilova koji se mogu koristiti):
Možete izmijeniti fontovi naslova ili promijenite stil teksta ili čak boju teksta. Sve će to vaš "ružni" naslov pretvoriti u nešto živahnije i u skladu s vašim dizajnom.
Granice mogu prerušiti naslove
Granice su sjajan način da poboljšate svoje naslove i lako ih je dodati. Ali ne zaboravite eksperimentirati s granicama - ne treba vam obrub sa svake strane naslova. Možete koristiti i više od običnih dosadnih granica.
Našem smo uzorku naslova dodali gornju i donju granicu kako bismo predstavili neke zanimljive vizualne stilove. Možete dodati obrube na bilo koji način kojim želite postići željeni stil dizajna.
Dodajte pozadinske slike svojim naslovima za još više Pizazza
Mnoge web stranice imaju odjeljak zaglavlja na vrhu stranice koji uključuje naslov - obično naslov stranice i grafiku. Većina dizajnera ovo smatra dvama odvojenim elementima, ali vi to ne morate. Ako je grafika tu samo da ukrašava naslov, zašto je onda ne biste dodali u stilove naslova?
Trik ovog naslova je u tome što znamo da je naša slika visoka 90 piksela. Tako smo dodali dodavanje na dno naslova od 90 piksela (dodavanje: 0,5 0 90 piksela 0p;). Možete se igrati s marginama, visinom retka i dodavanjem kako biste dobili tekst naslova da se prikaže točno tamo gdje želite.
Jednu stvar koju trebate zapamtiti kada koristite slike je da ako imate responzivna web stranica (što biste trebali) s izgledom koji se mijenja na temelju veličina zaslona i uređaja, vaš naslov neće uvijek biti iste veličine. Ako vam naslov treba biti točne veličine, to može stvoriti probleme. To je jedan od razloga zašto uglavnom izbjegavamo pozadinske slike u naslovu, koliko god cool mogle izgledati.
Zamjena slike u naslovima
Ovo je još jedna popularna tehnika za web dizajnere jer vam omogućuje stvaranje grafičkog naslova i zamjenu teksta oznake naslova tom slikom. Ovo je istina stara praksa web dizajnera, koji su imali pristup vrlo malo fontova i željeli su koristiti egzotičnije fontove u svom radu. Uspon web fontova zaista je promijenio način na koji dizajneri pristupaju web mjestima. Naslovi se sada mogu postaviti u najrazličitije fontove i slike s ugrađenim fontovima više nisu potrebne. Kao takvi, naći ćete zamjenu CSS slika za naslove samo na starijim web mjestima koja još nisu ažurirana na moderniju praksu.
Uredio Jeremy Girard