Razumijevanje elementa HTML5 SECTION
Kada se HTML5 pojavio na sceni prije nekoliko godina, dodao je hrpu novih elemenata za presijecanje na langauge, uključujući i element SECTION. 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. Novo dodani element SECTION, međutim, malo je manje jasan.
Mnogi ljudi vjeruju da su elementi HTML-a ODJELJAK i zapravo samo ista stvar - opći elementi spremnika koji sadrže sadržaj na web stranici. Stvarnost je, međutim, da su ta dva elementa, iako oba elementa kontejnera, ništa drugo nego općenito. Postoje specifični razlozi za korištenje elementa SEZIJE i DIV elementa - a ovaj će članak objasniti te razlike.
Sekcije i Divs
Element SECTION definira se kao semantički odjeljak web stranice ili web stranice koja nije drugačija specifičnija vrsta (kao što je članak ili na 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 druge svrhe osim 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 o semantici
Ovo je teško shvatiti, ali jedina razlika između DIV elementa i elementa SECTION je semantika. Drugim riječima, to je značenje dijela koda koji dijeliš.
Svaki sadržaj koji se nalazi unutar DIV elementa 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
Element DIV bio je jedini element koji smo imali za dodavanje kuka za stiliranje naših dokumenata i stvaranje stupaca i fantazija. Zbog toga smo završili s HTML-om koji je bio prepuna DIV elemenata - što bi web dizajneri mogli nazvati "divitis". Bilo je čak i WYSIWYG urednika koji su isključivo koristili DIV element. Igrao sam se preko HTML-a koji koristi 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 elementu DIV je element. Ovaj element, kao što je 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 je smislu točno onakav kakav je DIV element, samo u liniji, a ne kao blok element . Na neki način, može se lakše razmišljati o DIV-u kao elementu SPAN na razini bloka i upotrijebiti ga na isti način na koji biste se SPAN koristili 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 odjeljak članak ako je okružen elementom ARTICLE). Osim toga, preglednici koji prepoznaju te oznake bolje će ih podržati.
Još uvijek možete upotrebljavati HTML5 elemente semantičke sekcije pomoću programa Internet Explorer, samo trebate dodati skriptiranje, a možda i nekoliko okolnih DIV elemenata da biste ih prepoznali kao HTML.
Upotreba elemenata DIV i SEZKE
Ako ih ispravno upotrebljavate, možete upotrijebiti elemente DIV i SECTION zajedno u valjanom HTML5 dokumentu. Kao što ste ovdje vidjeli u ovom članku, koristite element SECTION kako biste definirali semantički diskretne dijelove sadržaja, a DIV element koristite kao kuke za CSS i JavaScript te definiranje izgleda koji nema semantičko značenje.
Izvorni članak Jennifer Krynin. Uredio Jeremy Girard na 15.3.17