Pag-unawa sa HTML5 SECTION Element
Kapag ang HTML5 ay lumabas sa pinangyarihan ng ilang taon na ang nakalipas, nagdagdag ito ng isang grupo ng mga bagong elemento ng seksyon sa langauge, kabilang ang SECTION element. Karamihan sa mga bagong elemento na ipinakilala ng HTML5 ay may malinaw na paggamit. Halimbawa, ang elemento ay ginagamit upang tukuyin ang mga artikulo at mga pangunahing bahagi ng isang web page, ang elemento ay ginagamit upang tukuyin ang kaugnay na nilalaman na hindi kritikal sa natitirang bahagi ng pahina, at header, nav, at footer ay medyo maliwanag. Ang bagong idinagdag na SEKSIYON elemento, gayunpaman, ay medyo mas malinaw.
Maraming tao ang naniniwala na ang mga elemento ng HTML SEKSYON at talagang ang parehong bagay-generic na elemento ng lalagyan na ginagamit upang maglaman ng nilalaman sa isang web page. Ang katotohanan, gayunpaman, ay ang dalawang elementong ito, samantalang ang parehong mga elemento ng lalagyan, ay anumang bagay ngunit pangkaraniwan. Mayroong tiyak na mga dahilan upang gamitin ang parehong elemento ng SEKSI at ang elemento ng DIV - at ipapaliwanag ng artikulong ito ang mga pagkakaiba.
Seksyon at Divs
Ang SEKSIYON ng elemento ay tinukoy bilang seksyon ng isang semantiko ng isang web page o site na hindi isa pang partikular na uri (tulad ng artikulo o bukod). May posibilidad kong gamitin ang sangkap na ito kapag ako ay nagmamarka ng isang natatanging bahagi ng pahina - isang seksyon na maaaring pakyawan ay inilipat at ginagamit sa iba pang mga pahina o bahagi ng site. Ito ay isang natatanging piraso ng nilalaman, o isang "seksyon" ng nilalaman, kung gagawin mo.
Sa kaibahan, ginagamit mo ang elemento ng DIV para sa mga bahagi ng pahina na nais mong hatiin, ngunit para sa mga layunin maliban sa semantika . I-wrap ko ang isang lugar ng nilalaman sa isang dibisyon kung ginagawa ko ito nang puro upang bigyan ang sarili ko ng "hook" upang gamitin sa CSS. Maaaring hindi ito isang natatanging seksyon ng nilalaman batay sa mga semantiko, ngunit isang bagay na idinidikta ko upang makamit ang layout na gusto ko para sa aking pahina.
Lahat ng Tungkol sa Mga Semantiko
Ito ay isang mahirap na konsepto upang maunawaan, ngunit ang pagkakaiba lamang sa pagitan ng elemento ng DIV at elemento ng SECTION ay mga semantiko. Sa ibang salita, ito ang kahulugan ng seksyon ng code na hinati mo.
Ang anumang nilalaman na nilalaman sa loob ng elemento ng DIV ay walang anumang likas na kahulugan. Ito ay pinakamahusay na ginagamit para sa mga bagay tulad ng:
- Mga estilo ng CSS at mga kawit para sa mga estilo ng CSS
- Mga lalagyan ng layout
- Hooks ng JavaScript
- Ang mga dibisyon para sa HTML upang gawing mas madaling basahin
Ang elemento ng DIV na ginamit upang maging ang tanging sangkap na mayroon kami para sa pagdaragdag ng mga kawit upang estilo ang aming mga dokumento at lumikha ng mga haligi at magarbong mga layout. Dahil dito, natapos na namin ang HTML na puno ng mga elemento ng DIV-kung ano ang maaaring tawagin ng mga taga-disenyo ng web na "divitis." Mayroong kahit WYSIWYG editor na ginamit ang eksklusibong elemento ng DIV. Talagang tumatakbo ako sa HTML na gumagamit ng elemento ng DIV sa halip na para sa mga talata!
Sa HTML5, maaari naming simulan ang paggamit ng mga elemento ng seksyon upang lumikha ng mas maraming mga mapaglarawan na mga dokumento (ginagamit para sa pag-navigate at para sa mapaglarawang mga numero at iba pa) at tukuyin din ang mga estilo sa mga sangkap na iyon.
Ano ang Tungkol sa Sangkap ng Span?
Ang iba pang elemento na iniisip ng karamihan sa mga tao kapag iniisip nila ang elementong DIV ay ang elemento. Ang elementong ito, tulad ng DIV, ay hindi isang sangkap na semantiko. Ito ay isang inline na elemento na magagamit mo upang magdagdag ng mga kawit para sa mga estilo at mga script sa paligid ng mga bloke ng inline ng nilalaman (karaniwang teksto). Sa ganitong diwa ito ay eksakto tulad ng elemento ng DIV, inline lamang sa halip na isang bloke elemento . Sa ilang mga paraan, maaaring mas madaling mag-isip ng DIV bilang elemento ng block-level na SPAN at gagamitin ito sa parehong paraan na gagawin mo lamang ang SPAN para sa buong mga bloke ng nilalaman ng HTML.
Walang maihahambing na elemento ng inline na inline sa HTML5.
Para sa Mga Matandang Bersyon ng Internet Explorer
Kahit na sumusuporta ka ng mas matatandang bersyon ng IE (tulad ng IE 8 at mas mababa) na hindi mapagkakatiwalaan kilalanin ang HTML5, hindi ka dapat matatakot na gamitin nang husto ang mga tag na HTML. Ang semantika ay tutulong sa iyo at sa iyong koponan na pamahalaan ang pahina sa hinaharap (dahil malalaman mo na ang bahaging iyon ay ang artikulo kung ito ay napapalibutan ng elementong ARTICLE). Plus, ang mga browser na makilala ang mga tag na iyon ay tutulong sa kanila na mas mahusay.
Maaari mo pa ring gamitin ang mga elemento ng seksyon ng HTML5 semantiko sa Internet Explorer, kailangan mo lang magdagdag ng pag-script at posibleng ilang nakapaligid na elemento ng DIV upang makilala sila ng mga tag bilang HTML.
Paggamit ng DIV at SECTION Elements
Kung tama ang gamit mo ang mga ito, maaari mong gamitin ang parehong mga elemento ng DIV at SECTION nang magkasama sa wastong dokumentong HTML5. Tulad ng iyong nakita dito sa artikulong ito, gagamitin mo ang SECTION element upang tukuyin ang mga semantically discrete na mga bahagi ng nilalaman, at ginagamit mo ang elementong DIV bilang mga kawit para sa CSS at JavaScript pati na rin ang pagtukoy ng layout na walang semantiko na kahulugan.
Orihinal na artikulo ni Jennifer Krynin. Na-edit ni Jeremy Girard noong 3/15/17