Što je HTML

Što je HTML <head> – Vodič za Frontend Developere

U svijetu frontend razvoja, <head> element je jedan od ključnih dijelova svakog HTML dokumenta. Iako sadržaj unutar <head> elementa nije vidljiv posjetiteljima stranice, on igra kritičnu ulogu u postavljanju osnova za ispravno funkcioniranje i prikaz web stranice. U ovom članku, objasnit ćemo što je <head> element, kako funkcionira i zašto je važan za frontend developere.

Što je <head> Element?

U HTML-u, <head> element sadrži metapodatke o stranici. Nalazi se odmah ispod <!DOCTYPE> deklaracije i iznad <body> elementa, te obično sadrži informacije koje preglednik koristi kako bi ispravno prikazao stranicu i osigurao njezinu funkcionalnost.

Sintaksa izgleda ovako:

Element <head> nije vidljiv korisnicima jer ne sadrži sadržaj stranice poput teksta, slika ili videa. Međutim, unutar njega se nalaze ključne informacije za pretraživače, preglednike i vanjske servise.

Što se Nalazi unutar <head> Elementa?

Unutar <head> elementa smještaju se brojni važni podaci koji omogućuju pravilno funkcioniranje stranice. Evo najvažnijih elemenata koji se obično nalaze unutar <head>:

1. <title> – Naslov stranice

Element <title> definira naslov koji će se prikazati na kartici preglednika, te u rezultatima pretraživača poput Googlea:

Naslov je ključan za SEO optimizaciju, jer pruža tražilicama informaciju o sadržaju stranice. Dobar naslov može poboljšati vidljivost stranice u pretraživačima.

2. Meta oznake

Meta oznake pružaju dodatne informacije o stranici, poput karaktera seta, opisa, ključnih riječi, te pravila za indeksiranje tražilica:

Meta oznake pomažu tražilicama i preglednicima da bolje razumiju stranicu i optimiziraju njezin prikaz na različitim uređajima.

3. Povezivanje sa stilovima (CSS)

Unutar <head> elementa možete povezati vašu web stranicu s vanjskim ili internim CSS datotekama, što omogućuje stiliziranje elemenata unutar <body>:

Ovaj link omogućuje učitavanje CSS datoteke koja kontrolira izgled web stranice.

4. Povezivanje sa skriptama (JavaScript)

Osim stilova, unutar <head> elementa mogu se dodati i skripte, iako je često preporučeno dodavati ih na kraj <body> kako bi se izbjeglo usporavanje učitavanja stranice:

Dodavanje JavaScript datoteka omogućuje dinamičnu funkcionalnost stranice.

5. Favikona

Favikona je mala ikonica koja se prikazuje na kartici preglednika pored naslova stranice. Možete je dodati unutar <head> elementa koristeći <link> oznaku:

Favikona pomaže u brendiranju i prepoznatljivosti stranice.

6. Open Graph i Twitter kartice

Open Graph oznake omogućuju dijeljenje sadržaja na društvenim mrežama s ispravnim naslovom, slikom i opisom. Ove oznake također idu unutar <head>:

Ove oznake omogućuju bolju kontrolu nad prikazom stranice kada je dijeljena na platformama kao što su Facebook i Twitter.

Zašto je <head> Element Važan?

<head> element nije samo tehnička nužnost – on je osnova za pravilnu komunikaciju između vaše web stranice i vanjskih entiteta kao što su preglednici, tražilice i društvene mreže. Evo zašto je <head> element ključan za frontend developere:

SEO i vidljivost: Sadržaj unutar <head> elementa, poput naslova stranice i meta oznaka, pomaže u rangiranju vaše web stranice na tražilicama. Dobar naslov i opis mogu značajno povećati broj posjeta.
Korisničko iskustvo: Naslov stranice i favikona poboljšavaju korisničko iskustvo, pomažući korisnicima da brzo prepoznaju vašu stranicu u pregledniku.
Pravilno renderiranje stranice: Meta oznake kao što je viewport osiguravaju da se vaša stranica ispravno prikazuje na različitim uređajima, uključujući mobilne telefone i tablete.
Brzina učitavanja: Pravilno korištenje <head> elementa može poboljšati vrijeme učitavanja stranice. Na primjer, postavljanje CSS datoteka unutar <head> osigurava da se stilovi učitaju prije nego što se sadržaj prikaže.
Dijeljenje sadržaja: Open Graph i druge meta oznake olakšavaju dijeljenje sadržaja na društvenim mrežama s ispravnim informacijama i vizualima.

Primjer HTML Dokumenta s <head> Elementom

Evo jednostavnog primjera HTML dokumenta koji sadrži ključne elemente unutar <head>:

html

<!DOCTYPE html>

<html lang="hr">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta name="description" content="Ovo je primjer stranice koja koristi head element.">

  <title>Primjer HTML Dokumenta</title>

  <link rel="stylesheet" href="styles.css">

  <link rel="icon" href="favicon.ico" type="image/x-icon">

</head>

<body>

  <h1>Dobrodošli na našu stranicu!</h1>

  <p>Ovo je primjer HTML dokumenta s ispravnim head elementom.</p>

</body>

</html>

Zaključak

<head> element je ključni dio svakog HTML dokumenta. Iako njegov sadržaj nije direktno vidljiv korisnicima, pruža preglednicima, tražilicama i društvenim mrežama potrebne informacije za pravilno prikazivanje i optimizaciju stranice. Kao frontend developer, pravilno postavljanje i korištenje <head> elementa može poboljšati performanse, SEO optimizaciju i korisničko iskustvo vaše web stranice.

Dalibor Katić

Udruga “Putokaz”

Server – MyDataKnox

Dalibor Katić za vaš uspjeh!