HTML5 SECTION elemento supratimas
Kai prieš keletą metų HTML5 įrašo į sceną, jis įtraukė daugybę naujų segmentavimo elementų į langauge, įskaitant elementą SECTION. Dauguma naujų HTML5 elementų yra aiškiai naudojami. Pavyzdžiui, elementas naudojamas straipsniams ir pagrindinėms interneto puslapio dalims apibrėžti, elementas naudojamas norint apibrėžti susijusį turinį, kuris nėra svarbus likusiam puslapiui, o antraštė, nav ir poraštė yra gana savaime suprantama. Tačiau naujai pridėtas SECTION elementas yra šiek tiek mažiau aiškus.
Daugelis žmonių mano, kad HTML elementai SECTION ir yra iš tikrųjų vienodi dalykai - bendrieji konteinerių elementai, naudojami siekiant įtraukti turinį tinklalapyje. Tačiau realybė yra ta, kad šie du elementai, nors ir yra konteinerių elementai, yra nieko bendro pobūdžio. Yra konkrečių priežasčių naudoti tiek SECTION elementą, tiek DIV elementą - ir šis straipsnis paaiškins šiuos skirtumus.
Skyriai ir Divs
SECTION elementas apibrėžiamas kaip žiniatinklio puslapio ar svetainės semantinis skyrius, kuris nėra kitas labiau konkretus tipas (pvz., Straipsnis ar atvirkštinė dalis). Aš linkiu naudoti šį elementą, kai pažymiu atskirą puslapio dalį - skyrių, kuris gali būti perkeltas ir naudojamas kitais puslapiais ar svetainės dalimis. Tai yra atskiras turinys arba "turinys", jei norite.
Priešingai, jūs naudojate DIV elementą tam tikroms puslapio dalims, kurias norite suskaidyti, bet kitais tikslais nei semantika . Aš norėčiau apvynioti turinį skyriuje, jei tai darysiu, kad suteikčiau sau "kablys" naudoti su CSS. Tai gali būti ne atskiras turinys, pagrįstas semantika, bet tai, ką aš diktuoja norėdamas pasiekti mano puslapio maketą.
Tai viskas apie semantiką
Tai sunku suprasti, tačiau vienintelis skirtumas tarp DIV elemento ir SECTION elemento yra semantika. Kitaip tariant, tai kodo, kurį dalijatės, prasmė .
Bet koks turinys, kuris yra DIV elemento viduje, neturi savitos reikšmės. Tai geriausia naudoti tokiems daiktams kaip:
- CSS stiliai ir kabliai CSS stiliams
- Maketo talpyklos
- "JavaScript" kabliukai
- Skirta HTML, kad būtų lengviau skaityti
DIV elementas buvo vienintelis elementas, kurį turėjome pridėti prie kabliukų, kad galėtume stilizuoti mūsų dokumentus ir kurti stulpelius ir išgalvotus išdėstymus. Dėl to mes galų gale susidūrėme su HTML formatu, kuris buvo apdengtas DIV elementais - ką web dizaineriai vadina "divitais". Buvo net WYSIWYG redaktoriai, kurie išskirtinai naudojo DIV elementą. Aš iš tikrųjų paleisti per HTML, kuris naudoja DIV elementą, o ne paragrafus!
Naudodamiesi HTML5, mes galime pradėti naudoti segmentavimo elementus, kurdami daugiau semantinių aprašomųjų dokumentų (naudodami navigaciją, aprašomiesiems skaičiams ir kt.), Taip pat apibrėžkite stilių tuose elementuose.
Ką apie SPAN elementą?
Kitas elementas, kurį dauguma žmonių galvoja apie savo DIV elementą, yra elementas. Šis elementas, kaip ir DIV, nėra semantinis elementas. Tai yra vidinis elementas, kurį galite naudoti pridėti kabliukų stilių ir scenarijus aplink turinio blokų (dažniausiai teksto) blokus. Šia prasme tai yra kaip DIV elementas, tik inline, o ne blokinis elementas . Tam tikrais būdais gali būti lengviau galvoti apie DIV kaip bloko lygio SPAN elementą ir jį naudoti taip pat, kaip ir SPAN tik visam HTML turinio blokui.
HTML5 sistemoje nėra panašaus inline segmentavimo elemento.
Senesnėms "Internet Explorer" versijoms
Net jei palaikysite žymiai senesnes IE versijas (pvz., IE 8 ir mažesnius), kurie nepatikimai atpažįsta HTML5, neturėtumėte bijoti semantiniu būdu naudoti teisingų HTML žymų. Semantika padės jums ir jūsų komandai tvarkyti puslapį ateityje (nes jūs žinosite, kad šis skyrius yra straipsnis, jei jis yra apsuptas elemento ARTICLE). Be to, naršyklės, kurios atpažįsta šias žymes, juos palaikys geriau.
Jūs vis dar galite naudoti HTML5 semantinius skirstymo elementus naudodami "Internet Explorer", jums tiesiog reikia pridėti scenarijus ir galbūt keletą aplinkinių DIV elementų, kad jie galėtų atpažinti žymas kaip HTML.
DIV ir SECTION ELEMENTŲ naudojimas
Jei naudojate juos teisingai, galite naudoti elementus DIV ir SECTION kartu galiojančiu HTML5 dokumentu. Kaip matėte čia šiame straipsnyje, jūs naudojate elementą SECTION, kad apibrėžtumėte semantiniu požiūriu atskiras turinio dalis, o jūs naudojate DIV elementą kaip kabutes CSS ir JavaScript, taip pat apibrėžkite išdėstymą, kuris neturi semantinės reikšmės.
Originalus straipsnis Jennifer Krynin. Redagavo Jeremy Girard, 3/15/17