Span i div

U HTML, span i div elementi se koriste za definisanje delova dokumenta tako da se mogu identifikovati kada drugi HTML elementi nisu pogodni. Gde ostali HTML elementi kao što su p (engl. paragraph), em (engl. emphasis) i tako dalje tačno predstavljaju semantiku sadržaja, span i div elementi vode do bolje čitljivnosti i lakšeg održavanja sadržaja .Kada nijedan drugi HTML element nije primenljiv, span i div se mogu koristiti kao deo dokumenta na koji se mogu primeniti drugi HTML atributi kao na primer class, id, lang ili dir.

span predstavlja linijski deo dokumenta, na primer reči u rečenici. div predstavlja deo dokumenta u vidu bloka kao na primer više paragrafa ili sliku sa naslovom. Nijedan element nema samostalno nema smisla, ali ovi elementi dozvoljavaju semantičke atribude (npr. lang="en-US"), CSS stilove (npr. boje, tipografiju) ili skriptovanje od strane klijenta (engl. client-side scripting).

Istorija

span element je predstavljen 1995. godine. Ipak, sve do HTML 4.01 nije postao deo HTML jezika. Pojavio se u HTML 4 1997. godine.

Razlike i podrazumevana ponašanja

Postoje mnoge razlike između div i span. Najveća primetljiva razlika je u načinu prikazivanja elemenata. U standardnom HTML, div je element nivoa bloka, dok je span linijski element. div vizuelno izoluje sekciju dokumenta na stranici, i ne može sadržati druge blokovske elemente. span element sadrži deo informacije iz jedne linije. U praksi se standardni način prikazivanja elemenata semože promeniti korišćenjem CSS, ipak korišćenjem CSS se ne mogu promeniti dozvoljeni sadržaji elemenata. Na primer, span ne može sadržati elemente nivoa bloka kao svoju decu.

Praktična primena

span i div elementi se koriste za logičko grupisanje elemenata.

Postoje tri razloga za korišćenje span i div tagova sa class ili id atributima:

Stiling sa CSS-om

Uobičajeno je da <span> i <div> elementi nose class ili id atribute u saradnji sa CSS-om za generisanje izgleda, tipografije, boja i ostalih prezentacionih atributa.

Semantička jasnoća

Ovaj način grupisanja i označavanja delova stranice može biti uveden čisto da bi semantika bila jasnija u generalnim crtama.

Pristup iz koda

Kada se HTML ili XHTML dostavi klijentovom veb brauzeru, postoji šansa da će klijentov kod morati da se kreće kroz unutrašnju strukturu veb stranice. To se događa zato što se stranica često isporučuje client-side JavaScript koja izaziva dinamičko ponašanje stranice.

Prekomerno korišćenje

Korišćenje div i span je vitalan deo HTML i XHTML koda. Međutim, ponekad ih je moguće prekomerno koristiti.

Na primer ovaj kod:

<ul class="menu">
  <li>Main page</li>
  <li>Contents</li>
  <li>Help</li>
</ul>

... je poželjniji od sledećeg koda:

<div class="menu">
  <span>Main page</span>
  <span>Contents</span>
  <span>Help</span>
</div>

Vidi još

Spoljašnje veze