Što je HTML <div>?

HTML element <div> jedan je od najčešće korištenih elemenata prilikom izrade web stranica. Riječ “div” dolazi od engleske riječi “division”, što u prijevodu znači “odjeljak”. Ovaj element služi kao kontejner za grupiranje drugih HTML elemenata i često se koristi za dizajniranje i strukturu stranica.

Osnovna svrha <div> tag-a

Osnovna svrha <div> tag-a je pružiti način za organiziranje sadržaja unutar web stranice. To omogućava programerima i dizajnerima da rasporede elemente, poput slika, tekstova ili drugih tagova, unutar različitih područja stranice. Na primjer, može se koristiti za stvaranje glavnog sadržaja, bočnih traka (sidebar), zaglavlja i podnožja.

Korištenje klasa i ID-ova

Jedna od ključnih značajki <div> elementa je mogućnost dodavanja klasa i ID-ova. Korištenjem atributa class i id, programeri mogu lako primijeniti CSS stilove na specifične skupine elemenata.

U ovom primjeru, <div> element ima klasu “container”, koju možemo koristiti u CSS-u za dodatno stiliziranje.

CSS i stilizacija

Kada se kombinira s CSS-om, <div> može postati vrlo moćan alat za kontroliranje izgleda stranice. Možete dodati pozadinske boje, margine, obrube i ostale stilove koji pomažu u oblikovanju cjelokupnog izgleda stranice.

css
.container {
background-color: lightblue;
margin: 20px;
padding: 20px;
border: 1px solid #000;
}

Ovaj CSS kod dodaje svjetloplavu pozadinsku boju, margine, unutarnje pobijene (padding) i crni obrub za sve <div> elemente s klasom “container”.

Responsivni dizajn i <div>

U modernom web dizajnu, responsivnost je ključna. Korištenjem <div> elemenata s CSS-om, dizajneri mogu stvoriti web stranice koje se prilagođavaju različitim veličinama ekrana. Korištenjem medijskih upita (media queries), možemo promijeniti stilove ovisno o veličini preglednika.

css
@media (max-width: 600px) {
.container {
background-color: pink;
}
}

U ovom primjeru, pozadinska boja <div> elementa s klasom “container” promijenit će se u ružičastu kada se ekran smanji na širinu od 600px ili manje.

Semantičko značenje i alternativne opcije

Iako je <div> vrlo koristan, nedostaje mu semantičko značenje. To znači da pretraživačima i alatima za pristupačnost nije jasno što taj element predstavlja. Umjesto <div>, ponekad je bolje koristiti semantičke HTML5 elemente poput <header>, <footer>, <article>, <section> i sličnih. Ovi elementi pomažu u boljem razumijevanju strukture sadržaja.

Zatvaranje <div> tag-a

Kao i većina HTML tagova, <div> mora biti zatvoren. Svi elementi unutar <div> trebaju biti unutar njegovog otvarajućeg i zatvarajućeg tag-a.

Ako se <div> ne zatvori, to može izazvati probleme u ispravnom prikazu stranice.

Zaključak

HTML <div> element je iznimno moćan alat za razvoj web stranica. S njegovom pomoći, web dizajneri i programeri mogu efikasno strukturirati sadržaj i primijeniti stilove. Važno je razumjeti kada je najbolja praksa koristiti <div>, a kada se poslužiti semantičkim HTML5 elementima. Na taj način, web stranice postaju ne samo vizualno privlačne, već i bolje optimizirane za pretraživače i pristupačnost.