A "szemantikus web" kifejezést manapság szinte inflációnak nevezik. Sok embernek azonban nincs tudatában, hogy mi is pontosan ez a dicséretes szemantika jelent. Valójában egyszerű: a szemantika segítségével valóban kinyerhetőek a szükséges/kívánt információk hatalmas adatmennyiségekből.
Egy konkrét példa segít bemutatni a szemantika fontosságát. A digitális fotók nagyszerűek. Az elkészítés után azonnal megoszthatók az egész világgal az interneten keresztül. Ami a magánéletben működik, az régóta már a professzionális környezetben is bevált. Képügynökségek, múzeumok, könyvtárak és fotósok fényképeket, festményeket vagy akár értékes kéziratok digitális verzióit kínálják szakmai képadatbázisokon keresztül. Az adott weboldalakon keresőablakok vannak, amelyeken keresztül áttérhetünk a platformon. Az egyik legnépszerűbb példa a képkeresőmotorra a web 2.0-ban biztosan a Flickr.
Ezen a ponton azonban egyik hagyományos internetet érintő hátránya is nyilvánvalóvá válik: jelenleg az információkat bár az emberek értik, a gépek - a bemutatott példában a keresőmotorok - nem képesek helyesen értelmezni.
A gépek csak akkor tudnak információkat kinyerni, ha valójában van is ilyen. És éppen itt kerül képbe a szemantika.
Dokumentum strukturálása
A korábbi HTML-verziókban egyszerűen nem volt lehetőség dokumentumokat szemantikusan strukturálni. Ha valaki szeretett volna weboldalt strukturálni, általában csak címek és szövegbekezdések voltak rendelkezésre. Íme egy tipikus példa a klasszikus oldal struktúrájára:
<h1> Fejezet </h1> <p> Bekezdés </p> <h2> Alfejezet </h2> <p> Bekezdés az alfejezetben </h2> <h3>
A HTML az h1-től h6-ig terjedő elemeket biztosít a dokumentumstruktúrához. Egy ténylegesen mélyen beágyazott struktúrát azonban így nem lehet kialakítani. Mivel az h7 vagy h8 elemek nem szerepelnek az HTML-ben. Éppen ezért az HTML5 itt lép közbe és néhány további struktúraelemet vezet be.
Ezen elemeket ebben a bemutatóban mutatjuk be. Azonban előtte van egy figyelmeztetés: Ne várjunk ezektől az elemektől csodákat az esztétikai szempontból. Azoknak a weboldalaknak, amelyek a szemantikus elemeken alapulnak, ugyanis vonzónak kell lenniük, ehhez pedig CSS-t kell alkalmazni. Erről viszont később még beszélünk.
Néhány szemantikus elemet már megismertetünk, bár ezek talán első pillantásra nem feltétlenül kapcsolódnak a szemantikához. Itt egy példa:
<progress min="0" max="100" value="40"></progress>
Ez egy előrehaladássávot generál. (Az progress elemet egyébként már részletesen bemutatták ebben a sorozatban).
Ez az elem világosan mutatja, hogy mennyire egyszerű létrehozni olyan tartalmakat, amelyeket egy adott kontextushoz lehet rendelni. A szoftverek számára ugyanis azonnal felismerhető, hogy egy előrehaladássávról van szó. Azoknál a megoldásoknál, amelyek az előrehaladássáv generálásához JavaScriptet használnak, ez az összefüggés nem egyértelmű.
Szemantikus elemstruktúrák
A "normál" HTML-dokumentumok tartalmi strukturálására általában div elemekkel kerül sor. Ezekhez az elemekhez osztályokat vagy azonosítókat kell rendelni annak érdekében, hogy CSS segítségével formázni lehessen őket. Ezt a elvet az HTML5-ben is használjuk. Valójában a Google által végzett felmérés szerint sok dokumentumban mindig ugyanazokat az osztályokat használják.
<div class="nav"></div>
Sok fejlesztő például a nav-t használja ahhoz, hogy ezen belül elhelyezze a navigációt. Azonban az HTML5-ben ez így néz ki:
<nav>Tartalom</nav>
A nav elem világosan jelzi, hogy ez nem csak egy hiperhivatkozások listája. Valójában ez az elem egy tartalmi blokkot ír le, amely tartalmazza az adott webhely navigációjának információit egy meghatározott kontextusban.
Modern strukturálás
Hogyan néz ki általában egy HTML-dokumentum struktúrája? Alapvetően hasonló a struktúra, függetlenül attól, hogy az oldalon végül milyen tartalmak találhatók. Általában az alábbi területek szerepelnek:
<body>
<div id="header">
<div id="logo">Logo</div>
<div id="search">Keresés</div>
<div id="nav">Főmenü</div>
</div>
<div id="content">
<h1>Ez itt a tartalom</h1>
<div class="section">
<h2>Alsó-cím</h2>
<h3>Szakasz</h3>
<!-- Itt van a tartalom -->
</div>
<div class="section">
<h2>Alsó-cím</h2>
<!-- Itt van a tartalom -->
</div>
</div>
<div id="sidebar">
<div id="subnav">Almenü</div>
</div>
<div id="footer">Lábterület</div>
</body>
Ilyen div struktúrákkal lehet, hogy már találkoztatok. Azért, hogy a fejlesztők számára logikus legyen a struktúra, az egyes div területek megfelelő osztályokat vagy azonosítókat kapnak, amelyek "beszélő" nevekkel rendelkeznek. Így a fejlesztők számára például egyértelmű lesz, hogy például azon a területen, amelynek az ID-je footer, azok a tartalmak találhatók, amelyek az oldal lábjegyzetéhez tartoznak. A probléma az, hogy bár a nevek sejtetik az oldal szerkezetét, a weboldal szemantikus szempontból még korántsem strukturált. Éppen itt lépnek be az új HTML elemek. Mivel ezek most először teszik lehetővé az igazi strukturálást a dokumentumokban vagy weboldalakon.
Jobb megértés érdekében tekintsük meg az alábbi HTML5 dokumentumot:
<body>
<header>
<div id="logo">Logo</div>
<div id="search">Keresés</div>
<nav>Főmenü</nav>
</header>
<article>
<h1>Ez a tartalom</h1>
<section>
<h2>Alsó-cím</h2>
<h3>Szakasz</h3>
<!-- Itt van a tartalom -->
</section>
<section>
<h2> Alsó-cím</h2>
<!-- Itt van a tartalom -->
</section>
</article>
<aside>
<nav>Almenü</nav>
</aside>
<footer>Lábterület</footer>
</body>
Természetesen a következő útmutatókban részletesen fogok foglalkozni az itt használt elemekkel. Már ennek a példának az áttekintése is mutatja, hogy hol vannak az alkalmazott elemek előnyei. Így most végre lehetőség van az oldal területeket olyan elemekkel jelölni, amelyek kifejezetten azoknak a területeknek szólnak. Minden, ami az oldal fejrészéhez tartozik, beilleszthető egy header elembe.
Ezen kívül mostantól rendelkezésre állnak a section és article elemek, amelyekkel a valódi oldaltartalmakat sokkal jobban lehet strukturálni. Mint láthatjátok, tehát érdemes alaposan áttanulmányozni azokat a lehetőségeket, amelyeket az HTML5 kínál a dokumentumok szemantikus strukturálása tekintetében.
