Înțelegerea elementului HTML5 SECTION
Când HTML5 apare pe scenă acum câțiva ani, a adăugat o mulțime de elemente noi de secționare la langauge, inclusiv elementul SECTION. Cele mai multe dintre elementele noi introduse de HTML5 au utilizări clare. De exemplu, elementul este folosit pentru a defini articolele și părțile principale ale unei pagini web, elementul este utilizat pentru a defini conținuturi conexe care nu sunt critice pentru restul paginii, iar antetul, navul și subsolul sunt destul de explicative. Elementul SECTION nou adăugat, cu toate acestea, este puțin mai clar.
Mulți oameni cred că elementele SECTION HTML și sunt într-adevăr același lucru - elementele de container generice folosite pentru a conține conținut pe o pagină web. Realitatea este însă că aceste două elemente, în timp ce ambele sunt elemente de container, nu sunt decât generice. Există motive specifice pentru utilizarea atât a elementului SECTION, cât și a elementului DIV - și acest articol va explica aceste diferențe.
Secțiuni și Div
Elementul SECTION este definit ca o secțiune semantică a unei pagini web sau a unui site care nu este alt tip mai specific (cum ar fi articolul sau deoparte). Tind să folosesc acest element atunci când marchez o secțiune distinctă a paginii - o secțiune care ar putea fi mutată și utilizată pe alte pagini sau părți ale site-ului. Este o bucată distinctă de conținut sau o "secțiune" de conținut, dacă doriți.
În schimb, utilizați elementul DIV pentru părțile paginii pe care doriți să le divizați, dar în alte scopuri decât semantica . Aș înfășura o zonă de conținut într-o diviziune dacă fac acest lucru pur și simplu pentru a-mi da un "cârlig" pe care să îl folosesc cu CSS. Este posibil să nu fie o secțiune distinctă a conținutului bazat pe semantică, dar este ceva ce dictează pentru a obține aspectul pe care îl vreau pentru pagina mea.
Este totul despre semantică
Acesta este un concept greu de înțeles, dar singura diferență dintre elementul DIV și elementul SECTION este semantica. Cu alte cuvinte, este sensul secțiunii de cod pe care o divizați.
Orice conținut conținut în interiorul unui element DIV nu are niciun înțeles inerent. Este cel mai bine folosit pentru lucruri precum:
- Stiluri CSS și cârlige pentru stilurile CSS
- Amplasarea containerelor
- Cârlige JavaScript
- Diviziuni pentru HTML pentru a face mai ușor de citit
Elementul DIV a fost singurul element pe care l-am avut pentru adăugarea de cârlige pentru a ne modela documentele și a crea coloane și machete fanteziste. Din acest motiv, am ajuns cu HTML care era plin de elemente DIV - ceea ce ar putea numi designerii web "divita". Au existat chiar și editori WYSIWYG care foloseau exclusiv elementul DIV. De fapt am rulat peste HTML care utilizează elementul DIV în loc de paragrafe!
Cu HTML5, putem începe să folosim elemente de secționare pentru a crea mai multe documente semantic descriptive (folosind pentru navigație și pentru figuri descriptive și așa mai departe) și, de asemenea, să definim stilurile acestor elemente.
Despre elementul SPAN?
Celălalt element despre care se gândesc majoritatea oamenilor atunci când se gândesc la elementul DIV este elementul. Acest element, ca DIV, nu este un element semantic. Este un element inline pe care îl puteți utiliza pentru a adăuga cârlige pentru stiluri și scripturi în jurul blocurilor de conținut inline (de obicei text). În acest sens este exact ca elementul DIV, doar în linie, mai degrabă decât un element bloc . În unele moduri, ar putea fi mai ușor să vă gândiți la DIV ca element SPAN la nivel de bloc și să îl utilizați în același mod în care ați folosi SPAN numai pentru blocurile întregi de conținut HTML.
Nu există niciun element comparabil în secțiune în HTML5.
Pentru versiunile mai vechi ale Internet Explorer
Chiar dacă susțineți dramatic versiuni mai vechi ale IE (cum ar fi IE 8 și versiuni inferioare) care nu recunosc în mod credibil HTML5, nu trebuie să vă fie frică să utilizați etichete HTML corecte semantic. Semantica vă va ajuta pe dvs. și echipa dvs. să gestionați pagina în viitor (deoarece veți ști că acea secțiune este articolul dacă este înconjurat de elementul ARTICOL). În plus, browserele care recunosc aceste etichete le vor sprijini mai bine.
Încă puteți utiliza elemente de separare semantică HTML5 cu Internet Explorer, trebuie doar să adăugați scripting și, eventual, câteva elemente DIV înconjurătoare, pentru a le face să recunoască etichetele ca HTML.
Utilizând Elementele DIV și SECTION
Dacă le utilizați în mod corect, puteți utiliza împreună atât elemente DIV, cât și SECTION într-un document HTML5 valid. Așa cum ați văzut aici în acest articol, utilizați elementul SECTION pentru a defini porțiunile discrete semantic ale conținutului și utilizați elementul DIV drept cârlige pentru CSS și JavaScript, precum și definirea unui aspect care nu are semnificație semantică.
Articolul original de Jennifer Krynin. Editat de Jeremy Girard pe 3/15/17