Mikä on ero DIV: n ja SECTION: n välillä?

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
instagram viewer

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.

instagram story viewer