HTML5 SECTION elementa izpratne
Ja pirms vairākiem gadiem HTML5 parādījās uz skatuves, tas pievienoja langauge jauniem sadaļas elementiem, tostarp SECTION elementu. Lielākā daļa no jaunajiem HTML5 ieviešanas elementiem ir skaidri izmantojami. Piemēram, elementu izmanto, lai definētu mājas lapas rakstus un galvenās daļas, elementu izmanto, lai definētu saistītu saturu, kas nav būtiski pārējai lapai, un galvenes, nav un kājenes ir diezgan pašsaprotami. Tomēr jaunizveidotais SECTION elements ir mazliet skaidrāks.
Daudzi cilvēki uzskata, ka HTML elementu SECTION un patiesībā ir vieni un tie paši - vispārēji konteineru elementi, kas satur saturu tīmekļa vietnē. Tomēr realitāte ir tā, ka šie divi elementi, lai gan abi ir konteineru elementi, ir nekas cits kā vispārējs. Ir īpaši iemesli, lai izmantotu gan SECTION elementu, gan DIV elementu - un šis raksts izskaidros šīs atšķirības.
Sekcijas un divi
SECTION elements ir definēts kā tīmekļa lapas vai vietnes semantisks sadaļa, kas nav vēl viens konkrētāks veids (piemēram, raksts vai malā). Es mēdzu izmantot šo elementu, kad es atzīmēju atsevišķu lapas sadaļu - sadaļu, kuru vairumtirdzniecībā varētu pārvietot un izmantot citās vietnes vai vietņu daļās. Tas ir atsevišķs satura gabals vai satura "sadaļa", ja vēlaties.
Turpretim jūs izmantojat DIV elementu daļām lapā, kuru vēlaties sadalīt, bet citiem nolūkiem, nevis semantikas . Es aplaupītu satura apgabalu sadalījumā, ja es to darīšu tikai, lai sniegtu sev "āķi", ko izmantot ar CSS. Tas var nebūt atšķirīgs saturs, kas balstās uz semantiku, bet tas ir kaut kas, ko es domāju, lai sasniegtu izkārtojumu, ko es gribu savai lapai.
Tas ir viss par semantiku
Tas ir grūti saprotams jēdziens, bet vienīgā atšķirība starp DIV elementu un SECTION elementu ir semantika. Citiem vārdiem sakot, tas ir sadalītā koda sadaļas nozīme .
Visam saturam, kas atrodas DIV elementā, nav nekādas iezīmes. To vislabāk izmanto tādām lietām kā:
- CSS stili un āķi CSS stili
- Izkārtojuma konteineri
- JavaScript āķi
- HTML nodaļas, lai būtu vieglāk lasīt
DIV elements bija vienīgais elements, ko mums vajadzēja, lai pievienotu āķus, lai veidotu mūsu dokumentus un izveidotu kolonnas un izteiksmīgus izkārtojumus. Tā rezultātā mēs nonācām pie HTML, kas tika apdullināts ar DIV elementiem - ko web dizaineri dēvē par "divīti". Tika izveidoti pat WYSIWYG redaktori, kuri izmantoja tikai DIV elementu. Es patiešām esmu pārlūkojis HTML, kas izmanto DIV elementu, nevis punktus!
Izmantojot HTML5, mēs varam sākt izmantot sadaļas elementus, lai izveidotu vairāk semantisku aprakstošu dokumentu (izmantojot navigāciju un aprakstošus skaitļus utt.), Kā arī definē šos elementus.
Kas par SPAN elementu?
Otrais elements, ko lielākā daļa cilvēku domā, domājot par DIV elementu, ir elements. Šis elements, piemēram, DIV, nav semantisks elements. Tas ir vienkāršs elements, ko varat izmantot, lai pievienotu āķus stili un skriptus ap satura blokiem (parasti tekstu). Šajā nozīmē tas ir tieši tāpat kā DIV elements, tikai inline, nevis bloķēšanas elements . Atsevišķos veidos var būt vieglāk domāt par DIV kā bloķēšanas līmeņa SPAN elementu un to izmantot tādā pašā veidā, kā jūs varētu izmantot SPAN tikai visam HTML satura blokam.
HTML5 formātā nav salīdzināms iekšējais šķirošanas elements.
Internet Explorer vecākām versijām
Pat ja jūs atbalstāt dramatiski vecākas IE versijas (piemēram, IE 8 un zemākas), kas neatpazīst HTML5, nevajadzētu baidīties izmantot semantiski pareizi HTML tagus. Semantika palīdzēs jums un jūsu komanda pārvaldīt lapu nākotnē (jo jūs zināt, ka šī sadaļa ir raksts, ja to ieskauj elements ARTICLE). Turklāt pārlūkprogrammas, kas atzīst šos tagus, tos labāk atbalstīs.
Jūs joprojām varat izmantot HTML5 semantiskās sadaļas elementus ar Internet Explorer, jums vienkārši jāpievieno skripti un, iespējams, daži apkārtējie DIV elementi, lai tos atzītu par HTML kā HTML.
DIV un SECTION elementu izmantošana
Ja jūs tos pareizi lietojat, jūs varat izmantot gan DIV, gan SECTION elementus kopā derīgā HTML5 dokumentā. Kā jūs redzējāt šeit šajā rakstā, jūs izmantojat SECTION elementu, lai definētu semantiski diskrētas satura daļas, un jūs izmantojat DIV elementu kā CSS un JavaScript āķus, kā arī definējat izkārtojumu, kuram nav semantiskas nozīmes.
Jennifera Krīnina oriģinālais raksts. Rediģējis Jeremijs Girards no 3/15/17