HTML5 SECTION Elementua ulertzea
HTML5 urtetan duela urte asko daramatzanean, sekulako atalen elementu sorta gehitu zuen langaugeari, SECTION elementua barne. HTML5ren osagai berrien gehienek erabilera argiak dituzte. Adibidez, elementua web orri baten artikulu eta atal nagusiak zehazteko erabiltzen da, elementua gainerako orrialdearekin erlazionatuta dagoen edukia zehazteko erabiltzen da, eta goiburua, zilarra eta orri-oina nahiko azalpenak dira. SECTION elementu berria gehituta, ordea, apur bat argiagoa da.
Jende askok uste du SECTION HTML elementuek eta web orriko edukiak edukitzeko erabiltzen diren edukiontzi berberak dira. Errealitatea, ordea, bi elementu horiek dira, bai edukiontzi elementuak bai generikoak. Arrazoi zehatzak daude bai ATALA elementua eta DIV elementua erabiltzeko, eta artikulu honek desberdintasun horiek azalduko ditu.
Sailak eta Divs
SECTION elementea web orrialde baten atal semantiko gisa definitzen da, ez beste mota zehatz bat (artikulu edo alde batera utzita). Elementu hau erabiltzen hasten naiz orriaren atal desberdin bat markatzen ari naizenean - toki handiagoak lekuz aldatzeko eta beste orrialde edo atal batzuetan erabil daitekeen atal bat. Eduki bereizi bat da, edo edukiaren "atala", baldin baduzu.
Aitzitik, DIV elementua erabiltzen baduzu zatitzen nahi dituzun orrialdeetako zatientzat, baina semantika ez den beste helburuetarako. Zigor bateko edukia biltzea nahi nuke, CSS-rekin erabiltzeko "kako" bat emateko. Agian semantikan oinarritutako edukien atal ezberdina izan daiteke, baina nire orrialdean nahi dudan diseinua lortzeko agindu dudan zerbait da.
Semantikari buruzko guztia
Hau kontzeptu gogorra da ulertzeko, baina DIV elementuaren eta SECTION elementuaren arteko aldea bakarra semantika da. Bestela esanda, zatitzen ari zaren kodearen atalaren esanahia da.
DIV elementu batean jasotako edukiak ez du inolako esanahirik. Hobe da horrelakoetan erabiltzea:
- CSS estilo eta kako CSS estiloetarako
- Layout edukiontziak
- JavaScript hooks
- HTML-ren banaketak errazago irakur dezaten
DIV elementua elementu bakarra izan zen ametseak gehitzeko gure dokumentuen estiloa izateko eta zutabeak eta fancy diseinuak sortzeko. Horregatik, DIV elementuekin estekatutako HTMLa amaitu genuen. Webguneen diseinatzaileek "divitis" deitu dezakete. DIV elementua soilik erabiltzen duten WYSIWYG editoreak ere badaude. Benetan DIV elementua erabiltzen duen HTMLan exekutatzen dut ordez paragrafoen ordez!
HTML5-rekin, elementu sekuentzialak erabiltzen hasiko gara dokumentu semantiko deskriptiboagoak sortzeko (nabigazioa erabiliz eta zifra deskriptiboak eta abar) eta elementu horien estiloak ere definituko ditugu.
SPAN elementuari buruz zer?
DIV elementuari buruz pentsatzen duten jendeak elementu nagusia den beste elementua da. DIV bezalako elementu hau ez da elementu semantikoa. Inguruko elementu bat da, esteken eta eskuliburuen gaineko kantuak osatzeko erabil ditzakezun edukietan (normalean testua). Zentzu horretan, DIV elementua bezalakoa da, bloke-elementu bat baino baizik. Nolabait ere, errazagoa izango litzateke DIV bloke-maila SPAN elementu gisa pentsatzea eta SPANetan HTML edukien bloke osoetarako soilik erabiltzea.
Ez dago alderatuz inline sekzio elementu HTML5-an.
Internet Explorerren bertsio zaharragoetarako
Nahiz eta IE (zaharragoa den IE 8 eta txikiagoa) bertsio zaharragoak onartzen ez badituzu, HTML5-k modu fidagarrian aitortzen ez baduzu, beldurra HTML etiketa semantikoki zuzena erabiltzeko beldur zara. Semantikek zu eta zure taldeak etorkizunean orriaren kudeaketan lagunduko dizute (artikulu hori artikulua baldin bada artikuluaren elementuarekin inguratuta baldin badakizu). Gainera, etiketa horiek onartzen dituzten arakatzaileak hobeto onartzen ditu.
Aplikazio semantikoetako HTML5 elementuekin ere erabil dezakezu Internet Explorer-ekin, scriptinga eta, beharbada, inguruko DIV elementu batzuk gehitu behar dituzu etiketa HTML gisa aitortu ahal izateko.
DIV eta SECTION Elements erabiliz
Behar bezala erabiltzen ari bazara, DIV eta SECTION elementuak ere erabil ditzakezu HTML5 dokumentu baliogabe batean. Artikulu honetan ikusten duzun bezala, SECTION elementua erabiltzen duzu edukiaren zati semantikoak bereiztuz, eta DIV elementua erabiltzen duzu CSS eta JavaScript bezalako amoniak, baita esanahi semantikoa ez duen diseinua definitzen ere.
Jennifer Krynin-en jatorrizko artikulua. Jeremy Girard-ek argitaratua 17/15/17