Verstaan die HTML5 AFDELING Element
Wanneer HTML5 'n aantal jare gelede op die toneel verskyn, het dit 'n klomp nuwe snitelemente by die langpad ingesluit, insluitende die AFDELING-element. Die meeste van die nuwe elemente wat HTML5 bekend stel, het duidelike gebruike. Byvoorbeeld, die element word gebruik om artikels en hoof dele van 'n webblad te definieer. Die element word gebruik om verwante inhoud te definieer wat nie krities is vir die res van die bladsy nie, en header, nav en footer is redelik selfverduidelikend. Die nuutgevoegde AFDELING-element is egter effens minder duidelik.
Baie mense glo dat die HTML-elemente AFDELING en eintlik net dieselfde ding-generiese houerelemente is wat inhoud op 'n webblad bevat. Die realiteit is egter dat hierdie twee elemente, albei houerelemente, niks anders as generies is nie. Daar is spesifieke redes om beide die AFDELING-element en die DIV-element te gebruik - en hierdie artikel sal die verskille verduidelik.
Artikels en Divs
Die AFDELING-element word gedefinieer as 'n semantiese gedeelte van 'n webblad of webwerf wat nie 'n ander spesifieke tipe is nie (soos artikel of eenkant). Ek is geneig om hierdie element te gebruik wanneer ek 'n duidelike deel van die bladsy merk - 'n afdeling wat groothandel verskuif en gebruik kan word op ander bladsye of dele van die webwerf. Dit is 'n duidelike inhoud, of 'n "afdeling" van die inhoud, as jy wil.
In teenstelling hiermee gebruik jy die DIV-element vir dele van die bladsy wat jy wil verdeel, maar vir ander doeleindes as semantiek . Ek sal 'n inhoudsgebied in 'n afdeling verpak as ek so suiwer doen om myself 'n "haak" te gee om met CSS te gebruik. Dit mag nie 'n duidelike deel van die inhoud wees wat gebaseer is op semantiek nie, maar is iets wat ek dikteer om die uitleg wat ek vir my bladsy wil hê, te bereik.
Dit is alles oor semantiek
Dit is 'n harde begrip om te verstaan, maar die enigste verskil tussen die DIV-element en die AFDELING-element is semantiek. Met ander woorde, dit is die betekenis van die afdeling kode wat u verdeel.
Enige inhoud wat in 'n DIV-element voorkom, het geen inherente betekenis nie. Dit word die beste gebruik vir dinge soos:
- CSS-style en hake vir CSS-style
- Uitleghouers
- JavaScript hake
- Afdelings vir die HTML om dit makliker te maak om te lees
Die DIV-element was die enigste element wat ons gehad het om hakies by te voeg om ons dokumente te stileer en kolomme en fancy layouts te skep. As gevolg hiervan het ons geëindig met HTML wat met DIV-elemente geslaan is. Wat kan webontwerpers "divitis" noem. Daar was selfs WYSIWYG-redakteurs wat die DIV-element uitsluitlik gebruik het. Ek het eintlik oor HTML geklim wat die DIV-element gebruik in plaas van vir paragrawe!
Met HTML5 kan ons gebruik maak van seksie-elemente om meer semanties beskrywende dokumente te skep (gebruik vir navigasie en beskrywende figure ensovoorts) en definieer ook die style op die elemente.
Wat oor die SPAN-element?
Die ander element waaraan die meeste mense dink wanneer hulle aan die DIV-element dink, is die element. Hierdie element, soos DIV, is nie 'n semantiese element nie. Dit is 'n inlyn-element wat u kan gebruik om hakies vir style en skrifte rondom inlynblokke van inhoud (gewoonlik teks) by te voeg. In die sin is dit presies soos die DIV-element, net inlyn eerder as 'n blokelement . Op sommige maniere kan dit dalk makliker wees om na die DIV as 'n blokvlak-SPAN-element te dink en dit op dieselfde manier te gebruik as wat jy slegs vir volledige blokke HTML-inhoud sou wou SPAN.
Daar is geen vergelykbare inlyn-seksie-element in HTML5 nie.
Vir ouer weergawes van Internet Explorer
Selfs as jy dramaties ouer weergawes van IE ondersteun (soos IE 8 en laer) wat nie HTML5 betroubaar herken nie, moet jy nie bang wees om semanties korrekte HTML-tags te gebruik nie. Die semantiek sal jou en jou span help om die bladsy in die toekoms te bestuur (want jy sal weet dat daardie afdeling die artikel is as dit omring word deur die ARTIKEL-element). Plus, blaaiers wat daardie tags herken, sal hulle beter ondersteun.
Jy kan nog steeds HTML5-semantiese seksie-elemente gebruik met Internet Explorer. Jy hoef net skripsies en moontlik 'n paar omliggende DIV-elemente by te voeg om die etikette as HTML te herken.
Gebruik DIV en AFDELING Elemente
As u dit korrek gebruik, kan u beide DIV en AFDELING-elemente saam in 'n geldige HTML5-dokument gebruik. Soos u hier in hierdie artikel gesien het, gebruik u die AFDELING-element om semanties diskrete gedeeltes van die inhoud te definieer, en u gebruik die DIV-element as hakies vir CSS en JavaScript, asook om uitleg te definieer wat nie 'n semantiese betekenis het nie.
Oorspronklike artikel deur Jennifer Krynin. Geredigeer deur Jeremy Girard op 3/15/17