Struktura HTML dokumenta često se uzima zdravo za gotovo, posebno kada je fokus na JavaScript ili stilovima. Međutim, dobro organiziran HTML temelj je svakog skalabilnog i pristupačnog web projekta. Ako je neuredan ili nelogičan, održavanje projekta postaje otežano, a problemi u pristupačnosti i SEO optimizaciji postaju neizbježni.
U ovom članku donosimo konkretne savjete kako pisati čist, čitljiv i dugoročno održiv HTML kod, uz primjere i dobre prakse koje možete primjeniti već danas.
Jasna i logična hijerarhija elemenata
HTML dokument bi trebao pratiti logičku strukturu sadržaja — od <header> do <footer>, s jasno definiranim sekcijama pomoću <main>, <section>, <article> i <aside>. To ne pomaže samo čitačima ekrana i SEO alatima, već i drugim programerima koji čitaju kod.
Koristite heading tagove (<h1> do <h6>) u ispravnom redoslijedu – bez preskakanja nivoa. Tako stvarate vizualno i logički konzistentan sadržaj koji je lako skenirati i razumjeti.
Primjer loše prakse:
<h1>Naslov stranice</h1>
<h4>Podnaslov</h4>Ispravno:
<h1>Naslov stranice</h1>
<h2>Podnaslov</h2>Ovakva struktura osigurava i da pretraživači pravilno indeksiraju sadržaj, a korisnici dobiju bolji UX.
Koristite semantičke HTML elemente
Semantički elementi jasno govore browseru i čitaču sadržaja šta određeni dio koda predstavlja. Umjesto <div class=”nesto”>, koristite element koji već nosi značenje <nav>, <footer>, <form>, <button>, <figure>, itd.
Ova praksa ne samo da poboljšava pristupačnost, već olakšava i kasniju stilizaciju i razvoj. Web programeri koji dođu poslije vas odmah će razumjeti namjenu svakog dijela.
Primjer:
<!-- Loše -->
<div onclick="posaljiFormu()">Pošalji</div>
<!-- Dobro -->
<button type="submit">Pošalji</button>Semantički pristup uveliko poboljšava i kompatibilnost s automatiziranim alatima kao što su screen readeri, linters i test pomagala.
Pišite čitljiv i dosljedan kod
Koristite uvlačenje (indentaciju) od 2 ili 4 razmaka i dosljedno primjenjujte tu odluku kroz cijeli projekt. Imena klasa trebaju imati smisla i pratiti određeni konvencijski stil (npr. BEM, camelCase, kebab-case).
Primjer dobre prakse:
<section class="hero">
<div class="hero__content">
<h1 class="hero__title">Dobrodošli</h1>
</div>
</section>Dosljednost znači da i drugi programeri mogu brzo razumjeti strukturu bez potrebe za “dešifriranjem” svakog elementa.
Komentarišite ključne dijelove
Komentari u HTML-u nisu uvijek potrebni, ali su itekako korisni kada određeni dio ima specifičnu funkciju ili ograničenje. Komentar ne bi trebao biti očigledan (“Ovo je header”), nego objašnjenje svrhe ili odluke.
Primjer:
<!-- Glavni CTA koji se ne prikazuje korisnicima koji su već prijavljeni -->
<section class="cta-banner">
...
</section>Dobar komentar može uštedjeti sate kada se nakon nekoliko mjeseci vraćate na isti kod.
Izbjegavajte pretjerano korištenje div elementa
Jedan od najčešćih problema u HTML strukturi jeste pretjerano korištenje <div> elemenata bez ikakvog semantičkog značenja. Ako možete koristiti više preciznih elemenata, to i učinite.
Loše:
<div class="menu">
<div class="item">Početna</div>
<div class="item">O nama</div>
</div>Bolje:
<nav>
<ul>
<li><a href="/">Početna</a></li>
<li><a href="/o-nama">O nama</a></li>
</ul>
</nav>Korištenje odgovarajućih elemenata čini vaš HTML jednostavnijim, pristupačnijim i SEO-friendly.
Zaključak
Kao i kod svakog zanata, i kod HTML-a je važno graditi temelje na ispravan način. Dobro strukturiran HTML kod omogućava bolju suradnju u timu, lakšu održivost projekta i bolju pristupačnost krajnjim korisnicima. Nije stvar samo estetike, već i funkcionalnosti — kako za mašine, tako i za ljude.
Uzmite vrijeme da pažljivo strukturirate svoje HTML dokumente – jer ono što napišete danas, možda ćete vi ili neko drugi održavati godinama.