A HTML5 SECTION elem megértése
Amikor a HTML5 több éve jelenik meg a helyszínen, hozzáadott egy csomó új szelvényelemet a langauge-hoz, beleértve a SECTION elemet is. A HTML5 új elemeinek többsége egyértelműen használható. Például az elem a cikkek és a weblap főbb részeinek meghatározására szolgál, az elemet olyan kapcsolódó tartalom meghatározására használják, amely nem kritikus az oldal többi részén, és a fejléc, a navigáció és a lábléc eléggé magától értetődő. Az újonnan hozzáadott SECTION elem azonban egy kicsit kevésbé világos.
Sokan úgy vélik, hogy a HTML elemek SZEKCIÓ, és valójában csak ugyanaz a dolog - általános tartályelemek használt tartalmak tartalma egy weboldalon. A valóság azonban az, hogy ez a két elem, bár mindkettő tartályelem, mindentől kezdve általános. Különös oka van annak, hogy mind a SECTION elemet, mind pedig a DIV elemet használjuk - és ez a cikk megmagyarázza ezeket a különbségeket.
Szekciók és Divs
A SECTION elem egy olyan weboldal vagy webhely szemantikai részeként definiálható, amely nem egy másik konkrétabb típus (például cikk vagy félretétel). Ezt az elemet hajlamosak használni, amikor megjelentem egy külön szakaszot az oldalról - egy olyan szakaszt, amely a nagykereskedelmet áthelyezheti és felhasználhatja a webhely más oldalain vagy részein. Ez egy külön tartalom, vagy egy "szakasz" a tartalom, ha igen.
Ezzel ellentétben a DIV elemet használhatja az oldal azon részei számára, amelyeket fel kíván osztani, de a szemantika kivételével. Én egy olyan területet szeretnék eltakarni egy részlegben, ha pusztán úgy teszek, hogy magamnak egy "horogot" használok a CSS-hez. Lehet, hogy nem egy külön szakasz a tartalom szemantikán alapul, de valamit diktálok annak érdekében, hogy elérjem az általam kívánt elrendezést.
Mindent a szimmetriáról
Ez egy kemény koncepció a megértéshez, de az egyetlen különbség a DIV elem és a SECTION elem között a szemantika. Más szóval, ez az a rész, amelyik kódját osztja fel.
A DIV elem belsejében található bármely tartalomnak nincs benne semmi értelme. Leginkább olyan dolgokra használják, mint:
- CSS stílusok és kampók a CSS stílusokhoz
- Elrendezési konténerek
- JavaScript kampók
- A HTML-ben lévő megosztások megkönnyítik az olvasást
A DIV elem volt az egyetlen elem, amellyel megkaptuk a horgokat, hogy megformálhassák a dokumentumainkat, és hozzon létre oszlopokat és divatos elrendezéseket. Emiatt a DIV elemekkel feltöltött HTML-kóddal találkoztunk - mi lehet a webdesignerek "divitis" -nek nevezni. Volt még a WYSIWYG szerkesztők is, akik kizárólag a DIV elemet használják. Igazából a HTML-ben futtam, amely a bekezdések helyett a DIV elemet használja!
A HTML5 segítségével elkezdhetjük a szekcionálási elemek használatával több szemantikailag leíró dokumentumot (navigációs és leíró jellegű adatok stb.) Létrehozni, valamint definiálni a stílusokat ezeken az elemeken.
Mi a helyzet a SPAN elemével?
A másik elem, amelyet a legtöbb ember gondol, amikor a DIV elemre gondolnak, az az elem. Ez az elem, mint a DIV, nem szemantikus elem. Ez egy inline elem, amellyel horogokat adhat a stílusok és szkriptek számára inline tartalomblokkok (általában szöveg) körül. Ebben az értelemben pontosan olyan, mint a DIV elem, csak inline, nem blokk elem . Bizonyos szempontok szerint könnyebben gondolhatja a DIV-t blokk szintű SPAN elemként, és ugyanúgy használhatja, mint SPAN-ot csak a HTML tartalom teljes tömbjeire.
A HTML5-ben nincs összehasonlítható inline szakaszelem elem.
Az Internet Explorer korábbi verzióihoz
Még akkor is, ha drámai módon támogatja az IE (például IE 8 és alacsonyabb) verzióit, amelyek nem megbízhatóan ismerik a HTML5-öt, nem szabad félnie a szemantikailag helyes HTML címkék használatától. A szemantika segíteni fog Önnek és csapata kezelni az oldalt a jövőben (mert tudni fogja, hogy ez a rész a cikk, ha az ARTICLE elem veszi körül). Ráadásul azok a böngészők, amelyek nem ismerik fel ezeket a címkéket, jobban támogatják őket.
A HTML5 szemantikus szekcionálási elemeket továbbra is használhatod az Internet Explorer programban, csak szkripteket és esetleg néhány környező DIV elemet kell hozzáadni ahhoz, hogy felismerhessék a címkéket HTML formátumban.
A DIV és SECTION elemek használata
Ha helyesen használja őket, akkor a DIV és a SECTION elemeket együtt használhatja egy érvényes HTML5 dokumentumban. Ahogy itt láttál ebben a cikkben, a SECTION elemet a tartalom szemantikailag diszkrét részének definiálására használod, és a DIV elemet horogként használod a CSS és a JavaScript számára, valamint definiálod az olyan elrendezést, amely nem rendelkezik semantikus jelentéssel.
Jennifer Krynin eredeti cikke. Szerkesztette Jeremy Girard 15/15/17