Razumevanje elementa SECTION 5 HTML5
Ko HTML5 vstopi na sceno pred več leti, je v langauge dodal še več novih elementov za sekcijo, vključno z elementom SECTION. Večina novih elementov, ki jih uvede HTML5, imajo jasno uporabo. Element se na primer uporablja za določanje člankov in glavnih delov spletne strani, element se uporablja za določanje sorodne vsebine, ki ni kritična za preostanek strani, glava, nav in noga pa so precej samoumevna. Nov dodani element SECTION pa je nekoliko manj jasen.
Mnogi ljudje verjamejo, da so elementi HTML SECTION in so resnično isti elementi, ki vsebujejo splošne elemente, ki vsebujejo vsebino na spletni strani. Resničnost pa je, da sta ta dva elementa, medtem ko sta oba elementi zabojnika, nič drugega kot generična. Obstajajo posebni razlogi za uporabo elementa SECTION in elementa DIV - ta članek bo razložil te razlike.
Odseki in razdelki
Element SECTION je opredeljen kot semantični odsek spletne strani ali spletnega mesta, ki ni še bolj specifična vrsta (npr. Članek ali stran). Ta element uporabljam, ko označujem ločen del strani - razdelek, ki bi se lahko na veleprodajno stran preselil in uporabil na drugih straneh ali delih spletnega mesta. To je izrazit del vsebine ali "del" vsebine, če ga boste.
V nasprotju s tem uporabljate element DIV za dele strani, ki jih želite razdeliti, vendar za namene, ki niso semantika . Območje vsebine bi delalo v oddelku, če bom to storil izključno, da bi si sam pridobil "kavelj" za uporabo s CSS. Morda ni ločen odsek vsebine, ki temelji na semantiki, ampak je nekaj, kar narekujem, da bi dosegli postavitev, ki jo želim za svojo stran.
Vse o semantiki
To je trden koncept za razumevanje, vendar je edina razlika med elementom DIV in elementom SECTION semantika. Z drugimi besedami, to je pomen kode, ki ga delite.
Vse vsebine, ki so vsebovane znotraj elementa DIV, nimajo nobenega smisla. Uporablja se najbolje za stvari, kot so:
- CSS sloge in kljuke za sloge CSS
- Posode za postavitev
- Kavlji za JavaScript
- Razdelki za HTML, ki olajšajo branje
Element DIV je bil edini element, ki smo ga imeli za dodajanje trnkov za oblikovanje naših dokumentov in ustvarjanje stolpcev in lepih postavitev. Zaradi tega smo končali z HTML-jem, ki je bil prepleten z elementi DIV - kar lahko spletni oblikovalci imenujejo "divitis". Obstajajo tudi uredniki WYSIWYG, ki so izključno uporabljali element DIV. Pravzaprav sem zagnala čez HTML, ki uporablja element DIV namesto za odstavke!
Z HTML5 lahko začnemo uporabljati elemente za razdeljevanje, da ustvarimo več semantično opisnih dokumentov (z uporabo za navigacijo in za opisne številke itd.) In tudi določimo sloge na teh elementih.
Kaj pa element SPAN?
Drugi element, ki ga večina ljudi misli, ko razmišlja o elementu DIV, je element. Ta element, kot je DIV, ni semantični element. To je element, ki ga lahko uporabite za dodajanje trnkov za sloge in skripte okoli vrstic vsebine (običajno besedilo). V tem smislu je ravno tako kot element DIV, samo inline in ne blokovni element . Na nekatere načine je morda lažje razmišljati o DIV-u kot elementu SPAN na ravni blokov in ga uporabite na enak način, kot bi ga SPAN uporabljali samo za celotne vsebine HTML-vsebine.
V HTML5 ni primerljiv element za inline razdelek.
Za starejše različice Internet Explorerja
Tudi če podpirate dramatično starejše različice IE (npr. IE 8 in nižje), ki ne zanesljivo prepoznajo HTML5, se ne smete bojiti uporabe semantično pravilnih oznak HTML. Semantika vam bo v prihodnje pomagala, da vaša stran in vaša stran upravljata stran (ker boste vedeli, da je ta članek članek, če ga obkroža element ARTIKLE). Plus, brskalniki, ki prepoznajo te oznake, bodo bolje podpirali.
Še vedno lahko uporabite elemente semantičnega sekcijskega elementa HTML5 z Internet Explorerjem, samo dodate skripte in morda nekaj okoliških elementov DIV, da jih prepoznaš kot HTML.
Uporaba elementov DIV in SECTION
Če jih pravilno uporabljate, lahko elemente DIV in SECTION uporabljate skupaj v veljavnem dokumentu HTML5. Kot ste videli v tem članku, uporabite element SECTION za definiranje semantično ločenih delov vsebine in uporabite element DIV kot kljuke za CSS in JavaScript, kot tudi opredelitev postavitve, ki nima semantičnega pomena.
Izvorni članek Jennifer Krynin. Uredil Jeremy Girard dne 15.3.17