Osnove HTML-a

Objavljeno: 18 travnja, 2025

HTML (HyperText Markup Language, odnosno hipertekstualni označni jezik) je standardni jezik za izradu web stranica i predstavlja temelj strukture sadržaja na World Wide Webu. Za razliku od programskog jezika koji se temelji na logici i naredbama, HTML je jezik za označavanje – koristi posebne oznake (tagove) kojima obilježava tekst, slike i drugi sadržaj kako bi web preglednik znao kako ga prikazati. Svaka web stranica u svojoj srži koristi HTML. Stoga je poznavanje HTML-a ključna vještina za svakog budućeg web programera. HTML elementi su građevni blokovi web stranica: preko njih preglednik razumije što je naslov, odlomak, slika i slično. Strukturiranjem sadržaja ispravnim HTML oznakama dajemo značenje i hijerarhiju inače običnom tekstu.

U ovom vodiču za početnike obradit ćemo osnovne pojmove i strukturu HTML-a. Proći ćemo kroz jednostavan primjer kako bismo pokazali kako HTML oznake zajedno tvore strukturu web stranice. Također, usporedit ćemo HTML s drugim jezicima za označavanje, poput Markdowna, te s templating sintaksom poput JSX-a kako bismo istaknuli razlike. Na kraju ćemo izdvojiti neke trendove i najbolje prakse u razvoju HTML-a u 2025. godini. Bilo da ste novi u svijetu web razvoja ili samo ponavljate gradivo, ovaj će vam članak pružiti dobru osnovu za razumijevanje HTML-a.

Osnovni pojmovi i struktura HTML-a

Struktura HTML dokumenta: HTML datoteka ima određenu strukturu kako bi je preglednici mogli ispravno interpretirati. Na samom vrhu svakog HTML dokumenta piše se <!DOCTYPE html> kako bi se pregledniku dalo do znanja da je riječ o HTML5 dokumentu. Sadržaj stranice zatim je smješten unutar elementa <html>, koji predstavlja korijenski element dokumenta. Unutar <html> elementa obično se nalaze dva glavna dijela: <head> i <body>.

<head> sekcija sadrži metapodatke o stranici (informacije koje se ne prikazuju izravno na stranici). Primjerice, head uključuje <title> stranice (naslov koji se prikazuje na kartici preglednika), deklaraciju znakovnog seta (npr. <meta charset="UTF-8"> za ispravan prikaz znakova) te druge metapodatke ili poveznice na CSS datoteke. Nasuprot tome, <body> sekcija sadrži sav sadržaj koji će biti vidljiv korisniku u pregledniku – tekst, slike, poveznice, popise i dr.

Pogledajmo primjer vrlo jednostavne HTML stranice:

U gornjem primjeru:

<!DOCTYPE html> deklarira dokument kao HTML5.
<html lang="hr"> je korijenski element stranice, s atributom lang koji označava jezik sadržaja (hr za hrvatski u ovom primjeru).
<head> ... </head> sadrži metapodatke; ovdje postavljamo kodnu stranicu na UTF-8 i definiramo <title> stranice kao “Moja prva stranica”.
<body> ... </body> sadrži vidljivi sadržaj stranice. U našem primjeru, body ima naslov (<h1>) i odlomak (<p>). Odlomak također sadrži poveznicu definiranu <a> oznakom (<a href="...">...</a>).

Uobičajene HTML oznake: Unutar tijela stranice (body), HTML nudi razne oznake za strukturiranje različitih vrsta sadržaja:

Naslovi: Oznake <h1> do <h6> koriste se za naslove sekcija, pri čemu je <h1> najveći (obično glavni naslov), a <h6> najmanji.
Odlomci: <p> definira odlomak teksta.
Poveznice: <a> oznaka definira hipervezu (link) na drugu stranicu. Koristi atribut href za određivanje URL-a na koji povezuje.
Slike: <img> umeće sliku. Koristi atribut src za putanju do slikovne datoteke te atribut alt za opis slike (važan za pristupačnost ako se slika ne može prikazati).
Popisi: <ul> stvara neuređeni popis (označen točkama), <ol> stvara uređeni (numerirani) popis, a svaka stavka je unutar <li> oznake.

To je samo nekoliko primjera — HTML ima mnogo drugih oznaka za strukturiranje sadržaja (primjerice <table> za tablice, <form> za forme, te semantičke elemente poput <article>, <nav> i <footer> uvedene u HTML5). Kao početniku, najvažnije je prvo razumjeti i uvježbati korištenje osnovnih oznaka, što će vam pružiti čvrstu bazu.

Važno je zapamtiti da većina HTML oznaka dolazi u paru: početna oznaka (npr. <p>) i završna oznaka (npr. </p>), a sadržaj se nalazi između njih. Oznake treba ispravno ugnijezditi (engl. nesting), što znači da ako unutar jedne oznake otvorite drugu, tu drugu trebate zatvoriti prije nego što zatvorite izvornu oznaku. U našem primjeru <a> oznaka za poveznicu otvorena je i zatvorena unutar <p> odlomka, čime je struktura pravilno ugniježđena.

Neke oznake su samostalne (prazni elementi) i nemaju završnu oznaku. Primjerice, <img> ili <br> (prelazak u novi red) pišu se kao pojedinačna oznaka (obično sa završnim znakom />) i ne trebaju zasebnu zatvarajuću oznaku. Pravilno ugniježđivanje i zatvaranje oznaka u HTML-u osigurava da preglednik može ispravno prikazati vašu stranicu.

HTML naspram Markdowna

Što je Markdown? Markdown je jednostavan jezik za označavanje koji se često koristi za pisanje sadržaja poput README datoteka, dokumentacije ili blog objava. Ima laganu, čitljivu sintaksu u običnom tekstu. Primjerice, u Markdownu biste napisali **podebljano** da biste dobili podebljani tekst, ili # Naslov da označite naslov razine 1. Markdown je osmišljen tako da bude lak za pisanje i pregledavanje u izvornom obliku. No, web preglednici ne razumiju direktno Markdown — sadržaj napisan u Markdownu obično se prije prikaza na webu pretvori u HTML ili drugi format.

Usporedba HTML-a i Markdowna:

Sintaksa: HTML koristi eksplicitne oznake (npr. <p> za odlomak, <strong> za podebljani tekst), dok Markdown koristi jednostavniju sintaksu baziranu na interpunkcijskim znakovima (npr. zvjezdice za podebljavanje ili podvlake za italic). Markdown je obično brži i sažetiji za pisanje kada se radi o osnovnom tekstu, ali je manje precizan i nema mogućnosti za kompleksne izglede ili interaktivni sadržaj.
Uporaba: HTML se koristi za strukturu i izravan prikaz web stranica u pregledniku. Markdown se najčešće koristi kao lakši način pisanja sadržaja koji se potom konvertira u HTML. Primjerice, mnogi statički generatori stranica ili platforme za dokumentaciju omogućuju pisanje u Markdownu, a zatim generiraju HTML datoteke za objavu. Ne možete jednostavno otvoriti Markdown datoteku u pregledniku i dobiti oblikovanu web stranicu — najprije je potrebno Markdown pretvoriti u HTML.
Sposobnosti: HTML je daleko moćniji u definiranju strukture i funkcionalnosti web stranice. Uz HTML (te pripadajući CSS/JS) možete izraditi složene rasporede stranice, dodati obrasce, tablice, interaktivne elemente i mnogo više. Markdown je ograničen na osnovno oblikovanje teksta (naslovi, popisi, isticanje teksta itd.) i ne može samostalno uključiti napredne web značajke. U praksi, za bilo što kompleksnije od jednostavnog teksta i slika, Markdown se mora osloniti na HTML. (Čak je dopušteno ubaciti HTML kod unutar Markdowna upravo iz tog razloga.)

HTML naspram JSX-a

Što je JSX? JSX označava JavaScript XML. To je sintaksno proširenje JavaScript jezika koje se najčešće koristi s bibliotekama poput Reacta. JSX omogućuje programerima da unutar JavaScript koda pišu kod nalik HTML-u. Primjerice, u Reactu možete unutar funkcije napisati: <h1>Pozdrav, {username}</h1> i JSX će to prevesti u odgovarajuće DOM elemente (u suštini generira HTML elemente u pregledniku). Iako JSX na prvi pogled izgleda gotovo isto kao HTML, on sam po sebi nije HTML — mora biti obrađen (transpajliran) alatom ili frameworkom u čisti JavaScript i HTML prije nego što se izvršava u pregledniku.

Usporedba HTML-a i JSX-a:

Namjena i uporaba: HTML je statički jezik za označavanje koji preglednici izravno raščlanjuju i prikazuju. JSX se ne koristi samostalno u pregledniku; koristi se unutar JavaScript koda za opis korisničkog sučelja, a zatim ga poseban proces ili okvir (poput Reacta) pretvara u stvarne DOM elemente. U praksi, JSX pišete kao dio JavaScript aplikacije (npr. React komponenti) i nikada ne poslužujete JSX datoteke izravno pregledniku. Preglednik na kraju dobije standardni HTML/JS nakon što se JSX kod kompajlira.
Razlike u sintaksi: JSX sintaksa je vrlo slična HTML-u, ali postoje neke razlike. Primjerice, u JSX-u se umjesto atributa class koristi className za CSS klase elementa (budući da je “class” rezervirana riječ u JS-u). Također, sve JSX oznake moraju biti pravilno zatvorene, čak i one koje su u HTML-u samostalne – u JSX-u biste napisali <br /> ili <img ... /> s kosom crtom. Osim toga, JSX omogućuje umetanje JavaScript izraza unutar vitičastih zagrada { } u markup. Na primjer, <p>{user.name}</p> umetnut će vrijednost JS varijable unutar paragrafa. Ništa slično nije moguće u čistom HTML-u, jer HTML nije izvršni kod.
Kada koristiti što: HTML koristite kada izrađujete statičan sadržaj ili osnovnu strukturu web stranica (primjerice jednostavne stranice ili server-side renderirane stranice). JSX koristite kada radite s Reactom ili sličnim okvirima na frontend-u kako biste izgradili dinamičko, interaktivno korisničko sučelje komponenti. Važno je primijetiti da je razumijevanje HTML-a ključno za učinkovito korištenje JSX-a, budući da JSX koji napišete u konačnici stvara HTML elemente u DOM-u. Ukratko, HTML je temelj, dok je JSX alat za programere kojim unutar JavaScript-a generiraju i manipuliraju tim temeljem.

Najbolje prakse i trendovi HTML-a za 2025.

HTML je i u 2025. takozvani “living standard”, odnosno standard koji se kontinuirano nadopunjuje novim značajkama umjesto da se čekaju velika izdanja novih verzija. Dok je jezgra HTML5 već stabilizirana, programeri i dalje primjenjuju najbolje prakse kako bi njihov HTML kod bio čist i učinkovit. U nastavku su neke od ključnih najboljih praksi i novih trendova u razvoju HTML-a za 2025. godinu:

Najbolje prakse (2025.):

Korištenje semantičkih elemenata: Struktuirajte stranicu pomoću smislenih HTML5 elemenata (poput <header>, <nav>, <main>, <section>, <article>, <footer>) umjesto da se oslanjate isključivo na generičke <div>-ove. Semantički HTML čini vaš kod čitljivijim te poboljšava pristupačnost i SEO, jer pruža preglednicima i tražilicama više informacija o ulozi pojedinih dijelova sadržaja.
Pristupačnost na prvom mjestu: Uvijek pružite alternativni tekst za slike putem atributa alt i koristite elemente <label> za polja formulara. Pazite da vaši naslovi (<h1>…<h6>) slijede logičan redoslijed (ne preskačite razine bez potrebe). Ako koristite ikone ili prilagođene interaktivne elemente, razmotrite primjenu ARIA atributa (poput aria-label) kako biste dali dodatni kontekst kad to sam HTML ne čini. Izrada pristupačnog HTML-a nije samo trend, već standardna praksa – u mnogim zemljama poduprta i zakonskim smjernicama o pristupačnosti.
Responzivan dizajn i mobilni prikaz: Uključite meta oznaku za prikaz na mobilnim uređajima u zaglavlje stranice (npr. <meta name="viewport" content="width=device-width, initial-scale=1">) kako bi se raspored prilagodio manjim zaslonima. Koristite relativne jedinice i fleksibilne rasporede (uz pomoć CSS-a) kako bi sadržaj bio prilagodljiv različitim veličinama ekrana. Također, možete iskoristiti HTML mogućnosti poput elementa <picture> ili atributa srcset na <img> kako biste poslužili odgovarajuće slike za različite uređaje (primjerice, slike visoke rezolucije za retina zaslone ili manje slike za mobitele).
Optimizacija modernim značajkama HTML-a: Iskoristite ugrađene HTML mogućnosti za bolje performanse i iskustvo korisnika. Na primjer, upotrijebite atribut loading="lazy" na slikama i iframeovima kako biste odgodili učitavanje sadržaja koji nije odmah vidljiv, čime ubrzavate inicijalno učitavanje stranice. Koristite <video> i <audio> oznake za ugradnju medija umjesto oslanjanja na zastarjele vanjske pluginove. U obrascima (formama), primijenite novije tipove unosa (poput email, number, date) kako biste dobili ugrađenu validaciju i odgovarajuće tipkovnice na mobilnim uređajima. Ove značajke unaprjeđuju korisničko iskustvo uz minimalan trud.
Odvajanje strukture od prezentacije: Održavajte odvojenost strukture, stila i ponašanja. Izbjegavajte korištenje zastarjelih ili isključivo prezentacijskih HTML elemenata (poput <font> ili <center> za stiliziranje). Umjesto toga, koristite CSS za definiranje izgleda i rasporeda, a JavaScript za interaktivnu funkcionalnost. Tako će vaš HTML ostati čist, a sadržaj dostupan čak i ako se stilovi ili skripte ne učitaju.

Trendovi (2025.):

Nativni dijalozi i modalni prozori: Programeri sve više koriste element <dialog> za modalne dijaloge i iskočne prozore, budući da je podrška u preglednicima sazrela. Ovaj ugrađeni element pojednostavljuje izradu dijaloških okvira bez potrebe za složenim prilagođenim JavaScript-om, a pritom dolazi i s nekim integriranim funkcionalnostima (poput pozadinskog sloja i metoda za otvaranje/zatvaranje dijaloga putem skripte) te ugrađenim aspektima pristupačnosti.
Web komponente: Porasla je upotreba Web Components tehnologije. Web komponente (koje uključuju koncept custom elements i shadow DOM) omogućuju programerima definiranje vlastitih, ponovo upotrebljivih HTML oznaka s kapsuliranom strukturom i stilom. To znači da možete stvoriti, primjerice, element <user-card> za prikaz profila korisnika kao samostalnu komponentu. Iako je ovo napredna tehnika, njezina rastuća popularnost mijenja način na koji razmišljamo o HTML-u – skup dostupnih oznaka više nije fiksan, jer programeri mogu proširiti HTML vlastitim prilagođenim elementima prema potrebi.
Alati za generiranje markup-a: U modernom razvoju weba često se koriste alati koji generiraju HTML iz drugih izvora. Primjerice, statički generatori stranica i headless CMS sustavi omogućuju da autori sadržaja pišu u Markdownu ili koriste predloške, a zatim se taj sadržaj kompajlira u HTML datoteke. Slično tome, frontend okviri poput Reacta (koji koristi JSX) ili Angulara koriste HTML-ove predloške unutar koda, koji se u konačnici prikažu kao HTML u pregledniku. Trend je korištenje ovih apstrakcija radi veće produktivnosti, ali čvrsto poznavanje HTML-a i dalje je ključno kako bi se osiguralo da je rezultat ispravan, semantički i optimiziran.
Automatizacija i AI u HTML razvoju: Do 2025. pojavio se veći broj alata potpomognutih umjetnom inteligencijom koji mogu pomoći u pisanju ili poboljšanju HTML koda. Primjerice, editori koda mogu predlagati poboljšanja za pristupačnost (poput podsjetnika da dodate alt tekst slikama), a AI alati mogu generirati osnovni HTML za određeni raspored stranice. Također, sve su popularnije no-code/low-code platforme na kojima developeri ili dizajneri mogu vizualno kreirati izgled stranice, a platforma iza toga generira HTML/CSS kod. Ovi trendovi mogu ubrzati razvoj, ali najefikasniji su ako razumijete osnove HTML-a – trebat ćete pregledati i po potrebi doraditi generirani kod kako biste postigli najbolji rezultat.

Bez obzira na nove trendove i alate, osnove pisanja čistog, semantičkog i dobro strukturiranog HTML-a ostaju nepromijenjene. Pridržavajući se najboljih praksi i prateći nove značajke, osigurat ćete da vaše web stranice budu pouzdane, pristupačne i spremne za budućnost.

Novi web vas čeka

Pošaljite nam poruku i pretvorite posjetitelje vaše stranice u eure