Kakva je razlika između DIV i SECTION?

Razumevanje elementa SECTION 5 HTML5

Kada se HTML5 nalazio na scenu pre više godina, dodao je gomilu novih elemenata za sekciju na langauge, uključujući i element SECTION. Većina novih elemenata koje HTML5 uvodi imaju jasnu upotrebu. Na primjer, element se koristi za definisanje članaka i glavnih dijelova web stranice, element se koristi za definisanje srodnog sadržaja koji nije kritičan za ostatak stranice, a zaglavlje, nav i podnožje su prilično jasne. Međutim, novo dodati element SECTION je malo manje jasan.

Mnogi ljudi vjeruju da su HTML elementi SECTION i stvarno iste stvari - generički elementi kontejnera koji se koriste za sadržavanje sadržaja na web stranici. Realnost je, međutim, da su ova dva elementa, iako su oba elementi kontejnera, nešto drugo osim generičnog. Postoje specifični razlozi za korištenje elementa SECTION i elementa DIV-a i ovaj članak će objasniti te razlike.

Sekcije i Divovi

Element SECTION je definisan kao semantički odeljak web stranice ili sajta koji nije još jedan specifičniji tip (poput članka ili u stranu). Navikao sam da koristim ovaj element kada obeležavam poseban odjeljak stranice - odjeljak koji se na veliku velicinu može pomjerati i koristiti na drugim stranicama ili dijelovima sajta. To je zaseban deo sadržaja, ili "dio" sadržaja, ako želite.

Nasuprot tome, koristite DIV element za delove stranice koje želite da podelite, ali za svrhe koji nisu semantika . Zamenio bih područje sadržaja u podeli ako to činim čisto da bih sebi dala "kuku" za korištenje s CSS-om. To možda nije poseban deo sadržaja zasnovan na semantici, ali je nešto što ja diktira da bih postigao izgled koji želim za svoju stranicu.

To je All About Semantics

Ovo je težak koncept koji treba razumjeti, ali jedina razlika između elementa DIV i elementa SECTION je semantika. Drugim riječima, to je značenje dijelova koda koji dijelite.

Bilo koji sadržaj sadržan unutar DIV elementa nema nikakvo inherentno značenje. Najbolje se koristi za stvari kao što su:

DIV element je bio jedini element koji smo imali za dodavanje kukica da stišemo naše dokumente i stvorimo kolone i ukrasne rasporede. Zbog toga smo završili sa HTML-om koji je bio preplavljen DIV elementima - što web dizajneri mogu nazvati "divitis". Bilo je čak i WYSIWYG urednika koji su isključivo koristili DIV element. Zapravo sam pokrenuo HTML koji koristi DIV element umesto za paragrafe!

Pomoću HTML5 možemo početi da koristimo elemente za sekciju da kreiramo više semantički deskriptivnih dokumenata (koristeći za navigaciju i za deskriptivne podatke i tako dalje), a takođe definišemo stilove na tim elementima.

Šta je sa SPAN elementom?

Drugi element koji većina ljudi misli kada pomisle na DIV element je element. Ovaj element, kao što je DIV, nije semantički element. To je inline element koji možete koristiti za dodavanje kukica za stilove i skripte oko inline blokova sadržaja (obično tekst). U tom smislu to je upravo kao DIV element, samo inlajn, a ne blokovni element . Na neki način, možda bi bilo lakše razmisliti o DIV-u kao elementu SPAN na nivou bloka i koristiti ga na isti način kao SPAN samo za čitave blokove HTML sadržaja.

Ne postoji uporedivi inline element za sekciju u HTML5.

Za starije verzije Internet Explorer-a

Čak i ako podržavate dramatično starije verzije IE (kao IE 8 i niže) koje ne pouzdano prepoznaju HTML5, ne bi trebalo da se plašite da koristite semantički ispravne HTML oznake. Semantika će vam pomoći i vaš tim da upravljaju stranom u budućnosti (zato što ćete znati da je taj odeljak članak ako je okružen elementom ARTICLE). Plus, pretraživači koji prepoznaju te oznake će ih bolje podržavati.

Još uvijek možete koristiti HTML5 semantičke elemente za sekciju sa Internet Explorer-om, samo je potrebno dodati skriptiranje i možda nekoliko okolnih DIV elemenata kako bi ih prepoznao oznake kao HTML.

Korišćenje DIV i SECTION Elements

Ako ih pravilno koristite, možete zajedno koristiti elemente DIV i SECTION u važećem HTML5 dokumentu. Kao što ste videli ovde u ovom članku, koristite SECTION element za definisanje semantički diskretnih dijelova sadržaja, a vi koristite DIV element kao kuke za CSS i JavaScript, kao i definisanje rasporeda koji nema semantičko značenje.

Originalni članak Jennifer Krynin. Uredio Jeremy Girard 15.3.17