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.