Termín "sémantický web" je dnes takmer nadmerne používaný. Mnohí ľudia si však vôbec neuvedomujú, čo táto veľkodušne ospevovaná sémantika znamená. V skutočnosti je to veľmi jednoduché: Vďaka sémantike môžu byť z obrovských dátových množstiev skutočne získané potrebné / žiadané informácie.
Konkrétny príklad by mal demonštrovať dôležitosť sémantiky. Digitálne fotografie sú skvelé. Hneď po ich zhotovení ich môžete zdieľať prostredníctvom internetu so celým svetom. To, čo platí v súkromí, sa už dávno uchytilo aj v profesionálnom rámci. Agentúry pre obrázky, múzeá, knižnice a fotografi ponúkajú fotografie, obrazy alebo aj digitálne verzie cenných textov cez profesionálne obrazové databázy. Na príslušných webových stránkach sú potom k dispozícii vyhľadávacie masky, cez ktoré sa dá plánom prehľadávať. Najobľúbenejším príkladom vyhľadávača obrázkov na webe 2.0 je určite Flickr.
Kto už využíval takéto vyhľadávače obrázkov, pozná ich obmedzenia: Ak napríklad zadáte do vyhľadávania výraz Kohl, zobrazia sa vám fotografie z rôznych oblastí. Tak napríklad vyhľadávanie obrázkov Yahoo! zobrazuje fotografie z Kohlmeise, tenisového hráča menom Kohl a aj bývalého kancelára Helmuta Kohla.
V tomto bode je jeden z nevýhod klasického WWW zrejmý: Aktuálne sú informácie, ktoré sú k dispozícii, síce pochopiteľné pre ľudí, pre stroje - v príslušnom príklade teda pre vyhľadávače - však nie sú správne interpretovateľné.
Stroje môžu informácie čítať len vtedy, keď sú naozaj prítomné. A presne tu prichádza do hry sémantika.
Štruktúrovanie dokumentov
V predchádzajúcich verziách HTML neexistovala jednoducho možnosť štruktúrovať dokumenty sémanticky. Ak chcel niekto štruktúrovať webovú stránku, mal k dispozícii v podstate len nadpisy a odstavce textu. Tu je typický príklad štruktúry klasického webového sídla:
<h1> Kapitola </h1> <p> Odstavec </p> <h2> Podkapitola </h2> <p> Odstavec v podkapitole </h2> <h3>
HTML poskytuje pre štruktúrovanie dokumentov prvky h1 až h6. S tým však nie je možné vytvoriť skutočne hlboko vnorenú štruktúru. Pretože v HTML nie je takým prvkom ako h7 alebo h8
• article
• aside
• dialog
• figure
• footer
• header
• nav
• section
Tieto prvky sú predstavené v tomto návode. No najprv ešte jedna poznámka: Nečakajte z týchto prvkov z optického hľadiska zázraky. Aby webové stránky založené na sémantických prvkoch vyzerali atraktívne, je potrebné použiť CSS. A k tomu sa samozrejme dostaneme neskôr.
Niektoré sémantické prvky ste už spoznali, aj keď by sa na prvý pohľad nemuseli nutne zaoberať sémantikou. Tu je príklad takéhoto prvku:
<progress min="0" max="100" value="40"></progress>
Tento prvok jasne ukazuje, aké jednoduché je vytvoriť obsah, ktorý sa môže priradiť k príslušnému kontextu. Pre softvér je totiž okamžite zrejmé, že ide o ladiacu lištu. Pri riešeniach, ktoré používajú JavaScript pre generovanie ladiacej lišty, to však neplatí.
Sémantické štruktúry prvkov
V "bežných" HTML dokumentoch sa na štruktúrovanie obsahu často používa na div elementy. Týmto prvkom sa priradzujú triedy alebo ID, aby bolo možné ich formátovanie pomocou CSS. Toto sa využíva aj v HTML5. Skutočne, prieskum, ktorý uskutočnila Google, ukázal, že v mnohých dokumentoch sú vždy použité rovnaké triedy.
Príklad:
<div class="nav"></div>
Mnohí vývojári napríklad používajú nav na umiestnenie navigácie v tomto div elemente. V HTLM5 to však vyzerá takto:
<nav>Obsah</nav>
Pomocou nav elementu je jasné, že ide nie len o zoznam hyperlinkov. Skutočne tento prvok popisuje obsahový blok, v ktorom sú informácie o navigácii webovej stránky obsiahnuté v konkrétnom kontexte.
Moderné štruktúrovanie
Ako vlastne vyzerá štruktúra HTML dokumentu typicky? V zásade sa podobá, nezáleží na tom, aký obsah má stránka v skutočnosti. Vo väčšine prípadov obsahuje nasledujúce časti:
• Hlavička
• Hlavné menu
• Obsahová oblasť
• Päta
Webová stránka, ktorá používa div elementy na štruktúrovanie, by mohla vyzerať takto:
<body>
<div id="header">
<div id="logo">Logo</div>
<div id="search">Hľadať</div>
<div id="nav">Hlavné menu</div>
</div>
<div id="content">
<h1>To tu je obsah</h1>
<div class="section">
<h2>Podnadpis</h2>
<h3>Časť</h3>
<!-- Tu je obsah -->
</div>
<div class="section">
<h2>Podnadpis</h2>
<!-- Tu je obsah -->
</div>
</div>
<div id="sidebar">
<div id="subnav">Podmenu</div>
</div>
<div id="footer">Päta</div>
</body>
Takéto div konštrukcie už možno poznáte. Aby štruktúra bola pre vývojárov logická, priradzujú jednotlivým oblastiam div-y odpovedajúce triedy alebo ID s "hovoriacimi" názvami. Pre vývojárov je napríklad jasné, že v div oblasti s ID footer sú uložené obsahy, ktoré patria do päty stránky. Problém je v tom, že aj keď názvy môžu naznačovať štruktúru webovej stránky, samotná webová stránka ešte nie je semanticky štruktúrovaná. Práve tu nastupujú nové prvky HTML. Tieto prvky totiž umožňujú prvýkrát skutočné štruktúrovanie dokumentov alebo webových stránok.
Ak si chcete lepšie porozumieť, pozrite sa na nasledujúci HTML5 dokument:
<body>
<header>
<div id="logo">Logo</div>
<div id="search">Hľadať</div>
<nav>Hlavné menu</nav>
</header>
<article>
<h1>To je obsah</h1>
<section>
<h2>Podnadpis</h2>
<h3>Časť</h3>
<!-- Tu je obsah -->
</section>
<section>
<h2> Podnadpis</h2>
<!-- Tu je obsah -->
</section>
</article>
<aside>
<nav>Podmenu</nav>
</aside>
<footer>Päta</footer>
</body>
Samozrejme sa ešte v ďalších tutoriáloch zameriam na používanie týchto prvkov. Avšak už tento príklad ukazuje výhody použitia týchto prvkov. Teraz je možné konečne označiť časti stránok s takými prvkami, ktoré sú na ne určené. Všetko, čo patrí k hlavičke stránky, môže byť zahrnuté do značky header.
Zároveň sú teraz dostupné značky section a article, ktoré umožňujú podstatne lepšie štruktúrovať samotný obsah stránky. Ako vidíte, oplatí sa dôkladne preskúmať možnosti, ktoré HTML5 ponúka pre semantické štruktúrovanie dokumentov.
