Osnove HTML-a: što je i kako radi
Osnove HTML-a opisuju osnovne elemente, sintaksu i semantičku strukturu Hypertext Markup Language — standardiziranog jezika za označavanje koji organizira web-sadržaj, ugrađuje resurse i komunikacijom prenosi značenje preglednicima, alatima za pristupačnost i tražilicama.
Što su osnove HTML-a?
Osnove HTML-a obuhvaćaju ključne elemente, atribute i strukturu dokumenta koja se koristi za označavanje web-sadržaja. HTML (Hypertext Markup Language) nije programski jezik, već standardizirani sustav tagova koji govori pregledniku kako prikazati tekst, slike i ugrađene resurse te kako je sadržaj semantički grupiran.
Zašto su osnove HTML-a važne za SEO
HTML daje semantičke signale tražilice koriste pri pretraživanju i indeksiranju stranica. Ispravna upotreba title tagova, meta opisa, zaglavlja (<title>, <meta name="description">, <h1>–<h6>), kanonskih poveznica (<link rel="canonical">) i strukturiranih podataka utječe na to koji se sadržaj otkriva i kako se prikazuje u rezultatima pretraživanja. Važno je razlikovati faze: crawling je faza dohvaćanja/otkrivanja, indexing je pohrana sadržaja, a ranking je poredak rezultata; dobar HTML pomaže otkrivanju i indeksabilnosti, ali sam po sebi ne određuje rangiranje.
Također razmotrite mobile-first indexing: Google koristi mobilnu verziju kao primarnu osnovu za crawling i indexing; od July 2024 Google cijelo vrijeme crawla stranice za Search s Googlebot Smartphone prema zadanim postavkama. To čini responsivni HTML, ispravne viewport metapodatke i ekvivalentan semantički sadržaj na mobilnim uređajima osobito važnim za signale indeksacije.
Kako funkcioniraju osnove HTML-a
HTML dokument započinje doctype deklaracijom i sadrži dvije glavne sekcije: <head> za metapodatke dokumenta i <body> za vidljivi sadržaj. Elementi koriste kutne zagrade i mogu imati atribute koji mijenjaju ponašanje. Preglednici parsiraju HTML u DOM (Document Object Model), primjenjuju CSS i izvršavaju JavaScript za prikaz konačne stranice.
Uobičajeni inline primjeri: standardna poveznica bez posebnog rel atributa: Primjer. Za plaćene objave koristi rel="sponsored": Sponzor. Za linkove koje je generirao korisnik koristi rel="ugc": Link u komentaru. Ne postoji atribut rel="dofollow": normalna poveznica je jednostavno ona bez rel=nofollow, rel=sponsored ili rel=ugc.
Vrste u osnovama HTML-a
HTML elementi svrstavaju se u praktične grupe:
- Strukturni/semantički: <header>, <main>, <article>, <section>, <footer> — poboljšavaju strojno razumijevanje i pristupačnost.
- Metapodaci: <title>, <meta>, <link> — utječu na indeksiranje i prikaz u pretraživanju.
- Tekstni/formatiranje: <p>, <strong>, <em>, <span> — za autorstvo sadržaja.
- Mediji/ugrađeno: <img>, <video>, <iframe>, <picture> — rukovanje assetima i formatima.
- Interaktivno/kontrola: <form>, <button>, <input> — elementi za interakciju s korisnikom.
Kako započeti s osnovama HTML-a
Počni s pisanjem jednostavnih stranica u editoru (VS Code, Sublime Text ili bilo kojem plain text editoru). Kreiraj osnovni scaffold: <!DOCTYPE html>, <html lang="en">, <head> s <meta charset="utf-8"> i <meta name="viewport" content="width=device-width, initial-scale=1">, zatim <body> s naslovima i odlomcima. Koristi semantičke tagove za sekcije sadržaja i dodaj alt tekst za slike radi pristupačnosti.
Nauči odvajati odgovornosti: HTML za sadržaj i semantiku, CSS za prezentaciju, JavaScript za ponašanje. Validiraj svoj markup i pregledaj stranice na mobilnim uređajima ili u emuliranim viewportima kako bi potvrdio paritet sadržaja za indexing.
Uobičajene pogreške u HTML-u
Česte pogreške koje utječu na upotrebljivost i indeksabilnost uključuju izostanak ili kasnu deklaraciju <meta charset> što može narušiti prikaz znakova, odsutnu ili dupliciranu hijerarhiju <h1>, nedostajući lang atribut na <html>, slike bez opisnog alt teksta, inline stilove koji skrivaju sadržaj od pomoćnih tehnologija, pogrešne kanonske tagove te stavljanje kritičnog sadržaja iza JavaScripta bez server-side fallbacka.
Provjera osnova HTML-a: tehnička kontrolna lista
Doctype i charset — gdje provjeriti: view-source / prvi bajtovi — prolazi kada se <!DOCTYPE html> pojavi i <meta charset="utf-8"> stoji visoko u <head>.
Viewport i mobilni sadržaj — gdje provjeriti: pregled na uređaju ili Chrome DevTools » Device Toolbar — prolazi kada <meta name="viewport"> postoji i sadržaj se semantički podudara s desktop verzijom (paritet).
Kanonsko i robots meta — gdje provjeriti: view-source i HTTP headeri — prolazi kada <link rel="canonical"> upućuje na preferirani URL i kada nema nenamjernog <meta name="robots" content="noindex"> koji blokira indeksaciju.
Provjere preglednika i DevTools-a
Otvori Chrome DevTools da pregledaš DOM (kartica Elements), simuliraš mobilne viewporte (Device Toolbar) i pokreneš Lighthouse audite (kartica Lighthouse) za preporuke o pristupačnosti i najboljim praksama. Upotrijebi Elements panel da potvrdiš da semantički tagovi i vidljivi sadržaj postoje u renderiranom DOM-u, a ne samo u izvornom kodu.
Provjere iz naredbenog retka i servera
Koristi curl za sirove provjere. Za pregled headera odgovora: curl -I https://example.com. Za dohvat HTML-a kao određenog user agenta: curl -A "Mozilla/5.0 (Windows NT 10.0; Win64; x64)" https://example.com (izostavi -I da dobiješ tijelo). Provjeri da je status 200 i da nema neočekivanih redirecta ili X-Robots-Tag headera.
Validacija i strukturirani podaci
Pokreni W3C Markup Validation Service (validator.w3.org) da otkriješ sintaktičke probleme. Za strukturirane podatke koristi Google's Rich Results Test i Schema Markup Validator (schema.org) za provjeru JSON-LD ili microdata. Rich Results Test pokazuje je li stranica podobna za određene tipove rich rezultata; nije izvještaj o indeksaciji.
Ako posjeduješ stranicu, koristi Google Search Console 's URL Inspection za pregled podataka o crawlingu/indexingu za određeni URL; to je autoritativno za tvoju domenu. Za stranice trećih strana, imaj na umu da site: upiti jesu indikativni, ali ne i konačni za status indeksacije.
Savjet za rješavanje problema: ako je kritični sadržaj prisutan u view-source ali nedostaje u renderiranom DOM-u, provjeri client-side JavaScript koji se može sporo izvršavati ili padati; razmotri server-side rendering ili osiguraj da je sadržaj prisutan bez JS-a radi pouzdanosti pri crawlingu i indexing.
Često postavljana pitanja
Q: Koja je razlika između HTML-a i CSS-a?
A: HTML definira strukturu i semantiku sadržaja; CSS kontrolira prezentaciju i raspored. Drži sadržaj u HTML-u, a stilove u CSS-u kako bi održao jasnu podjelu odgovornosti.
Q: Utječu li title i meta description tagovi na rangiranje?
A: Title tag je važan signal relevantnosti i koristi se u prikazu u rezultatima pretraživanja. Meta opisi izravno ne određuju rangiranje, ali utječu na click-through rate. Oba utječu na način na koji se stranice pojavljuju u pretraživanju, no rangiranje određuje mnogo drugih signala izvan ovih tagova.
Q: Koliko rano bi <meta charset> trebao biti?
A: Postavi <meta charset="utf-8"> blizu vrha <head> kako bi preglednik ispravno interpretirao znakove; kasne deklaracije charseta mogu dovesti do iskrivljenog teksta.
Q: Ako se sadržaj učitava putem JavaScripta, hoće li ga tražilice vidjeti?
A: Moderna tražilica izvršavaju JavaScript, ali vrijeme izvršavanja, ograničenja resursa i razlike u renderiranju znače da je sadržaj dostavljen isključivo preko client-side JS-a rizičniji za indeksiranje. Ako je indeksacija važna, osiguraj server-side rendered HTML ili progressive enhancement tako da osnovni sadržaj postoji bez oslanjanja isključivo na JS.
Q: Kako učiniti HTML pristupačnijim?
A: Koristi semantičke elemente, osiguraj opisne alt tekstove za slike, uključi labele za forme, postavi lang atribut na <html> element i slijedi ARIA najbolje prakse gdje ugrađena semantika nije dovoljna.
Related terms
JavaScript: što je i zašto je važan
JavaScript je visokorazinski, na događaje orijentirani skriptni jezik koji se koristi u preglednicima i na serverima za izgradnju dinamičnih, interaktivnih web sučelja i widgeta trećih strana; u 2026. obično upravlja renderiranjem na strani klijenta, postupnom hidratacijom i otkrivanjem značajki u runtime-u.
Snaga hiperveze: definicija i utjecaj na SEO
Snaga hiperveze je njezina sposobnost povezivanja web-resursa i prijenosa navigacijskih, uredničkih i referentnih signala između domena; za SEO, linkovi omogućuju otkrivanje, utječu na signale relevantnosti i usmjeravaju putove koje crawleri prate.
On-page SEO: definicija, kontrolni popis i verifikacija
On-page SEO je optimizacija sadržaja stranice, HTML-a i UX-a kako bi bila relevantna, indeksabilna i korisna korisnicima i modernim tražilicama — pokriva mobile-first rendering, strukturirane podatke, kanonikale i performanse stranice.
Schema markup: što je i zašto je važan
Schema markup je strukturirani podatak dodan stranici (JSON-LD, Microdata ili RDFa) koji označava entitete i njihove odnose za tražilice, omogućujući podobnost za rich results i jasnije tumačenje sadržaja u SERPs.
Extensible Markup Language (XML): objašnjenje i kontrolni popis
Extensible Markup Language (XML) je tekstni, oznakama vođeni format za kodiranje hijerarhijskih, strukturiranih podataka koristeći korisnički definirane nazive elemenata i namespaces; često se koristi za razmjenu podataka, konfiguracijske datoteke, feedove, sitemap datoteke i integracije.
HTTP: što je i zašto je važan za web
HTTP (Hypertext Transfer Protocol) je protokol na aplikacijskoj razini za zahtjev/odgovor koji preglednici i serveri koriste za traženje, isporuku i keširanje web resursa; njegova sigurnija varijanta (HTTPS/TLS) štiti podatke u prijenosu i utječe na performanse, mogućnost indeksiranja i povjerenje.