Mire jó a HTML5 main jelölőeleme?

A cikk témái:

Figyelmeztetés: Ezt a cikket évek óta nem frissítettem, ezért elavult információkat is tartalmazhat.

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.