Skip to content

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

20 de maaliskuu de 2021

SECTION-elementti määritellään verkkosivun tai sivuston semanttiseksi osaksi, joka ei ole jokin muu tarkempi 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 semantiikkaan. Voit esimerkiksi kääriä sisältöä DIV: ään, jotta se saisi ”koukun” tyyliksi CSS: llä. 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-tyyleihin
  • 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 sisäisesti lisäämään koukkuja tyyleihin ja komentosarjoihin sisältölohkojen ympärille (yleensä teksti). Tässä mielessä se on täsmälleen samanlainen kuin DIV, mutta ei ole lohkoelementti. 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 – määritellä sisällön semanttisesti erilliset osat ja DIV – määrittää koukut CSS-, JavaScript- ja asettelutarkoituksiin.

Alkuperäinen artikkeli Jennifer Krynin. Muokattu Jeremy Girard 15.3.2017