Pojem "webová sémantika" je dnes používán tak často, že je téměř inflační. Mnoha lidem však není vůbec jasné, co tato vysoce chválená sémantika znamená. Ve skutečnosti je to velmi jednoduché: Díky sémantice lze skutečně extrahovat požadované informace z obrovských datových souborů.
Jako konkrétní příklad by měla sloužit důležitost sémantiky. Digitální fotografie jsou skvělá věc. Hned po pořízení je lze přes internet prezentovat celému světu. Co platí v soukromí, je již dlouho etablováno i v profesionálním prostředí. Agentury pro obrázky, muzea, knihovny a fotografové nabízejí fotografie, obrazy nebo dokonce digitální verze cenných textů prostřednictvím profesionálních obrázkových databází. Na příslušných webových stránkách jsou pak k dispozici hledací masky, kterými lze prohledávat platformu. Nejoblíbenějším příkladem vyhledávače obrázků ve Webu 2.0 je jistě Flickr.
Kdo už využil tyto vyhledávače obrázků, zná jejich limity: Pokud například zadáte do vyhledávače výraz Kohl, zobrazí se vám fotografie z nejrůznějších oblastí. Yahoo! příkladně zobrazuje fotografie kohoutka, tenisáka jménem Kohl a bývalého kancléře Helmuta Kohla.
V tomto bodě je jeden z nevýhod klasického WWW zřejmý: V současné době jsou poskytované informace sice srozumitelné pro lidi, ale stroji – v uvedeném příkladu tedy pro vyhledávače – nesprávně interpretovatelné.
Stroje mohou informace číst pouze tehdy, pokud jsou skutečně k dispozici. A právě zde vstupuje do hry sémantika.
Strukturování dokumentů
<h1> Kapitola </h1> <p> Odstavec </p> <h2> Podkapitola </h2> <p> Odstavec v podkapitole </p> <h3>
Pro strukturování dokumentu nabízí HTML elementy h1 až h6. S těmito však nelze vytvořit opravdu hluboce vnořenou strukturu. Prvek h7 nebo h8 totiž v HTML není předepsán. Právě zde přichází HTML5 a s sebou zavádí několik dalších strukturizačních prvků.
• article
• aside
• dialog
• figure
• footer
• header
• nav
• section
Tyto prvky jsou představeny v tomto tutoriálu. Předtím však ještě jedno upozornění: Nepočítejte s žádnými zázraky vzhledově z těchto prvků. Pro webové stránky založené na sémantických prvcích totiž musí být použito CSS. A k tomu se dostaneme později.
Některé sémantické prvky jste už poznali, i když možná na první pohled nemají moc společného se sémantikou. Zde je příklad jednoho takového prvku:
<progress min="0" max="100" value="40"></progress>
Tímto prvkem se generuje pruh načítání. (Prvek progress byl mimochodem v tomto vydání již podrobně představen).
Tento prvek jasně ukazuje, jak snadno lze vytvořit obsah, který lze přiřadit určitému kontextu. Software totiž okamžitě pozná, že se jedná o pruh načítání. U řešení, která staví na JavaScriptu pro generování pruhu načítání, to zase neplatí.
Struktury sémantických prvků
V "obyčejných" HTML dokumentech se pro strukturování obsahu často používají prvky div. Tyto prvky se označují třídami nebo ID, aby bylo možné je formátovat pomocí CSS. Toto principu se využívá i v HTML5. Ve skutečnosti anketa provedená společností Google ukázala, že v mnoha dokumentech se vždy používají stejné třídy.
Příklad:
<div class="nav"></div>
Mnoho vývojářů například používá nav k umístění navigace v tomto elementu div. V HTLM5 to vypadá takto:
<nav>Obsah</nav>
Pomocí prvku nav je jasné, že se nejedná pouze o seznam hypertextových odkazů. Tento prvek skutečně popisuje obsahový blok, ve kterém jsou informace o navigaci na webové stránce v určitém konkrétním kontextu.
Moderní strukturování
Jak vypadá typicky struktura HTML dokumentu? Základně se podobá, bez ohledu na to, jaké obsahy webová stránka nakonec obsahuje. Většinou jsou zahrnuty následující oblasti:
• Hlavička
• Hlavní menu
• Obsah
• Patička
Webová stránka, která pro strukturování používá prvky div, by mohla vypadat takto:
<body>
<div id="header">
<div id="logo">Logo</div>
<div id="search">Hledat</div>
<div id="nav">Hlavní menu</div>
</div>
<div id="content">
<h1>Tohle je obsah</h1>
<div class="section">
<h2>Podtitul</h2>
<h3>Sekce</h3>
<!-- Zde je obsah -->
</div>
<div class="section">
<h2>Podtitul</h2>
<!-- Zde je obsah -->
</div>
</div>
<div id="sidebar">
<div id="subnav">Podmenu</div>
</div>
<div id="footer">Patička</div>
</body>
Takové konstrukce divů už možná znáte. Aby struktura byla pro vývojáře logická, přidělují jednotlivým oblastem div odpovídající třídy nebo ID s "mluvícími" názvy. Například potom je pro vývojáře jasné, že v oblasti div s ID footer jsou uloženy obsahy, které patří do patičky stránky. Problém je ale ten, že tato pojmenování mohou napovídat strukturu stránky, ale sama stránka zatím není smysluplně strukturována. Právě zde začínají nové prvky HTML. Tyto prvky umožňují poprvé skutečnou strukturování dokumentů a webů.
Pro lepší porozumění se podívejte na následující HTML5 dokument:
<body>
<header>
<div id="logo">Logo</div>
<div id="search">Hledat</div>
<nav>Hlavní menu</nav>
</header>
<article>
<h1>Tohle je obsah</h1>
<section>
<h2>Podtitul</h2>
<h3>Sekce</h3>
<!-- Zde je obsah -->
</section>
<section>
<h2> Podtitul</h2>
<!-- Zde je obsah -->
</section>
</article>
<aside>
<nav>Podmenu</nav>
</aside>
<footer>Patička</footer>
</body>
Samozřejmě se v dalších tutoriálech budu zabývat použitými prvky. Už však nyní ukazuje tento příklad, kde jsou výhody použití těchto prvků. Nyní můžete konečně označit části stránky těmito prvky, které jsou pro ně určeny. Vše, co patří do hlavičky stránky, může být začleněno do header.
Dostupné jsou také prvky section a article, kterými lze strukturovat skutečné obsahy stránek mnohem lépe. Jak vidíte, je tedy dobré se podívat na možnosti, které HTML5 nabízí pro smysluplné strukturování dokumentů.
