Element SECTION on määratletud kui veebilehe või saidi semantiline sektsioon, mis pole muu spetsiifilisem tüüp, näiteks ARTICLE või ASIDE. Disainerid kasutavad seda elementi sageli lehe eraldiseisva osa märkimisel - tervet jaotist, mida saab teisaldada ja kasutada muudel lehtedel või saidi osades. See on selge sisu.
Seevastu element DIV sobib lehe osade jaoks, mille soovite jagada muul otstarbel kui semantika. Näiteks võite mõne sisu mähkida DIV-i, et see oleks CSS-iga stiiliga seotud. See ei pruugi olla semantiliselt selge sisulõik, kuid see on eraldatud nii, et saaksite saavutada soovitud paigutuse või tunde.
Kõik on seotud semantikaga
Ainus erinevus DIV- ja SECTION-elementide vahel on semantika - see tähendus jagatavast sisust.
DIV-elemendis sisalduval sisul pole sisulist tähendust. Seda on kõige parem kasutada näiteks:
- CSS-i stiilid ja konksud CSS-stiilide jaoks
- Paigutusmahutid
- JavaScripti konksud
- Jaotused, mis muudavad sisu või HTML-i hõlpsamini loetavaks
DIV-i element oli varem ainus saadaval olev dokument dokumentide ja küljendite konksude lisamiseks. Enne HTML5 oli tüüpiline veebileht täis DIV-i elemente. Tegelikult kasutasid mõned WYSIWYG-i toimetajad ainult DIV-i elementi, mõnikord lõigete asemel.
HTML5 tutvustas jaotuselemente, mis lõid semantiliselt kirjeldavamaid dokumente ja aitasid nende elementide stiile määratleda.
Aga SPAN-element?
Teine levinud mittemantiline element on SPAN. Seda kasutatakse järjekorras sisu (tavaliselt teksti) ümber olevate stiilide ja skriptide konksude lisamiseks. Selles mõttes on see täpselt nagu DIV, kuid pole a ploki element. Mõelge DIV-st kui plokitaseme SPAN-ist ja kasutage seda samamoodi, kuid tervete HTML-sisu plokkide jaoks.
HTML-il pole võrreldavat inline jaotamise elementi.
Internet Exploreri vanemate versioonide jaoks
Isegi kui toetate Microsofti Internet Exploreri dramaatiliselt vanemaid versioone, mis ei tunnusta HTML5 usaldusväärselt, peaksite kasutama semantiliselt õigeid HTML-silte. Semantika aitab teil ja teie meeskonnal edaspidi lehte hallata. Internet Exploreri uusimad versioonid ja ka selle asendus Microsoft Edge tunnevad ära HTML5.
DIV- ja SECTION-elementide kasutamine
Määratlemiseks võite kasutada nii DIV- kui ka SECTION-elemente kehtivas HTML5-dokumendis - SECTION semantiliselt diskreetsed sisu osad ja DIV, et määratleda konksud CSS-i, JavaScripti ja paigutuse jaoks eesmärkidel.
Jennifer Krynini originaalartikkel. Toimetanud Jeremy Girard 15.03.17.