Wat is de ferskil tusken DIV en SECTION?

Understanding the HTML5 SECTION Element

As HTML5 in oantal jierren lyn op it skaal rint, hat it in lingte fan nije ôfdielingsels oanbean oan 'e Languezje, ûnder oaren it elemint SEKTION. De measte nije eleminten dy't HTML5 yntrodusearje hawwe dúdlik brûkt. Bygelyks, it elemint wurdt brûkt om artikels en haadtiden fan in webside te definiearjen, it elemint wurdt brûkt om ynhâldlike ynhâld te definiearjen dy't net kritysk is foar de rest fan 'e side, en koptekst, nav en fuotter binne in seldsume ferklearring. It nij tafoegde SECTION-elemint is lykwols in bytsje minder dúdlik.

In soad minsken leauwe dat de HTML-eleminten besjogge en binne gewoan krekt deselde ding-generyske kontener-eleminten dy't brûkt binne om ynhâld op in webside te befetsjen. De wurklikheid is lykwols dat dizze twa eleminten, wylst beide bepaalde eleminten binne, allinich mar generika. Der binne spesifike redenen om sawol de eleminten as SECTION en it DIV-elemint te brûken en dit artikel sil dy ferskillen ferklearje.

Seksjes en divs

It elemint SEKTION wurdt definieare as in semantyske seksje fan in webside of side dy't gjin oare spesifike type (lykas artikel of beide) is. Ik neifoan it gebrûk fan dizze elemint te brûken, as ik in ûnderskate seksje fan 'e side markearje - in rubryk dat groeie kin wurde ferpleatse en brûkt op oare siden of ûnderdielen fan' e side. It is in ûnderskate stikje ynhâld, of in "seksje" fan ynhâld, as jo wolle.

Yn tsjinstelling dan brûke jo it DIV-elemint foar dielen fan 'e side dy't jo wolle divyzje, mar foar oare siden as semantika . Ik soe in gebiet fan ynhâld yn in divyzje wapke as ik dat sa makket om mysels in "hook" te meitsjen om te brûken mei CSS. It kin miskien net in ûnderskate diel fan ynhâld wêze, basearre op semantika, mar is wat ik diktearje om it layout te realisearjen dat ik wol foar myn side.

It's All About Semantics

Dit is in hurde begryp om te begripen, mar it iennichste ferskil tusken it DIV-elemint en it element fan SECTION is semantika. Mei oare wurden, it is de betsjutting fan 'e sekte fan koade dy't jo opnimme.

Elke ynhâld dy't yn in DIV-elemint befettet, hat gjin inkelde ynderlike betsjutting. It is benammen brûkt foar dingen lykas:

It DIV-elemint brûkt it ienige elemint dat wy foar it oanmeitsjen fan haken hawwe om ús dokuminten te styljen en kolommen en lânskiplike lagen te meitsjen. Hjirmei binne wy ​​mei HTML ferskynden dy't mei DIV-eleminten riedsels - wat kin web-ûntwerpers "divitis" neame. WYSIWYG-redaktifers wiene dan allinich it DIV-elemint. Ik haw eins fereaske oer HTML dat it DIV-elemint brûke yn stee fan paragrafen!

Mei HTML5 kinne wy ​​gebrûk meitsje fan sesje-eleminten om mear semantysk beskriuwende dokuminten te meitsjen (gebrûk fan 'e navigaasje en foar beskriuwende sifers en sa) en definieare ek de stilen op dy eleminten.

Wat oer it SPAN-elemint?

It oare elemint dat de measte minsken tinke as se tinke oan it DIV-elemint is it elemint. Dit elemint, lykas DIV, is gjin semantyske elemint. It is in ynlinyk elemint dat jo brûke kinne om haken te meitsjen foar stilen en skripten om ynlineblokken fan ynhâld (meastentiids tekst). Yn dat sin is it krekt as it DIV-elemint, allinich ynline as in bloksel . Op guon wizen kin it it makliker wêze fan 'e DIV as in blokhelp SPAN-elemint en brûk it op deselde manier as SPAN allinich foar alle blokken fan HTML-ynhâld.

Der is gjin fergelykbere ynline-seksje yn HTML5.

Foar âldere ferzjes fan Internet Explorer

Sels as jo drukende âldere ferzjes fan IE (lykas IE 8 en leger) stypje dy't net HTML5 serieus werkenne, moatte jo net bang wêze om semantysk korrekte HTML-tags te brûken. De semantika sil jo helpe en jo ploech beheine de side yn 'e takomst (om't jo witte dat dizze seksje it artikel is as it omtinken is fan it artikel-elemint). Plus, browsers dy't dizze tags werkenne sille har better stypje.

Jo kinne HTML5 semyske sesje-eleminten brûke mei Internet Explorer, jo moatte allinich skriptûnjen oanmeitsje en eventueel in pear omjouwende DIV-eleminten om se te krijen om de tags as HTML te erkennen.

DIV en SECTION Elements brûke

As jo ​​se goed brûke, kinne jo beide eleminten DIV en SECTION elkoar brûke yn in jildich HTML5 dokumint. As jo ​​hjir yn dit artikel sjogge, brûke jo it elemint SEKSE om semantysk diskrete dielen fan 'e ynhâld te definiearjen, en jo brûke it DIV-elemint as haken foar CSS en JavaScript en it bepalen fan layout dat gjin semantyske betsjutting hat.

Oarspronklik artikel fan Jennifer Krynin. Edited by Jeremy Girard on 3/15/17