Kompreni la HTML5-Sekcion Elemento
Kiam HTML5 blovas en la scenon antaŭ kelkaj jaroj, ĝi aldonis multajn novajn elementojn al la langogo, inkluzive de la elemento de SECTION. La plej multaj el la novaj elementoj, kiujn HTML5 enkondukas, havas klarajn uzojn. Ekzemple, la elemento estas uzata por difini artikolojn kaj ĉefajn partojn de retpaĝaro, la elemento estas uzita por difini rilatajn enhavojn, kiuj ne estas kritikaj al la resto de la paĝo, kaj kaplinio, nav, kaj piedlinio estas sufiĉe memkompreneblaj. La ĵus aldonita SECTION-elemento, tamen, estas iom malpli klara.
Multaj homoj kredas, ke la HTML-elementoj SECTION kaj estas vere nur la samaj aĵoj-genéraj ujoj kiuj kutimas enhavi enhavon en retpaĝaro. La realaĵo, tamen, estas, ke ĉi tiuj du elementoj, dum ambaŭ estas konteneraj elementoj, estas io ajn sed genéraj. Ekzistas specifaj kialoj uzi ambaŭ la SECTION-elementon kaj la DIV-elementon - kaj ĉi tiu artikolo klarigos tiujn diferencojn.
Sekcioj kaj Divoj
La SECTION-elemento estas difinita kiel semantika sekcio de retpaĝaro aŭ retejo, kiu ne estas alia pli specifa tipo (kiel artikolo aŭ aparte). Mi emas uzi ĉi tiun elementon kiam mi markas supre apartan sekcion de la paĝo - sekcio, kiu povus povrandigi kaj uzi aliajn paĝojn aŭ partojn de la retejo. Ĝi estas klara peco de enhavo, aŭ "sekcio" de enhavo, se vi volas.
Kontraŭe, vi uzas la DIV-elementon por partoj de la paĝo, kiun vi volas dividi, sed por celoj krom semantiko . Mi envolvus areon de enhavo en divido, se mi faros tiel simple doni al mi "engankon" por uzi kun CSS. Eble ne estas aparta sekcio de enhavo bazita sur semantiko, sed estas io, kion mi diktas por atingi la aranĝon, kiun mi volas por mia paĝo.
Ĝi estas ĉio pri semantiko
Ĉi tio estas malfacila koncepto por kompreni, sed la sola diferenco inter la DIV-elemento kaj la SECTION-elemento estas semantika. Alivorte, ĝi signifas la sekcion de kodo, kiun vi dividas.
Ajna enhavo, kiu estas enhavita ene de DIV-elemento, ne havas neniun propran signifon. Ĝi estas plej bone uzita por aferoj kiel:
- CSS stiloj kaj hokoj por CSS stiloj
- Aranĝaj konteneroj
- Javaskaj hokoj
- Dividoj por la HTML por faciligi ĝin legi
La DIV-elemento kutimis esti la sola elemento, kiun ni havis por aldoni hokojn por stiligi niajn dokumentojn kaj krei kolumnojn kaj fajnajn aranĝojn. Pro tio ni finas kun HTML, kiu estis disvastigita per DIV-elementoj - kiaj eble TTT-projektistoj nomas "divitis". Eĉ estis WYSIWYG-redaktistoj, kiuj uzis la DIV-elementon ekskluzive. Mi efektive kuras trans HTML, kiu uzas la DIV-elementon anstataŭ por alineoj!
Kun HTML5, ni povas komenci uzi sekciajn elementojn por krei pli semajn priskribajn dokumentojn (uzanta por navigado kaj por priskribaj figuroj ktp) kaj ankaŭ difini la stilojn sur tiuj elementoj.
Kio Pri la SPAN Elemento?
La alia elemento, kiun multaj homoj pensas pri kiam ili pensas pri la DIV-elemento, estas la elemento. Ĉi tiu elemento, kiel DIV, ne estas semantika elemento. Ĝi estas enreta elemento, kiun vi povas uzi por aldoni hokojn por stiloj kaj skriptoj ĉirkaŭ inline blokoj de enhavo (kutime teksto). En tiu (senso, senco) ĝi estas ĝuste kiel la DIV-elemento, nur enlinta prefere ol bloko elemento . En iuj manieroj, ĝi povus esti pli facile pensi pri la DIV kiel bloko-nivelo SPAN-elemento kaj uzi ĝin saman kiel vi SPANos nur por kompletaj blokoj de HTML-enhavo.
Ne ekzistas komparebla enreta sekcia elemento en HTML5.
Por Pli malnovaj Versioj de Interreto Esploristo
Eĉ se vi apogas draste pli malnovajn versiojn de IE (kiel IE 8 kaj pli malaltaj), kiuj ne rekte rekonas HTML5, vi ne timu uzi etikedajn HTML-etikedojn semantike. La semantiko helpos vin kaj via teamo administri la paĝon en la estonteco (ĉar vi scios, ke tiu sekcio estas la artikolo, se ĝi estas ĉirkaŭita de la elemento de ARTIKO). Plus, retumiloj, kiuj rekonas tiujn etikedojn, subtenos ilin pli bone.
Vi ankoraŭ povas uzi HTML5-semajnajn sekciajn elementojn kun Interreta Esploristo, vi nur bezonas aldoni skripton kaj eble kelkajn ĉirkaŭajn DIV-elementojn por ke ili rekoni la etikedojn kiel HTML.
Uzante DIV kaj SECTION Elementojn
Se vi uzas ilin ĝuste, vi povas uzi ambaŭ DIV kaj SECTION-elementojn kune en valida HTML5-dokumento. Kiel vi vidis ĉi tie en ĉi tiu artikolo, vi uzas la SECTION-elementon por difini duonajn diskretajn partojn de la enhavo, kaj vi uzas la DIV-elementon kiel hokojn por CSS kaj Javascript, kaj ankaŭ difinas aranĝon, kiu ne havas signifon semantikajn.
Originala artikolo de Jennifer Krynin. Redaktita de Jeremy Girard la 3/15/17