Mis vahe on DIV ja SECTION?

HTML5 SECTION elemendi mõistmine

Kui HTML5 kirjutab stseenile mitu aastat tagasi, lisas ta langeuge, sealhulgas SECTIONi elementi, hulga uusi lõikekeleelemente. Enamik uusi HTML-5 sisestatavaid elemente on selgete kasutusaladega. Näiteks kasutatakse seda elementi artiklite ja veebisaidi põhiosade määratlemiseks, seda elementi kasutatakse seotud sisu määratlemiseks, mis ei ole ülejäänud lehe jaoks kriitiline, ning päis, nav ja jalus on üsna seletamatud. Kuid äsja lisatud SECTIONi element on natuke vähem selge.

Paljud inimesed usuvad, et HTML-elemendid SECTION ja on tõepoolest samad asjad - üldised konteinerite elemendid, mida kasutatakse veebisaidi sisu sisaldamiseks. Kuid reaalsuseks on see, et need kaks elementi, kuigi mõlemad on konteinerielemendid, on midagi üldist. Nii SECTIONi elemendi kui ka DIV-elemendi kasutamiseks on konkreetsed põhjused - ja see artikkel selgitab neid erinevusi.

Sektsioonid ja divs

SECTION element on määratletud kui veebisaidi või saidi semantiline jaotis, mis ei ole veel üks konkreetsem tüüp (näiteks artikkel või kõrvaltegevus). Kaldun seda elementi kasutama, kui markeerin lehe eraldiseisev osa - sellist sektsiooni, mida saab hulgimüügi korral teisaldada ja kasutada teistel lehtedel või selle osades. See on sisu lahutamatu osa või sisu osa, kui soovite.

Seevastu te kasutate DIV-elementi selle lehe osade jaoks, mida soovite jagada, kuid mitte ainult semantikal . Ma paneksin sisu ala jagunemiseks, kui ma teen seda puhtalt selleks, et anda endale CSS-i kasutamiseks "konks". See ei pruugi olla semantikale tugineva sisuliselt eraldiseisev osa, vaid see on midagi, mida ma dikteerin, et saavutada lehe jaoks soovitud paigutus.

See on kõik semantikast

See on raske mõista, kuid ainus erinevus DIV-elemendi ja SECTION-elemendi vahel on semantika. Teisisõnu, see on jagatud koodi osa tähendus .

Igal DIV-elemendis sisalduval sisul pole mingit sisulist tähendust. Seda saab kõige paremini kasutada järgmiste asjadega:

DIV elemendiks oli ainsaks elemendiks, mis oli meil hookude lisamiseks, et meie dokumente stiili kujundada ja luua veerge ja väljamõeldud paigutusi. Selle tulemusena jõudsime lõpule HTML-i, mis oli kujutatud DIV elementidega - mida veebidisainerid nimetavad "diviidiks". Seal oli isegi WYSIWYG toimetajad, kes kasutasid ainult DIV-elementi. Ma olen tegelikult käivitanud HTML-i, mis kasutab paragrahvi asemel DIV-elementi!

HTML5 abil saame hakata kasutama sektsioonielemente, et luua rohkem semantilist kirjeldavat dokumenti (kasutage navigeerimiseks ja kirjeldavate arvude jaoks jne) ning määrake nende elementide stiilid.

Mis on SPANi elemendist?

Teine element, mida enamik inimesi mõtleb DIVi elemendi mõtlemisel, on element. See element, nagu DIV, ei ole semantiline element. See on sisseehitatud element, mida saab kasutada sisustuste (tavaliselt teksti) ümbritsevate stiilide ja skriptide konksude lisamiseks. Selles mõttes on see täpselt nagu DIV-element, ainult inline, mitte plokk element . Mõnes mõttes võib DIV-i mõelda lihtsamalt kui ploki tasemel SPAN-elementi ja seda kasutada samal viisil kui SPAN ainult HTML-sisu kogu plokkide jaoks.

HTML5-is pole võrreldavat in-kujulist sektsioonielementi.

Internet Exploreri vanemate versioonide jaoks

Isegi kui toetate dramaatiliselt vanu IE versioone (nt IE 8 ja madalamad), mis HTML5-d usaldusväärselt ei tunne, ei tohiks te karda semantilist korrektseid HTML-märgendeid kasutada. Semantika aitab teil ja teie meeskonnal tulevikus hallata lehte (kuna teate, et artikkel on artikkel, kui see on ARTICLE-elemendi ümbritsetud). Veelgi enam, need brauserid, kes neid silte tunnustavad, toetavad neid paremini.

Internet Exploreri HTML5 semantiliste sektsioonielementidega saate ikkagi kasutada, peate lihtsalt lisama skripte ja võib-olla ka mõne ümbritseva DIV elemendi, et nad saaksid silte HTML-ideks tunnustada.

DIV ja SECTION elementide kasutamine

Kui kasutate neid õigesti, saate kasutada nii DIV kui ka SECTION elemente koos kehtivate HTML5-dokumentidega. Nagu näinud siin käesolevas artiklis, kasutab SECTION elementi semantilise eraldiseisvate sisu osade määratlemiseks ning te kasutate DIV-elementi CSS-i ja JavaScripti konksudena ning määratlust, millel pole semantilist tähendust.

Jennifer Krynini algne artikkel. Redigeeris Jeremy Girard 3./15/17