Što je

u HTML-u?

Uvod u HTML

HTML (HyperText Markup Language) je osnovni jezik za izradu web stranica. Kroz razne elemente i oznake, HTML omogućava strukturiranje sadržaja koji korisnik vidi u svom pretraživaču. Jedna od najvažnijih oznaka u HTML-u je <div>, koja se koristi za grupiranje sadržaja i omogućavanje jednostavnog stiliziranja i upravljanja rasporedom elemenata.

Što je

oznaka?

Oznaka <div> predstavlja “dijelove” stranice, odnosno blokove elemenata. Ona ne utječe izravno na prikazani sadržaj, ali služi kao kontejner koji može sadržavati tekst, slike, videozapise i druge HTML oznake. Bez obzira na to što ne dodaje dodatno značenje, <div> je esencijalna komponenta za web dizajn jer omogućuje organizaciju stranice u odvojene dijelove.

Osnovna struktura

Korištenje <div> oznake jednostavno je i intuitivno. Osnovna sintaksa izgleda ovako:

Možete dodati gotovo bilo što unutar <div>, uključujući paragrafe, slike, naslove i čak druge <div> oznake.

Stiliziranje s CSS-om

Jedna od ključnih funkcija <div> oznake je ta što omogućava primjenu stilova pomoću CSS-a (Cascading Style Sheets). Na primjer, možete dodati klasu ili ID oznaci <div> kako biste je stilizirali:

Ovdje je neki sadržaj.

S CSS-om, možete mijenjati izgled ovog <div>:

css
.moja-klasa {
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ccc;
}

Responsivni dizajn

U današnje digitalno doba, responsivni dizajn je ključan za pružanje optimalnog korisničkog iskustva na različitim uređajima. Korištenjem <div> oznaka, dizajneri mogu organizirati sadržaj u fleksibilne rasporede koji se prilagođavaju veličini zaslona. Na primjer, pomoću CSS Flexbox-a ili Grid-a možete lako stvarati kompleksne rasporede web stranica.

css
.container {
display: flex;
flex-wrap: wrap;
}

.item {
flex: 1 1 200px; / minimalna širina od 200px /
margin: 10px;
}

Značaj u pristupačnosti i SEO-u

Iako <div> oznaka sama po sebi ne nosi nikakvo značenje, pravilna upotreba zajedno s odgovarajućim ARIA (Accessible Rich Internet Applications) oznakama može poboljšati pristupačnost web stranica. Također, pravilno strukturirane <div> oznake mogu poboljšati SEO (Search Engine Optimization) time što olakšavaju tražilicama da indeksiraju sadržaj.

Upotreba u JavaScriptu

Osim stiliziranja, <div> oznake često se koriste u interakciji s JavaScriptom. Mogu se manipulirati za promjenu sadržaja web stranice bez potrebe za ponovnim učitavanjem stranice. Na primjer:

javascript
document.getElementById(“mojDiv”).innerHTML = “Novi sadržaj.”;

Ova jednostavna linija koda mijenja sadržaj unutar div-a s ID-jem “mojDiv”.

Zaključak

Oznaka <div> je nezamjenjiva u web razvoju. Ona razdvaja sadržaj, omogućuje stiliziranje i organizaciju, podržava responsivni dizajn i olakšava pristup aplikacijama. Bez obzira jeste li početnik ili iskusni web developer, razumijevanje i pravilna primjena <div> oznake ključni su za stvaranje uspješnih web stranica.