Atunci când HTML5 apare pe scenă acum câțiva ani, a adăugat o mulțime de elemente noi de secționare la langauge, inclusivSECȚIUNE element. 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. Nou adăugatSECȚIUNE element, cu toate acestea, este un pic mai puțin clar.
Mulți oameni cred că elementele HTML SECȚIUNE ș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 a utiliza atât SECȚIUNE element și DIV element - și acest articol va explica aceste diferențe.
Secțiuni și Div
SECȚIUNE elementul 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 DIV element pentru părți din pagină pe care doriți să le împărțiț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 vorba despre Semantică
Acesta este un concept greu de înțeles, dar singura diferență dintre DIV element și SECȚIUNE element este semantica. Cu alte cuvinte, este sens a secțiunii de cod pe care o divizați.
Orice conținut conținut în interiorul unui a DIV elementul 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
DIV elementul folosit pentru a fi 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 a fost plin cu DIV elemente - ce pot numi designerii web "divita". Au existat chiar și editori WYSIWYG care au folosit DIV element exclusiv. De fapt am rulat peste HTML care utilizează DIV element î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 pe care majoritatea oamenilor îl gândesc atunci când se gândesc la DIV element este elementul. Acest element, cum ar fi 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 DIV element, numai în linie, mai degrabă decât un element bloc. În unele privințe, ar fi mai ușor să ne gândim la DIV ca nivel de bloc SPAN element și utilizați-l în același mod în care ați face-o 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ținem 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 pe echipa dvs. să gestionați pagina în viitor (deoarece veți ști că acea secțiune este articolul dacă este înconjurat de ARTICOL element). În plus, browserele care recunosc aceste etichete le vor sprijini mai bine.
Încă puteți utiliza elemente de secționare semantică HTML5 cu Internet Explorer, trebuie doar să adăugați scripting și, eventual, câteva elemente înconjurătoare DIV elemente pentru a le face să recunoască etichetele ca HTML.
Utilizând Elementele DIV și SECTION
Dacă le folosiți în mod corect, puteți utiliza ambele DIV și SECȚIUNE elemente împreună într-un document valid HTML5. După cum ați văzut aici în acest articol, utilizați SECȚIUNE element pentru a defini porțiuni discrete semantic ale conținutului și utilizați DIV element ca cârlige pentru CSS și JavaScript, precum și definirea aspectului care nu are o semnificație semantică.
Articolul original de Jennifer Krynin. Editat de Jeremy Girard pe 3/15/17
