Mire jó a HTML5 main jelölőeleme?
A cikk témái:
Már a HTML5 legelső munkaverzióiban is megjelentek azok az új jelölőelemek, amelyekkel végre szemantikailag is korrekt módon megjelölhetjük a weboldalunk legfőbb területeit. Például a header és a footer elem segítségével az oldal fejlécét, illetve láblécét. Ugyanakkor az egyik legfontosabb terület, az oldal fő beltartalmi szakaszának megjelölésére eredetileg nem készült ilyen elem. A HTML5 első revíziójába, a HTML5.1-be viszont bekerült a main nevű jelölőelem, ami pont ezt a célt szolgálja.
Eredetileg miért nem volt main elem?
Állítólag az egyik ilyen indok az volt, hogy a fő beltartalmi szakasz algoritmikus módon, kizárásos alapon adja magát. Vagyis a body elemen belül, ami nem header, nav, aside vagy footer elemmel van megjelölve, az automatikusan az oldal beltartalmához tartozik. Az alábbi kódban ilyen a p elem:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Hol van a tartalom?</title>
</head>
<body>
<header>Ez itt az oldal fejléc területe</header>
<nav>Ez itt a navigáció területe</nav>
<p>Ez itt a fő beltartalom</p>
<aside>Ez itt a másodlagos tartalmi terület</aside>
<footer>Ez itt a lábléc területe</footer>
</body>
</html>Természetesen a régi beidegződés alapján a fő tartalmi szakaszt továbbra is szinte mindenki a div elemmel jelölte, valamilyen id azonosítással együtt. Például így:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Hol van a tartalom?</title>
</head>
<body>
<header>Ez itt az oldal fejléc területe</header>
<nav>Ez itt a navigáció területe</nav>
<div id="tartalom">
<p>Ez itt a fő beltartalom</p>
</div>
<aside>Ez itt a másodlagos tartalmi terület</aside>
<footer>Ez itt a lábléc területe</footer>
</body>
</html>Miért jó, ha megjelöljük a fő tartalmi szakaszt?
A különálló vizuális formázás lehetőségét leszámítva a fő tartalmi szakasz megjelölése több szempontból is szerencsés. Természetesen az egyik a weboldal akadálymentessége, de lehetnek keresőbarátsági, illetve felhasználói élményt növelő vonzatai is. Utóbbira egy tipikus példa a Safari böngészőkben megtalálható Olvasó funkció, ami képes a lényegi beltartalmat kiemelni, és egy önálló, letisztult felületen megjeleníteni.
Akadálymentességi szempontból azért lényeges a fő tartalmi szakasz megjelölése, mert ezzel olyan kisegítő funkciók előtt nyílhat meg az út, amelyek segítségével az érintett felhasználók (elsősorban a vak és a mozgássérült felhasználók) viszonylag gyorsan és egyszerűen eljuthatnak ehhez a szakaszhoz. Klasszikus példa erre a tartalomhoz ugró link alkalmazása, amit jelenleg még nekünk kell beépíteni az oldalba a tartalmi szakasz id attribútumát felhasználva. Ugyanakkor a legújabb szemantikai lehetőségek, köztük az WAI-ARIA navigációs szakaszjelzőinek, vagy a main elem alkalmazásával hasonló célú navigációs funkciót kaphatunk a böngésző- és a képernyőolvasó programoktól.
Félúton a div és main elem között
A WAI-ARIA szabvány még jóval a HTML5 main elemének megjelenése előtt már biztosított egy olyan lehetőséget, hogy az úgynevezett navigációs szakaszjelző szerep segítségével szemantikai jelentést adhassunk a div elemmel megjelölt tartalmi szakasznak is. Csak annyit kell tennünk, hogy a kérdéses div elemhez egy main értékű role attribútumot társítunk:
<div id="tartalom" role="main">
<p>Ez itt a fő beltartalom</p>
</div>Ezt a plusz információt például a modern képernyőolvasó programok megértik, ami jellegzetesen abban nyilvánul meg, hogy ehhez a szakaszhoz érve közlik a felhasználóval, hogy a tartalmi szakaszhoz ért, illetve bármikor közvetlen ugrási lehetőséget biztosítanak ide.
Nem véletlen, hogy ezt a lehetőséget látva, idővel felmerült, hogy miért is ne lehetne egy olyan natív HTML elemet létrehozni, ami már önmagában hordozza ezt a szerepet. Sokáig lebegett, hogy ez esetleg a content nevet viselhetné, de végül ez lett a main jelölőelem.
A main jelölőelem használata
Borzasztó egyszerű az elv. HTML5-ben az oldal fő tartalmi szakaszát a main elemmel jelöljük meg:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Hol van a tartalom?</title>
</head>
<body>
<header>Ez itt az oldal fejléc területe</header>
<nav>Ez itt a navigáció területe</nav>
<main>
<p>Ez itt a fő beltartalom</p>
</main>
<aside>Ez itt a másodlagos tartalmi terület</aside>
<footer>Ez itt a lábléc területe</footer>
</body>
</html>Amíg például a header elem szemantikailag a teljes weboldal fejlécét, vagy akár az oldalon szereplő cikkek (article elemek) fejlécét is jelölheti, azaz egy HTML dokumentumon belül több is lehet belőle, addig a main elemből kizárólag egy lehet. Ha szükséges, akkor a main elemnek is adható id vagy class attribútum.
Mi van, ha nem támogatja a main elemet a böngészőprogram?
Tisztázzuk, hogy mit is jelent az, hogy nem támogatja a böngészőprogram.
Mivel alapvetően egy szemantikai elemről van szó, ezért értelemszerűen nem érti a szemantikai szerepét. Tulajdonképpen egy div, vagy inkább egy span jellegű elemnek fogja fel. Szerencsére a WAI-ARIA segítségével az elem valódi szerepét mi magunk definiálhatjuk. Sőt, ezt mindaddig javasolt is megtenni, amíg a main elem nem lesz széleskörűen támogatott. A role attribútumot természetesen main értékkel kell megadnunk:
<main role="main">
<p>Ez itt a fő beltartalom</p>
</main>Erre amúgy nem lenne szükség, hiszen a main elemnek önmagában main a szerepe.
Speciálisan az Internet Explorer böngészőprogramra jellemző, hogy csak akkor hajlandó az általa nem ismert elemeket megformázni, ha előbb egy JavaScript kód segítségével bemutatjuk neki ezeket. Erre tökéletesen jó a html5shim nevű kód, aminek legfrissebb verziója már tartalmazza a main elem definícióját.
A CSS formázás szempontjából irreleváns, hogy a böngésző érti-e a main elem szemantikáját. A CSS-ben alapból minden elem sorközi, azaz inline szintű elemként viselkedik. Mivel a main elem általában blokk szintű elem, ezért az elemet nem ismerő böngészőprogramok esetén nekünk magunknak kell beállítani ezt a megjelenést:
main {
display: block;
}Innentől tulajdonképpen bármilyen megszokott CSS formázás definiálható a main elemre.
Mindebből látható, hogy a main elemet - a felsorolt kiegészítésekkel - már mostantól bátran lehet használni, hiszen a weboldalunk akadálymentességén nagyon sokat lendíthetünk vele.