SECTION-elementti määritellään verkkosivun tai sivuston semanttiseksi osaksi, joka ei ole jokin muu erityisempi tyyppi, kuten ARTIKKELI tai ASIDE. Suunnittelijat käyttävät tätä elementtiä usein merkittäessään sivun erillisen osan - koko osan, jota voidaan siirtää ja käyttää muilla sivuilla tai sivuston osilla. Se on erillinen sisältö.
Sitä vastoin DIV-elementti sopii sivun osiin, jotka haluat jakaa muihin tarkoituksiin kuin semantiikka. Voit esimerkiksi kääriä sisältöä DIV: ään, jotta sille "koukku" CSS-tyylillä. Se ei ehkä ole semanttisesti erillinen sisällön osa, mutta se on erotettu toisistaan, jotta voit saavuttaa halutun asettelun tai tuntuman.
Se on kaikki semantiikasta
Ainoa ero DIV- ja SECTION-elementtien välillä on semantiikka - merkitys jakamastasi sisällöstä.
Millä tahansa DIV-elementin sisällöllä ei ole luontaista merkitystä. Sitä käytetään parhaiten esimerkiksi:
- CSS-tyylit ja koukut CSS-tyyleille
- Asetteluastiat
- JavaScript-koukut
- Jaot, jotka helpottavat sisällön tai HTML: n lukemista
DIV-elementti oli aiemmin ainoa käytettävissä oleva koukkujen lisääminen tyyliasiakirjoihin ja asetteluihin. Ennen HTML5: tä tyypillinen verkkosivu oli täynnä DIV-elementtejä. Itse asiassa jotkut WYSIWYG-toimittajat käyttivät yksinomaan DIV-elementtiä, toisinaan kappaleiden sijaan.
HTML5 esitteli leikkauselementtejä, jotka loivat semanttisesti kuvaavampia asiakirjoja ja auttoivat määrittelemään tyylejä näille elementeille.
Entä SPAN-elementti?
Toinen yleinen ei-semanttinen elementti on SPAN. Sitä käytetään linjassa lisätä koukkuja tyyleihin ja komentosarjoihin sisältölohkojen (yleensä tekstin) ympärille. Tässä mielessä se on täsmälleen kuin DIV, mutta ei ole estoelementti. Ajattele DIV: tä lohkotason SPANina ja käyttää sitä samalla tavalla, mutta kokonaisiin HTML-sisällön lohkoihin.
HTML: ssä ei ole vertailukelpoista sisäistä osioelementtiä.
Internet Explorerin vanhemmille versioille
Vaikka tuet Microsoftin Internet Explorerin dramaattisesti vanhempia versioita, jotka eivät tunnista luotettavasti HTML5: tä, sinun tulisi käyttää semanttisesti oikeita HTML-tunnisteita. Semantiikka auttaa sinua ja tiimiäsi hallitsemaan sivua tulevaisuudessa. Internet Explorerin uusimmat versiot sekä sen korvaava Microsoft Edge tunnistavat HTML5: n.
DIV- ja SECTION-elementtien käyttäminen
Voit käyttää sekä DIV- että SECTION-elementtejä yhdessä kelvollisessa HTML5-asiakirjassa - SECTION semanttisesti erilliset sisällön osat ja DIV, jotta määritetään koukut CSS: lle, JavaScriptille ja asettelulle tarkoituksiin.
Alkuperäinen artikkeli Jennifer Krynin. Muokattu Jeremy Girard 15.3.2017.