HTML – Head elementi
Do sada smo se upoznali sa nekim osnovnim elementima HTML-a, a u prošlom tekstu smo vam predstavili DOM (Document Object Model). U ovom tekstu ćemo objasniti šta je to HTML head element i čemu on služi.
Head element je sastavni deo svakog HTML dokumenta i sadrži meta podatke (podatke o podacima)ali i neke druge elemente sa kojima ćemo vas dalje u tekstu bliže upoznati . U HTML dokumentu head element je smešten između html i body tagova.
Važno je znati da prema HTML5 standardu head element može biti izostavljen, ali mi to ne preporučujemo iz razloga koje ćemo navesti u daljem tekstu.
Sadržaj ovog elementa nije vidiljiv u pretraživaču, ali će biti parsiran u pretraživaču i daće mu važne informacije o načinu na koji će vam veb-stranica biti prikazana. Pored pretraživača head element može da obezbedi važne informacije i za platforme za pretragu (Google, Bing…), kao i za druge veb servise.
Evo primera sadržaja jednog standardnog head elementa (u verziji HTML5):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style></style>
<meta />
<link />
<script></script>
</head>
<body>
</body>
</html>
CHARSET
Ovde možemo odmah da primetimo da se u okviru head elementa nalazi nekoliko meta tagova kao što su charset koji u ovom slučaju ima vrednost UTF-8 koja se koristi na manje više svakom sajtu. UTF-8 je format enkodiranja teksta koji podržava najveći broj karatktera koji vam mogu zatrebati na veb-sajtu. S obzirom da je ovo meta element (meta tag), njegova uloga na veb-sajtu jeste da pretraživaču da dodatne informacije o samoj veb-stranici. Pojednostavljeno rečeno, to je ujedno i uloga svih ostalih head elemenata koji se nalaze između uvodnog i završnog head taga.
Kada pretraživač u ovom slučaju „vidi“ da meta tag charset ima vrednost UTF-8, odmah će razmeti da stranica koristi ovaj standard za enkodiranje teksta. Na taj način uz pomoć head elemenata zapravo dajete dodatne informacije pretraživaču, koje su važne za pravilan prikaz veb-stranice.
Tako već sledeći meta element na našem primeru („viewport“) ima atribut sadržaja sa vrednostima “width=device-width, initial-scale=1.0” Ovaj konkretni meta tag nam omogućava da definišemo vidljivi deo veb-stranice – onaj koji korisnik vidi u svom pretraživaču.
Informacija koju ovde dajemo pretraživaču jeste da širina vidljivog dela veb-stranice treba da bude jednaka širini uređaja na kojem se stranica pregleda (width=device-width). Time zapravo postavljamo osnovu za takozvani responsive veb-dizajn, koji ćemo kasnije postići uz pomoć CSS-ovog @media pravila.
initial-scale=1.0 prestavlja nivo uvećanja sadržaja ekrana prilikom prvog učitavanja stranice u pretraživaču. Vrednost 1.0 predstavlja standardni nivo uvećanja od 100%.
TITLE
Title tag definiše naziv HTML dokumenta (stranice) u tabu pretraživača i u SERP-u.
STYLE
Style tag definiše CSS stil za konkretnu HTML stranicu. Unutar style tagova definišemo način na koji će se sadržaj veb-stranice renerovati u pretraživaču. Ako se u HTML-u koristi style tag, on mora biti smešten u head element. Peporuka je da za bilo kakvo stilizovanje sadržaja veb-stranice koristite eksterni CSS fajl sa stilovima. Nećemo detaljnije ulaziti u pitanje CSS stilova, ali je dobro da znate da postoji opcija stilizovanja u okviru HTML-a (u okviru head elementa).
<style>
body {background-color: lightcoral;}
h1 {color: blue;}
p {color: yellow;}
</style>
Ovako primenjen stil će obojiti pozadinu (body) veb-stranice u svetlo-koralnuboju, sve H1 elemente u plavu boju i sve P elemente u žutu boju. Kao što smo u prethodnom pasusu već pomenuli, naša preporuka je da ovo postignete primenom stila u eksternom CSS file-u uz pomoć link elementa.
META
Meta tagovi imaju veoma važnu ulogu u HTML-u i sastavni su deo head elementa. Već smo ih pomenuli na početku teksta, ali nije na odmet da ovde dodatno pojasnimo neke od češće korišćenih meta tagova u praksi:
<head>
<meta charset="UTF-8">
<meta name="description" content="Opis tvoje stranice">
<meta name="keywords" content="Ključne reči tvoje stranice">
<meta name="author" content="Petar Petrović">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Pored već pomenutog charset taga, u praksi vrlo često koristimo i tagove description i keywords. Rastom popularnosti optimizacije veb-stranica za pretragu u platformama za pretragu, ova dva meta taga su postala veoma popularna. Glavni razlog tome je što njihova vrednost (sadržaj) u mnogome može da utiče na poziciju vaše veb-stranice (veb-sajta) u rezultatima pretrage u Google-u ili nekoj drugoj platformi za pretragu, pa su iz tog razloga postale neka vrsta standarda u okviru head elementa.
Author tag, kako i sam naziv implicira sadrži naziv autora veb-stranice.
Viewport tag smo već pomenuli na početku ovog teksta, pa nema potrebe da se ponavljamo.
Važno je napomenuti da za razliku od ostalih elemenata, meta tag u HTML-u nema završni tag.
LINK
U prethodnom poglavlju smo već pomenuli eksterni CSS fajl. Sledeći na našem primeru i u našoj listi HTML head elemenata je link element koji upućuje na eksterni CSS fajl. On po svojoj definiciji spada u takozvane prazne elemente, odnosno nema sadržaja osim svojih atributa (u ovom slučaju rel i href).
<link rel="stylesheet" href="mojCSSfajl.css">Stylesheet znači da se link odnosi na eksterni CSS fajl, dok href upućuje na tačan naziv eksternog fajla koji sadrži CSS stilove. Tako definisani stilovi u eksternom CSS fajlu menjaju sadržaj HTML dokumenta na željeni/definisani način. Mnogo je načina na kojim se CSS-om može uticati na sadržaj HTML dokumenta/stranice i time ćemo se baviti u nekom od naših narednih tekstova.
SCRIPT
Kao što i sam naziv implicira, script tag sadrži JavaScript kod. Načelno, JavaScript kod u HTML-u može biti smešten u okviru head elementa ili u okviru body elementa. S obzirom da JavaScript kod u head –u može da izazove određene probleme prilikom učitavanja stranice, ili u najboljem slučaju da uspori njeno učitavanje, dobra praksa je da se on stavlja na dnu body sekcije, i to odmah pre završnog body taga.
Razlog ovome leži u tome što pretraživač parsira HTML dokument odozgo na dole, po redosledu kako je i napisan. Ukoliko se JavaScript kod nalazi u head sekciji on će biti izvršen pre vidljivog dela veb-stranice (body sekcija). Ukoliko postoji neki problem u samom kodu, može se desiti da stranica u tom slučaju uošte ne bude ni učitana i da kao rezultat dobijemo beli ekran u pretraživaču.
Sa druge strane, ukoliko se kod smesti na dno body sekcije, cela HTML stranica će do tada već biti parsirana i prikazana u pretraživaču, pa u slučaju da postoji neki problem sa JavaScript kodom, to neće uticati na njen prikaz u pretraživaču. U tom slučaju kod neće biti izvršen, ali će se stranica prikazati u pretraživaču, pa će samim tim i šteta po korisničko iskustvo biti manja.
Ovim smo vam ukratko predstavili head elemente i kratko vas upoznali sa njihovim osnovnim namenama u razvoju veb-stranica.
Ukoliko želite da više pročitate i naučite na ovu temu, posetite Mozilla MDN web docs i saznajte još korisnih informacija.
Nenad Mihajlović