Kada se HTML5 pojavio na sceni prije mnogo godina, dodao je hrpu novih elemenata za presijecanje jezgri, uključujućiODJELJAK element. Većina novih elemenata koje HTML5 uvodi imaju jasnu upotrebu. Na primjer, element se koristi za definiranje članaka i glavnih dijelova web stranice, element se upotrebljava za definiranje povezanog sadržaja koji nije ključan za ostatak stranice, a zaglavlja, navigacija i podnožje prilično su samoobjasni. Nedavno dodanODJELJAK element, međutim, malo je manje jasan.
Mnogi ljudi vjeruju u HTML elemente ODJELJAK i zapravo su samo iste stvari - generički elementi kontejnera koji se koriste za sadržavanje sadržaja na web stranici. Stvarnost je, međutim, da su ta dva elementa, iako oba elementa kontejnera, ništa drugo nego općenito. Postoje određeni razlozi za korištenje oba ODJELJAK element i DIV element - i ovaj članak će objasniti te razlike.
Sekcije i Divs
ODJELJAK element je definiran kao semantički odjeljak web stranice ili web stranice koja nije drugačija specifičnija vrsta (kao što je članak ili u stranu). Ovakav element upotrebljavam prilikom obilježavanja posebnog odjeljka stranice - odjeljku koji bi se veleprodaja mogla premjestiti i koristiti na drugim stranicama ili dijelovima web mjesta. To je poseban sadržaj, ili "dio" sadržaja, ako to želite.
Nasuprot tome, koristite DIV element za dijelove stranice koju želite podijeliti, ali za svrhe koje nisu semantike. Ja bih omotala područje sadržaja u odjelu ako radim tako čisto da sebi pribavim "kuku" za korištenje s CSS-om. Možda ne može biti poseban dio sadržaja koji se temelji na semantici, ali je nešto što diktiram kako bi se postigao izgled koji želim za moju stranicu.
Sve je o semantici
Ovo je težak koncept za razumijevanje, ali jedina razlika između DIV element i ODJELJAK element je semantika. Drugim riječima, to je značenje odjeljka koda koji dijeliš.
Svaki sadržaj koji se nalazi unutar a DIV element nema nikakvo svojstveno značenje. Najbolje se koristi za stvari kao što su:
- CSS stilovi i kuke za CSS stilove
- Izgled spremnika
- JavaScript kuke
- Podjele za HTML olakšavaju čitanje
DIV element je bio jedini element koji smo imali za dodavanje kuka za stiliranje naših dokumenata i stvaranje stupaca i raskošnih izgleda. Zbog toga smo završili s HTML-om koji je bio prepun DIV elementi - što bi web dizajneri mogli nazvati "divitis". Bilo je čak i WYSIWYG urednika koji su koristili DIV isključivo. Igrao sam se preko HTML - a koji upotrebljava DIV element umjesto za odlomke!
Pomoću HTML5 možemo početi upotrebljavati elemente dijeljenja za izradu više semantičkih deskriptivnih dokumenata (upotreba za navigaciju i opisne slike itd.) Te definiranje stilova na tim elementima.
Što je s elementom SPAN?
Drugi element koji većina ljudi misli kada misle o DIV element je element. Ovaj element, poput DIV, nije semantički element. To je inline element koji možete koristiti za dodavanje kuka za stilove i skripte oko ugrađenih blokova sadržaja (obično tekst). U tom smislu to je točno kao DIV element, samo umetnut umjesto blok elementa. Na neki način, može se lakše razmišljati o DIV kao blok-razini SPAN elementa i koristite ga na isti način kao i vi SPAN samo za cijele blokove HTML sadržaja.
U HTML5-u nema usporedivog inline elementa sekcije.
Za starije verzije programa Internet Explorer
Čak i ako podržavate dramatično starije verzije IE (kao što je IE 8 i niže) koje ne pouzdano prepoznaju HTML5, ne bismo se trebali bojati upotrebljavati semantički ispravne HTML oznake. Semantika će vam i vaš tim upravljati u budućnosti (jer ćete znati da je taj dio članak ako je okružen ČLANAK element). Osim toga, preglednici koji prepoznaju te oznake bolje će ih podržati.
Još uvijek možete upotrebljavati HTML5 elemente semantičkog presjeka pomoću programa Internet Explorer, samo trebate dodati skriptiranje i moguće okoline DIV elemente kako bi ih prepoznali kao HTML.
Upotreba elemenata DIV i SEZKE
Ako ih ispravno koristite, možete koristiti oboje DIV i ODJELJAK elementi zajedno u valjanom HTML5 dokumentu. Kao što ste ovdje vidjeli u ovom članku, koristite ODJELJAK element za definiranje semantički diskretnih dijelova sadržaja, a vi koristite DIV elementa kao kuke za CSS i JavaScript, kao i definiranje izgleda koji nema semantičko značenje.
Izvorni članak Jennifer Krynin. Uredio Jeremy Girard na 15.3.17
