HTML5-osion elementin ymmärtäminen
Kun HTML5 katoaa paikalle useita vuosia sitten, se lisäsi joukon uusia leikkauselementtejä langaugeen, mukaan lukien SECTION-elementti. Suurin osa HTML5: n uusista elementeistä on selkeitä käyttötarkoituksia. Esimerkiksi elementtiä käytetään määrittelemään verkkosivun artikkeleita ja pääosia, elementtiä käytetään määrittämään vastaava sisältö, joka ei ole kriittinen muulle sivulle, ja otsikko, nav ja alatunniste ovat melko itsestään selvää. Hiljattain lisätty SECTION-elementti on kuitenkin hieman epäselvä.
Monet uskovat, että HTML-elementit SECTION ja ovat oikeastaan vain sama asia - geneeriset konttielementit, joita käytetään sisällön ylläpitoon verkkosivulla. Tosiasia on kuitenkin se, että nämä kaksi elementtiä, vaikka molemmat ovat konttielementtejä, ovat vain yleisiä. On olemassa erityisiä syitä käyttää sekä SECTION-elementtiä että DIV-elementtiä - ja tässä artikkelissa selitetään nämä erot.
Osastot ja Divs
SECTION-elementti on määritetty verkkosivun tai sivuston semanttiseksi osaksi, joka ei ole toista erityisempää tyyppiä (kuten artikkeli tai sivu). Minulla on tapana käyttää tätä elementtiä, kun merkitsen sivun erillisen osan - osaa, jota voitaisiin siirtää ja käyttää muilla sivuilla tai sivuston osissa. Se on erillinen sisältö tai sisältö "osa", jos haluat.
Sitä vastoin käytät DIV-elementtiä osille sivua, jonka haluat jakaa, mutta muuhun tarkoitukseen kuin semantiikkaan . Haluan kääriä sisältöalueita divisioonissa, jos teen niin puhtaasti, että annan itselleni "koukun" käytettäväksi CSS: n kanssa. Se ei välttämättä ole erillinen osio, joka perustuu semantiikkaan, mutta sanon jotain, jotta voisin saavuttaa sivuani halutun asettelun.
It's All About Semantics
Tämä on vaikea käsitys ymmärtää, mutta ainoa ero DIV-elementin ja SECTION-elementin välillä on semantiikka. Toisin sanoen se on koodinosan merkitys , johon olet jakamassa.
Kaikki sisällöt, jotka sisältyvät DIV-elementtiin, eivät ole luontaisia. Sitä käytetään parhaiten seuraavissa asioissa:
- CSS-tyylit ja koukut CSS-tyyleille
- Asetteluastiat
- JavaScript-koukut
- HTML-divisioonat helpottavat lukemista
DIV-elementti oli ainut elementti koukkujen lisäämiseksi muotoilemaan asiakirjoja ja luomaan sarakkeita ja hienoja layouteja. Tästä johtuen päädyimme HTML: ään, joka oli täynnä DIV-elementtejä - mitä web-suunnittelijat voivat kutsua "divitisiksi". WYSIWYG-toimittajat käyttivät vain DIV-elementtiä. Olen todella käyttänyt HTML-koodia, joka käyttää DIV-elementtiä kappaleiden sijasta.
HTML5: n avulla voimme aloittaa leikkauselementtien käyttämisen luomalla lisää semanttisesti kuvailevia asiakirjoja (navigointi ja kuvailevia lukuja jne.) Sekä määritellä näiden elementtien tyylejä.
Entä SPAN-elementti?
Toinen elementti, jota useimmat ihmiset ajattelevat, kun he ajattelevat DIV-elementtiä, ovat elementti. Tämä elementti, kuten DIV, ei ole semanttinen elementti. Se on inline-elementti, jonka avulla voit lisätä koukkuja tyyleille ja komentosarjoille sisällön sisäisten lohkojen (yleensä tekstin) ympärille. Tässä mielessä se on aivan kuten DIV-elementti, vain inline eikä lohkoelementti . Jotkin tavat saattavat olla helpompaa ajatella DIV: tä lohkotason SPAN-elementtinä ja käyttää sitä samalla tavoin kuin SPANia vain koko HTML-sisältölohkoille.
HTML5: ssä ei ole vastaavaa inline-leikkauselementtiä.
Internet Explorerin vanhemmille versioille
Vaikka tuettit dramaattisesti vanhempia IE-versioita (kuten IE 8 ja alemmat), jotka eivät tunnista luotettavasti HTML5: tä, sinun ei pitäisi pelätä käyttää semanttisesti oikeita HTML-tunnisteita. Semanttinen auttaa sinua ja sinun tiimiä hallitsemaan sivua tulevaisuudessa (koska tiedät, että kyseinen osio on artikkeli, jos se on ARTICLE-elementin ympärillä). Lisäksi selaimet, jotka tunnustavat nämä tunnisteet, tukevat heitä paremmin.
Voit silti käyttää HTML5: n semanttisia leikkauselementtejä Internet Explorerissa. Sinun tarvitsee vain lisätä komentosarjat ja mahdollisesti muutamia DIV-elementtejä, jotta he voivat tunnistaa tunnisteet HTML: ksi.
Käytä DIV- ja SECTION-elementtejä
Jos käytät niitä oikein, voit käyttää sekä DIV- että SECTION-elementtejä yhdessä kelvollisessa HTML5-asiakirjassa. Kuten tässä artikkelissa olette nähneet, käytät SECTION-elementtiä määrittelemällä semanttisesti erillisiä osia sisällöstä ja käytät DIV-elementtiä koukkuina CSS: lle ja JavaScriptille sekä määrittämällä asettelua, jolla ei ole semanttista merkitystä.
Alkuperäinen artikkeli Jennifer Krynin. Julkaisija: Jeremy Girard 15.15.17