Što je HTML (HyperText Markup Language) – Osnove za Frontend Developere
HTML (HyperText Markup Language) temelj je svake web stranice i ključna vještina koju svaki frontend developer mora savladati. Ovaj jezik za označavanje koristi se za strukturiranje i organizaciju sadržaja na web stranicama te omogućuje preglednicima (browserima) ispravan prikaz elemenata kao što su tekst, slike, i videozapisi. U ovom članku istražit ćemo osnovne pojmove HTML-a, kako funkcionira i zašto je važan za svakog frontend developera.
Što je HTML?
HTML (HyperText Markup Language) je jezik za označavanje koji koristi oznake (tagove) kako bi definirali različite elemente na web stranici. Te oznake omogućuju preglednicima da ispravno prikažu sadržaj i stvore strukturu stranice. Svaka web stranica, bez obzira na njenu složenost, započinje s osnovnim HTML dokumentom.
Primjer osnovnog HTML koda:
U ovom primjeru, oznake poput <html>, <head>, <body>, <h1> i <p> koriste se za označavanje različitih dijelova dokumenta.
Glavne komponente HTML-a
- Elementi i oznake (tags): HTML koristi oznake za definiranje različitih dijelova sadržaja. Većina oznaka dolazi u parovima, s početnom i završnom oznakom. Na primjer, oznaka za paragraf je
<p>i zatvara se s</p>. - Atributi: HTML elementi mogu imati atribute koji pružaju dodatne informacije. Na primjer, slika koristi atribut
srcza određivanje izvora slike, a atributaltza opis slike: - Naslovi (Headings): Naslovi se koriste za strukturiranje sadržaja. Postoji šest razina naslova, od
<h1>(najvažniji) do<h6>(najmanje važan). Ispravna upotreba naslova poboljšava SEO i korisničko iskustvo. - Linkovi (Anchors): Za stvaranje veza između stranica koristi se oznaka
<a>. Na primjer: - Liste: HTML podržava uređene (
<ol>) i neuređene (<ul>) liste, dok su stavke unutar lista označene s<li>.
Zašto je HTML važan za Frontend Developere?
Frontend developeri odgovorni su za izradu vizualnog dijela web stranice i osiguravanje interaktivnosti. HTML je temelj na kojem se gradi frontend razvoj jer omogućava organizaciju i prikaz sadržaja na stranici. Uz CSS (za stilizaciju) i JavaScript (za interaktivnost), HTML čini osnovni skup vještina koje frontend developeri moraju savladati.
Evo nekoliko ključnih razloga zašto je HTML neophodan:
- Strukturiranje sadržaja: HTML omogućuje developerima da pravilno organiziraju sadržaj, što je ključno za preglednost i korisničko iskustvo.
- SEO optimizacija: Pretraživači koriste HTML kako bi indeksirali stranice i odredili njihovu relevantnost. Korištenje ispravnih HTML oznaka može poboljšati rangiranje stranice na tražilicama.
- Pristupačnost: HTML pomaže u izradi pristupačnih stranica koje su prilagođene osobama s invaliditetom, što je važno za inkluzivnost i zakonodavne propise.
Osnovna HTML struktura
Svaki HTML dokument započinje s <!DOCTYPE html>, što pregledniku daje do znanja da se radi o HTML5 dokumentu. Nakon toga, html oznaka obuhvaća sve ostale elemente. Unutar HTML dokumenta nalaze se dvije glavne sekcije:
<head>sekcija: Ovdje se nalaze informacije o dokumentu, poput naslova stranice (<title>), poveznice na stilove (<link>) i meta podaci.<body>sekcija: Sadrži sav sadržaj koji će biti vidljiv korisniku, kao što su tekstovi, slike, linkovi i drugi elementi.
Primjer jednostavne HTML stranice:
Zaključak
HTML je osnovna tehnologija koju frontend developeri koriste za izradu strukture web stranica. Bez HTML-a, ne bi bilo moguće stvoriti funkcionalne web stranice. Zato je važno da svaki frontend developer temeljito razumije HTML, jer on postavlja temelje na kojima se gradi ostatak stranice. Znanje HTML-a omogućuje stvaranje responsivnih, SEO optimiziranih i pristupačnih web stranica, što je ključno za uspješan razvoj u današnjem digitalnom svijetu.
Dalibor Katić
Server – MyDataKnox