Pochopenie elementu HTML5 SECTION
Keď sa HTML5 dostal na scénu pred niekoľkými rokmi, pridal do langauge veľa nových prvkov na rezanie, vrátane prvku SECTION. Väčšina nových prvkov, ktoré prináša HTML5, má jasné použitie. Napríklad prvok sa používa na definovanie článkov a hlavných častí webovej stránky, prvok sa používa na definovanie súvisiaceho obsahu, ktorý nie je rozhodujúci pre zvyšok stránky, a hlavička, nav a päta sú dosť jasné. Novo pridané prvok SECTION je však o niečo menej jasný.
Mnoho ľudí verí, že prvky HTML SECTION a sú naozaj rovnaké veci - generické kontajnerové prvky, ktoré obsahujú obsah na webovej stránke. Realita však spočíva v tom, že tieto dva prvky, zatiaľ čo oba sú kontajnerové prvky, sú nie len všeobecné. Existujú špecifické dôvody na použitie prvku SECTION a elementu DIV - a tento článok vysvetlí tieto rozdiely.
Sekcie a Divs
Prvok SECTION je definovaný ako sémantická časť webovej stránky alebo webovej stránky, ktorá nie je iný konkrétnejší typ (ako napríklad článok alebo stranou). Mám tendenciu používať tento prvok, keď označím samostatnú časť stránky - časť, ktorá by sa mohla veľkoobjemne presúvať a používať na iných stránkach alebo častiach stránky. Jedná sa o samostatný obsah alebo "časť" obsahu, ak chcete.
Na rozdiel od toho používate prvok DIV pre časti stránky, ktoré chcete rozdeliť, ale pre iné účely, ako je sémantika . Bol by som zabaliť oblasť obsahu v divízii, ak to robím len čisto, aby som sám "hák" používať s CSS. Nemusí to byť výrazná časť obsahu založená na sémantike, ale je to niečo, čo diktujem, aby som dosiahla rozloženie, ktoré chcem pre svoju stránku.
Všetko o sémantike
Toto je ťažké pochopiť, ale jediný rozdiel medzi prvkom DIV a prvkom SECTION je sémantika. Inými slovami, je to význam časti kódu, ktorú rozdeľujete.
Akýkoľvek obsah, ktorý je obsiahnutý v prvku DIV, nemá žiadny inherentný význam. Najlepšie sa používa pre veci ako:
- CSS štýly a háčiky pre štýly CSS
- Rozmiestnenie kontajnerov
- JavaScript háčiky
- Divízie pre HTML, aby bolo ľahšie čítať
Prvok DIV bol jediným prvkom, ktorý sme použili na pridávanie háčikov na štýl našich dokumentov a vytváranie stĺpcov a fantazijných rozvrhnutí. Z tohto dôvodu sme skončili s HTML, ktorý bol preplnený prvkami DIV - čo môžu web dizajnéri nazývať "divitída". Boli tu dokonca aj vydavatelia WYSIWYG, ktorí používali prvok DIV výhradne. V skutočnosti som spustil kód HTML, ktorý používa prvok DIV namiesto odsekov!
Pomocou kódu HTML5 môžeme začať používať prvky na rozdelenie, aby sme vytvorili viac sémanticky opisných dokumentov (pomocou navigácie a popisných čísel atď.) A tiež definovať štýly na týchto prvkoch.
Čo s prvkom SPAN?
Ďalším prvkom, o ktorom si väčšina ľudí myslí, keď premýšľajú o prvku DIV, je prvok. Tento prvok, podobne ako DIV, nie je sémantický prvok. Je to inline element, ktorý môžete použiť na pridanie hákov pre štýly a skripty okolo vložených blokov obsahu (zvyčajne text). V tomto zmysle je to presne ako prvok DIV, ale len inline ako blokový prvok . V niektorých ohľadoch by mohlo byť jednoduchšie premýšľať o DIV ako prvok SPAN na úrovni bloku a použiť ho rovnakým spôsobom ako SPAN len pre celé bloky obsahu HTML.
V HTML5 neexistuje porovnateľný inline prvok pre delenie.
Pre staršie verzie programu Internet Explorer
Aj keď podporujete dramaticky staršie verzie IE (ako IE 8 a nižšie), ktoré spoľahlivo nerozpoznávajú HTML5, nemali by ste mať strach používať sémanticky správne HTML značky. Sémantika pomôže vám a vášmu tímu spravovať stránku v budúcnosti (pretože viete, že táto časť je článok, ak je obklopený prvkom ČLÁNKOM). Okrem toho prehliadače, ktoré tieto značky rozpoznávajú, ich budú lepšie podporovať.
Stále môžete použiť prvky sémantického rozdelenia HTML5 s programom Internet Explorer, stačí pridať skriptovanie a možno aj niekoľko elementov DIV, ktoré im umožnia rozpoznať značky ako HTML.
Používanie prvkov DIV a SECTION
Ak ich používate správne, môžete používať prvky DIV aj SECTION v platnom dokumente HTML5. Ako ste videli v tomto článku, používate prvok SECTION na definovanie sémanticky diskrétnych častí obsahu a používate prvok DIV ako háčiky pre CSS a JavaScript, rovnako ako definovanie rozloženia, ktoré nemá sémantický význam.
Originálny článok od Jennifer Krynin. Upravený Jeremy Girard dňa 15.3.17