Kuptimi i Elementit të Seksionit HTML5
Kur HTML5 burts në skenë një numër vitesh më parë, ai shtoi një bandë e elementeve të reja të seksionimit në langauge, duke përfshirë elementin SECTION. Shumica e elementeve të reja që HTML5 prezantojnë kanë përdorime të qarta. Për shembull, elementi përdoret për të përcaktuar artikujt dhe pjesët kryesore të një faqe uebi, elementi përdoret për të përcaktuar përmbajtje të ngjashme që nuk janë kritike për pjesën tjetër të faqes, dhe header, nav dhe footer janë goxha vetë-shpjeguese. Elementi i ri i shtuar SECTION, megjithatë, është pak më pak i qartë.
Shumë njerëz besojnë se elementët HTML SECTION dhe janë me të vërtetë vetëm të njëjtat elementë të përbërësit të sendeve të përdorura për të përmbajtur përmbajtje në një faqe interneti. Realiteti, megjithatë, është se këto dy elementë, përderisa të dyja janë elementë të kontejnerit, janë asgjë tjetër veçse gjenerike. Ka arsye specifike për të përdorur elementin SECTION dhe elementin DIV - dhe ky artikull do t'i shpjegojë këto dallime.
Seksionet dhe Divs
Elementi SECTION është definuar si një seksion semantik i një faqe interneti ose faqeje që nuk është një tjetër tip më specifik (si artikulli ose mënjanë). Kam prirjen të përdor këtë element kur po shënoj një seksion të veçantë të faqes - një pjesë që mund të zhvendoset me shumicë dhe të përdoret në faqe të tjera ose pjesë të faqes. Është një pjesë e veçantë e përmbajtjes, ose një "pjesë" e përmbajtjes, nëse dëshironi.
Në të kundërt, përdorni elementin DIV për pjesë të faqes që dëshironi të ndani, por për qëllime të ndryshme nga semantika . Unë do të përfundojë një zonë të përmbajtjes në një ndarje nëse unë jam duke bërë kështu thjesht për të dhënë veten një "goditje" për t'u përdorur me CSS. Kjo nuk mund të jetë një seksion i veçantë i përmbajtjes i bazuar në semantikë, por është diçka që unë po diktojnë për të arritur hartimin që dua për faqen time.
It's All About Semantika
Ky është një koncept i vështirë për t'u kuptuar, por e vetmja dallim midis elementit DIV dhe elementit SECTION është semantika. Me fjalë të tjera, është kuptimi i seksionit të kodit që po ndan.
Çdo përmbajtje që gjendet brenda një elementi DIV nuk ka ndonjë kuptim të natyrshëm. Përdoret më së miri për gjëra të tilla si:
- Stilet CSS dhe grepa për stilet CSS
- Kontejnerët e vendosjes
- JavaScript grepa
- Ndarjet për HTML për ta bërë më të lehtë leximin
Elementi DIV ishte elementi i vetëm që kishim për shtimin e grepave për të stilituar dokumentet tona dhe për të krijuar kolona dhe skica të zbukuruara. Për shkak të kësaj, ne përfunduam me HTML që ishte i mbushur me elementë DIV-çfarë mund të thërrasin web-designers "divitis". Kishte edhe redaktorë WYSIWYG që përdorën ekskluzivisht elementin DIV. Unë e kam drejtuar në të gjithë HTML që përdor elementin DIV në vend të paragrafëve!
Me HTML5, ne mund të fillojmë të përdorim elementë të seksionimit për të krijuar dokumente semantike përshkruese (duke përdorur për navigim dhe figura figurative dhe kështu me radhë) dhe gjithashtu për të përcaktuar stilet në ato elemente.
Ç'të themi për elementin SPAN?
Elementi tjetër që shumica e njerëzve mendojnë kur mendojnë për elementin DIV është elementi. Ky element, si DIV, nuk është një element semantik. Është një element i inline që mund të përdorni për të shtuar grepa për stilet dhe skriptet rreth blloqeve inline të përmbajtjes (zakonisht tekstit). Në këtë kuptim është pikërisht si elementi DIV, vetëm inline sesa një element bllok . Në disa mënyra, mund të jetë më e lehtë të mendosh për DIV-in si element bllok të nivelit SPAN dhe ta përdorësh atë në të njëjtën mënyrë që do të SPAN vetëm për blloqe të të gjithë përmbajtjeve HTML.
Nuk ka element të krahasueshëm inline elementësh në HTML5.
Për versionet e vjetra të Internet Explorer
Edhe nëse mbështet versionet më të vjetra të IE (si IE 8 dhe më e ulët) që nuk e kuptojnë me besueshmëri HTML5, nuk duhet të kesh frikë të përdorësh etiketa HTML të korrigjuara në mënyrë semantike. Semantika do t'ju ndihmojë ju dhe ekipi juaj të menaxhoni faqen në të ardhmen (sepse do ta dini se ky seksion është artikulli nëse është i rrethuar nga elementi ARTICLE). Plus, shfletuesit që i njohin ato tags do t'i mbështesin më mirë.
Ju mund të përdorni HTML5 elementet e seksioneve semantike me Internet Explorer, ju vetëm duhet të shtoni skriptime dhe ndoshta disa elementë rrethues të DIV-it për t'u bërë atyre të njohin etiketat si HTML.
Përdorimi i elementëve DIV dhe SECTION
Nëse i përdorni ato në mënyrë korrekte, mund të përdorni elementët DIV dhe SECTION së bashku në një dokument të vlefshëm HTML5. Siç e keni parë këtu në këtë artikull, përdorni elementin SECTION për të përcaktuar pjesë semantike diskrete të përmbajtjes, dhe përdorni elementin DIV si grepa për CSS dhe JavaScript, si dhe përcaktimin e faqosjes që nuk ka kuptim semantik.
Artikulli origjinal nga Jennifer Krynin. Redaktuar nga Jeremy Girard më 15/3/17