A HTML5 SECTION elem használata

És mikor kell használni az ARTICLE, az ASIDE és a DIV használatát?

Az új HTML5 SECTION elem kissé zavaró lehet. Ha HTML5 formátumú HTML dokumentumokat készítettél , előfordulhat, hogy már használja az elemet, hogy strukturális felosztást hoz létre az oldalain belül, majd rendezze az oldalakat velük. Tehát természetesnek tűnhet, hogy egyszerűen kicserélheti meglévő DIV elemeit a SECTION elemekkel. De ez technikailag helytelen. Tehát ha nem csak a DIV elemeket helyettesíti a SECTION elemekkel, akkor hogyan használja őket helyesen?

A SECTION elem egy szemantikus elem

Az első dolog megérteni, hogy a SECTION elem egy szemantikus elem. Ez azt jelenti, hogy mind a felhasználói ügynökök, mind pedig az emberek számára jelentést jelent a tartalom zárt tartalma - pontosabban a dokumentum egy részének.

Ez nagyon általános szemantikai leírásnak tűnhet, és ez azért van így. Vannak olyan HTML5 elemek , amelyek több szemantikai megkülönböztetést biztosítanak a tartalomhoz, amelyet először használnia kell a SECTION elem használata előtt:

Mikor kell használni a SECTION elemet?

Használja a ARTICLE elemet, ha a tartalom a webhely önálló része, amely önmagában állhat, és egy cikk vagy blogbejegyzés szerint szinkronizálható. Használja az ASIDE elemet, ha a tartalom tangenciálisan kapcsolódik az oldal vagy a webhely tartalmához, például oldalsávokhoz, megjegyzésekhez, lábjegyzetekhez vagy a kapcsolódó webhelyinformációkhoz. Használja a navigációs tartalomhoz tartozó NAV elemet.

A SECTION elem egy általános szemantikai elem. Ezt akkor használja, ha a többi szemantikus konténerelem sem megfelelő. Ezt arra használja, hogy a dokumentum egyes részeit különálló egységekké alakítsa, amelyeket valamilyen módon összefüggésben leírhat. Ha nem tudja leírni a szakasz elemeit egy vagy két mondatban, akkor valószínűleg nem használja az elemet.

Ehelyett használja a DIV elemet. A HTML5-ben található DIV elem egy nem-szemantikus konténerelem. Ha a megcélozni kívánt tartalom nem rendelkezik semantikus jelentéssel, de még mindig hozzá kell kapcsolódnia a stílushoz, akkor a DIV elem a megfelelő elem.

A SECTION elem működése

A dokumentum egy része megjelenhet a cikkek és az ASIDE elemek külső tárolójaként. Tartalmazhat olyan tartalmat is, amely nem része az ARTICLE vagy az ASIDE elemeknek. A SECTION elem is megtalálható az ARTICLE, NAV vagy ASIDE részeken belül. Még fészkelő szakaszokat is kijelölhet, amelyek azt jelzik, hogy egy tartalom csoport egy másik tartalomcsoport része, amely egy cikk egy része vagy az oldal egésze.

A SECTION elem elemeket hoz létre a dokumentum vázlatán belül. És mint ilyen, mindig legyen egy fejlécelem (H1-H6) a részek részeként. Ha nem tudsz megfejteni egy címet a szakaszhoz, akkor valószínűleg a megfelelőbb a DIV elem. Ne felejtse el, ha nem szeretné, hogy a szakasz címe megjelenjen az oldalon, mindig maszkolhatja le a CSS-sel.

Ha nem használja a SECTION elemet

A fenti tanácsokon túlmenően, hogy elsőként használjuk a konkrétabb szemantikai elemeket, van egy meghatározott terület, amelyet nem szabad használni a SZEKCIÓ elemhez: csak a stílushoz.

Más szóval, ha az egyetlen ok arra, hogy elemet helyezzen el arra a helyre, hogy csatolja a CSS-stílus tulajdonságait, ne használjon SECTION elemet. Keressen egy szemantikus elemet vagy használja a DIV elemet.

Végül ez nem számít

A szemantikai HTML-írás nehézsége az, hogy számomra szemantika lehet teljesen értelmetlen. Ha úgy érzi, hogy indokolhatja a SECTION elem használatát a dokumentumokban, akkor azt használnia kell. A legtöbb felhasználói ügyintéző nem érdekli, és megjeleníti az oldalt, ahogy arra számíthat, hogy DIV vagy SECTION stílusban áll.

Olyan tervezők számára, akik szemantikailag helyesek, a SECTION elem szemantikailag érvényes módon történő használata fontos. A tervezők számára, akik csak szeretnék az oldaluk működését, ez nem olyan fontos. Úgy vélem, hogy a szemantikailag érvényes HTML-írás jó gyakorlat, és az oldalakat a jövőben megvédi. De végül rajtad áll.