Deall Elfen ADRAN HTML5
Pan fydd HTML5 yn ymuno â'r olygfa nifer o flynyddoedd yn ôl, fe ychwanegodd nifer o elfennau adranio newydd i'r iaith, gan gynnwys yr elfen ADRAN. Mae gan y rhan fwyaf o'r elfennau newydd a gyflwynir gan HTML5 ddefnyddiau clir. Er enghraifft, defnyddir yr elfen i ddiffinio erthyglau a phrif rannau tudalen we, defnyddir yr elfen i ddiffinio cynnwys cysylltiedig nad yw'n hanfodol i weddill y dudalen, ac mae pennawd, nav, a footer yn eithaf hunan esboniadol. Mae'r elfen ADRAN sydd newydd ei ychwanegu, fodd bynnag, ychydig yn llai eglur.
Mae llawer o bobl yn credu bod yr elfennau HTML ADRAN ac mewn gwirionedd yr un elfennau cynhwysfawr generig a ddefnyddir i gynnwys cynnwys ar dudalen we. Y realiti, fodd bynnag, yw bod y ddwy elfen hyn, tra bod y ddwy elfen gynhwysydd, yn rhywbeth ond yn generig. Mae yna resymau penodol i ddefnyddio'r elfen ADRAN a'r elfen DIV - a bydd yr erthygl hon yn egluro'r gwahaniaethau hynny.
Adrannau ac Adrannau
Diffinnir yr elfen ADRAN fel rhan semantig o dudalen we neu safle nad yw'n fath arall mwy penodol (fel erthygl neu un arall). Rwy'n tueddu i ddefnyddio'r elfen hon pan fyddaf yn marcio rhan benodol o'r dudalen - sef adran y gellid ei gyfanwerthu ei symud a'i ddefnyddio ar dudalennau eraill neu rannau o'r wefan. Mae'n ddarn penodol o gynnwys, neu "adran" o gynnwys, os gwnewch chi.
Mewn cyferbyniad, rydych chi'n defnyddio'r elfen DIV ar gyfer rhannau o'r dudalen yr ydych am ei rannu, ond at ddibenion heblaw semanteg . Byddwn yn lapio rhan o gynnwys mewn adran os ydw i'n gwneud hynny i roi "bachyn" i mi fy hun i'w ddefnyddio gyda CSS. Efallai na fydd yn rhan benodol o gynnwys yn seiliedig ar semanteg, ond mae'n rhywbeth yr wyf yn ei ddynodi er mwyn cyflawni'r cynllun yr wyf am ei gael ar gyfer fy nhudalen.
Mae'n All About Semantics
Mae hwn yn gysyniad caled i'w ddeall, ond yr unig wahaniaeth rhwng yr elfen DIV a'r elfen ADRAN yw semanteg. Mewn geiriau eraill, ystyr yr adran o god rydych chi'n ei rannu yw.
Nid oes unrhyw ystyr cynhenid ar unrhyw gynnwys sydd wedi'i gynnwys y tu mewn i elfen DIV. Fe'i defnyddir orau ar gyfer pethau fel:
- CSS arddulliau a bachau ar gyfer arddulliau CSS
- Cynwysyddion cynllun
- Bachau JavaScript
- Is-adrannau ar gyfer yr HTML i'w gwneud hi'n haws ei ddarllen
Yr elfen DIV oedd yr unig elfen a gawsom ar gyfer ychwanegu bachau i arddull ein dogfennau a chreu colofnau a gosodiadau ffansi. Oherwydd hynny, daethom i ben gyda HTML a gafodd ei ddiddymu ag elfennau DIV - beth y gall dylunwyr gwe ei alw'n "ddifrod." Roedd yna hyd yn oed golygyddion WYSIWYG a ddefnyddiodd yr elfen DIV yn gyfan gwbl. Rwyf wedi rhedeg ar draws HTML sy'n defnyddio'r elfen DIV yn hytrach na pharagraffau!
Gyda HTML5, gallwn ddechrau defnyddio elfennau adranio i greu dogfennau disgrifiadol yn fwy semantig (gan ddefnyddio ar gyfer llywio ac ar gyfer ffigurau disgrifiadol ac yn y blaen) a hefyd diffinio'r arddulliau ar yr elfennau hynny.
Beth Am yr Elfen SPAN?
Yr elfen arall y mae'r rhan fwyaf o bobl yn ei feddwl pan fyddant yn meddwl am yr elfen DIV yw'r elfen. Nid yw'r elfen hon, fel DIV, yn elfen semantig. Mae'n elfen fewnol y gallwch ei ddefnyddio i ychwanegu bachau ar gyfer arddulliau a sgriptiau o amgylch blociau mewnosod o gynnwys (testun fel arfer). Yn yr ystyr hwnnw, mae'n union fel yr elfen DIV, dim ond mewn llinell yn hytrach nag elfen bloc . Mewn rhai ffyrdd, efallai y byddai'n haws meddwl am y DIV fel elfen SPAN lefel bloc a'i ddefnyddio yn yr un ffordd ag y byddech yn SPAN yn unig ar gyfer blociau cyfan o gynnwys HTML.
Nid oes unrhyw elfen rannu inline gymharol yn HTML5.
Ar gyfer Fersiynau Hyn o Internet Explorer
Hyd yn oed os ydych chi'n cefnogi fersiynau hŷn ddramatig o IE (fel IE 8 ac yn is) nad ydynt yn adnabod HTML5 yn ddibynadwy, ni ddylech ofni defnyddio tagiau HTML cywir. Bydd y semanteg yn eich helpu chi a'ch tîm i reoli'r dudalen yn y dyfodol (oherwydd byddwch chi'n gwybod mai'r adran honno yw'r erthygl os yw elfen ARTICLE wedi'i amgylchynu). Byd Gwaith, bydd porwyr sy'n cydnabod y tagiau hynny'n eu cefnogi'n well.
Gallwch chi barhau i ddefnyddio elfennau ymsefydlu semantig HTML5 gyda Internet Explorer, dim ond ychwanegu sgriptio ac o bosib ychydig o elfennau DIV o gwmpas i'w galluogi i adnabod y tagiau fel HTML.
Defnyddio Eitemau DIV ac ADRAN
Os ydych chi'n eu defnyddio'n gywir, gallwch ddefnyddio elfennau DIV ac ADRAN gyda'i gilydd mewn dogfen ddilys HTML5. Fel yr ydych chi wedi gweld yma yn yr erthygl hon, rydych chi'n defnyddio'r elfen ADRAN i ddiffinio darnau ar wahân o'r cynnwys, ac rydych chi'n defnyddio'r elfen DIV fel bachau ar gyfer CSS a JavaScript yn ogystal â diffinio cynllun nad oes ystyr semantig.
Erthygl wreiddiol gan Jennifer Krynin. Golygwyd gan Jeremy Girard ar 3/15/17