Webdesignérův průvodce po HTML5 - nová sémantika
V minulém díle jsme se podívali na základní principy, na kterých HTML5 stojí. Dneska se podíváme na to, s čím si ho mnoho kodérů spojuje – změny v sémantice, nové tagy a podobné věci. Představíme si šest sémantických tagů, kterými můžeme nahradit DIVy.
Seriál Webdesignérův průvodce po HTML5
- Webdesignérův průvodce po HTML5 - díl nultý
- Webdesignérův průvodce po HTML5 - nová sémantika
- Webdesignérův průvodce po HTML5 - nová sémantika II
- Webdesignérův průvodce po HTML5 - pohyblivé obrázky
- Webdesignérův průvodce po HTML5 - používáme pohyblivé obrázky
HTML5 (mimochodem, bez mezery to píšu schválně, specifikace se tak oficiálně jmenuje. – pozn. aut.) je poměrně výrazný zásah do způsobu, jakým kódujeme naše HTML dokumenty. Nejen že upravuje sémantický význam u některých starších HTML tagů, ale zavádí také nemalý počet značek nových.
Dnes je většina prvků na stránce spojována do logických celků elementem <div>. Ten nenese žádný sémantický význam, a tak s tím nikdo nemůže strojově pořádně pracovat. Slouží tak prakticky jen k rozdělení dokumentu kvůli stylování. Rozumní kodéři sice dávají takovýmto div ům rozumné atributy class, aby bylo jasné, o co jde, ale pro stroje je tento přístup k ničemu, protože se nemohou spolehnout na to, že autor danou třídu tak pojmenoval schválně. (Situaci poměrně úspěšně řeší Mikroformáty, když standardizují jména tříd, ale o tom už jsme vydali seriál Kódujeme sémanticky s Mikroformáty. – Pozn. aut.)
HTML5 vstupuje do hry s mnoha elementy, které mají za úkol sémanticky popsat různé části dokumentu. Ve specifikaci tak najdeme elementy <article>, <nav> a další. Pokud umíte anglicky, je poměrně snadné uhodnout, co reprezentují.
Ale začněme úplně od začátku…
Doctype
“Každý správný HTML dokument má na začátku Doctype, kde říká použitou verzi HTML a kde lze najít DTD.” Tak přesně tuhle větu zapomeňte. HTML5 zavádí <!DOCTYPE html>. Prostě od teď používáme HTML, verze ani umístění DTD nikoho nezajímají. Stejně tu informaci (až na validátory) nic nepoužívalo.
Vypadá to jako radikální krok, ale pokud si uvědomíme, že prohlížeče také umí jen jednu verzi HTML, tak se, pravděpodobně nejen z pohledu autora tohoto článku jedná o krok logický.
Ale proč vypadá Doctype zrovna takhle? Proč není třeba ještě kratší? Důvod je jednoduchý – kompatibilita se současnými prohlížeči. 15 znaků je nejmenší možný počet znaků, který v prohlížečích aktivuje mód standardů.
Takže začít používat HTML5 můžete zcela bezbolestně. Stačí prohodit Doctype, vše bude i nadále fungovat.
Úvod do nových značek
Výborně, již používáme HTML5, tak hurá, jdeme použít nějaké nové sémantické elementy.
Tvůrci specifikace měli volbu: buď mohli vytvořit velkou hromadu nových elementů, které by si nikdo nepamatoval (a nepoužíval), ale pokryly by všechny možné případy užití, anebo cestu, kterou v duchu svých zásad nakonec zvolili: podívat se na současný web, jaké elementy tvůrci skutečně potřebují, a ty prostě implementovat. Dle zásady 80/20 z toho nakonec vypadlo zhruba třicet nových elementů a několika starým byl změněn sémantický význam.
Chování prohlížečů k neznámým elementům
Starší prohlížeče pochopitelně nové sémantické elementy neznají. Což nás ale nemusí trápit, protože se na to při návrhu myslelo, a prohlížeče se k elementu, který neznají, chovají jako by to byl obyčejný inline element. Pokud chceme element blokový, tak stačí použít CSS a display:block.
Příliš krásné, aby to byla pravda? Ano, já vím…
Internet Explorer (potažmo jádro Trident) v libovolné verzi se sice k neznámým elementům chová jako k inline elementům, ale aplikovat na ně styl už nemůžete. Průšvih. Ale naštěstí my webdesigneři jsme kluci šikovní a víme, že JavaScriptové volání document.createElement("naselement"); zajistí, že i v IE už můžeme element <naselement> stylovat. (Nejsem si jist, kdo byl ten nejšikovnější a přišel s touto technikou. Do obecného podvědomí ji uvedl tvůrce jQuery John Resig. – Pozn. aut.)
Pokud jste líní psát několikrát document.createElement (jako já), tak Remy Sharp vytvořil HTML5 enabling script. Prostě vložte následující kód do hlavičky vašich stránek:
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
Případně to, pokud používáte Modernizr, neřešte, Modernizr to vyřeší za vás. (Mimochodem, na Modernizr – viz zprávička - se určitě podívejte, bude se nám hodit v průběhu celého seriálu čím dál víc. Pozn. aut.)
Nemohu si dovolit riskovat
Mnoho z nás si ovšem nemůže dovolit riskovat, že náš nejdůležitější klient si vypne ve svém IE JavaScript a stránky se mu rozpadnou. To je pochopitelná obava, a ještě pár let se nad tímhle budou muset webdesigneři zamýšlet. Mám pro vás jeden praktický tip – používejte nadále elementy <div>, ale inspirujte se při volbách jmen tříd (a ID) názvy HTML5 elementů. Až za nějaký ten rok uzraje čas a vy budete moci bezstarostně přepnout na HTML5 elementy, tak dáte prostě find&replace.
Prvních šest nových HTML5 elementů
Sekce
Ještě než se pustíme do představení prvních HTML5 elementů, je třeba si představit koncept sekcí (anglicky sectioning content, pokud někdo vymyslíte rozumný překlad, budu vám vděčný. Pozn. aut.).
Některé elementy v HTML5 (konkrétně <article>, <aside>, <nav>, <section>) totiž mají speciální význam – rozdělují obsah stránky na sekce. Každá taková sekce pak může mít svůj <header> a <footer>, HTML5 také zavádí, že může mít i svůj vlastní nadpis <h1>. Specifikace pak říká, že by se důležitost nadpisu měla přepočítat dle toho, jak hluboko je v sekcích zanořen. Ale na to zatím pozor, implementované to nikde není a může to narušit přístupnost vašich stránek.
Elementy
Následujících šest elementů by na vašich stránkách mohlo nahradit převážné množství elementů <div>. Dejte si ale pozor – zatímco <div> sémantický význam nemá a můžeme si ho tedy dávat kam chceme jen proto, abychom mohli stránku nastylovat dle grafického návrhu, tak následující elementy sémantický význam mají, a mají tedy i konkrétní užití. Tentokrát tedy metodu find&replace nepoužívejme.
Pozn. aut.: Část vysvětlení elementů jsem převzal z HTML5Doctor.com, odkaz na konkrétní článek, stejně jako na specifikaci, najdete vždy u konce vysvětlení konkrétního elementu.
<section>
Označuje obecný dokument nebo část aplikace. V podstatě je to nějaký obsah, který byste mohli v databázi ukládat jako jeden individuální záznam. Neměl by se používat (až na pár drobných výjimek), pokud pro něj neexistuje přirozený nadpis.
Pár tipů:
- Nepoužívejte jej jako něco, na co vážete styly či skripty. K tomu slouží
div. <section>je velmi obecný element. Vždy zvažte, zda nemůžete použít nějaký jiný, specifičtější. (Povíme si o nich za chvilku.)- Pokud by dávalo význam obalovaný obsah dávat do RSS, tak použijte raději
<article>(např. pro články na blogu či komentáře). V praxi tedy zjistíte, že<section>nepoužijete zdaleka tak často, jak si myslíte. A pokud ano, tak něco děláte špatně.
Příklad použití:
<section> <h1>Nějaký nadpis (jakékoli úrovně)</h1> <p>obsah</p> </section>
Dále čtěte
<article>
Označuje část stránky, která je samostatný a nezávislý (na zbytku stránky) obsah. Tento obsah by tedy mělo být teoreticky možné vyjmout ze stránky a zobrazit třeba v RSS čtečce. Typicky tedy <article> obaluje články a komentáře.
<article> běžně také obsahuje hlavičku a patičku, ale samozřejmě nemusí. Do <article> také můžete libovolně vnořovat tagy <article>, <section> atd.
Častá je záměna tagů <section> a <article>. V podstatě je význam takový, že <article> je jen konkrétněji zaměřený tag <section>. Důležité u něj je právě to, že stojí sám, a k pochopení jeho obsahu nepotřebujete okolní věci na stránce.
Pár tipů kdy použít <article> a kdy <section>
- Měl by obsah smysl, kdyby byl zobrazen v RSS čtečce? Pokud ano, použijte
<article> - Je pochopení obsahu závislé na něčem dalším na stránce? Pokud ano, použijte
<section> - Nemá váš obsah žádný sémantický význam? Použijte
<div>.
Příklad použití
<article>
<h1>Webdesignérův průvodce HTML5</h1>
<p>Tohle je pravděpodobně nějaký chytrý text článku, který vás nepochybně zaujme.</p>
<p>Zcela překvapivě má i druhý odstavec, což jej dělá ještě více zajímavým.</p>
</article>
Dále čtěte
<aside>
Označuje takový obsah, který je nějakým způsobem spojen s hlavním obsahem stránky, ale který nemusí nutně být jeho součástí. Například tedy odkazy na zdroje k článku (v takovém případě se tag <aside> vyskytuje uvnitř elementu <article>). Také jej lze použít samostatně, poté označuje obsah, který se nějak pojí s celou stránkou, je to tedy takový boční panel.
Tip
- nezapomínejte, že
<aside>vůbec nic neříká o tom, jak se má daný element zobrazovat. Nemusí tedy vůbec být po straně stránky.
Příklad použití
<article>
<header>
<h1>Webdesignérův průvodce HTML5</h1>
</header>
<p>Chytrý článek o tom, jak začít používat HTML5.</p>
<aside>
<dl>
<dt>HTML5</dt>
<dd>značkovací jazyk, nástupce HTML 4</dd>
</dl>
</aside>
</article>
Dále čtěte
<header>
Označuje skupinu úvodních či navigačních prvků pro danou sekci. Typicky obsahuje nadpis sekce (h1-h6), ale může také obsahovat např. obsah, vyhledávání či logo – prostě funguje jako klasická hlavička stránky.
Příklad použití
<header>
<p>Právě čtete</p>
<h1>Webdesignérův průvodce HTML5.</h1>
<p>Doufám, že jste řádně oslavili ručníkový den.</p>
</header>
Dále čtěte
<footer>
Obdoba <header>. Označuje, jak jinak, patičku své sekce. Typicky tedy obsahuje informace o autorovi, odkazy na zdroje či copyright. Také může ale označovat patičku celé stránky, takže se hodí i pro moderní obří patičky.
Příklad použití
<article> Skvělý text článku. <footer> Geniální autor (tedy vy), všechna možná i nemožná práva vyhrazena. </footer> </article>
Dále čtěte
<nav>
Označuje hlavní navigaci. Nic víc, nic míň. (Pamětníci zamáčknou slzu při vzpomínce na element <menu> , který dělal prakticky to samé. Radši se však neptejte, co dělá v HTML5. Ale o tom příště. Pozn. aut.)
Ovšem co všechno vlastně je ta hlavní navigace?
Kdy použít <nav>
- Rozhodně pro primární navigaci webu – tedy nějaké konzistentní menu, které provádí uživatele skrz webové stránky.
- Pokud máte delší článek a někde máte jeho obsah, lze také použít
<nav>. Jedná se přeci o primární navigaci pro danou sekci webu. <nav>by se dal teoreticky použít i pro drobečkovou navigaci a stránkování. Ale záleží na vašem uvážení, časem v odborné komunitě určitě vykrystalizuje názor, zda je to tak dobře, či špatně.
Příklad použití
<nav>
<ul>
<li><a href=“/home”>Domů</a></li>
<li><a href="/about">O nás</a></li>
</ul>
</nav>
Dále čtěte
Zase příště
Dnes jsme si pověděli, jak začít kódovat v HTML5, jak prohlížeče pracují s novými elementy a představili si šest základních. Příště se podíváme na spoustu dalších elementů, které HTML5 přináší.
Mezitím nezapomeňte nastudovat výše zmíněný Modernizr, a pokud vám zbude čas, tak si můžete přečíst historii toho, jak jsme vlastně k HTML5 došli (skvělé čtení v angličtině, ostatně celé Dive Into HTML5 od Marka Pilgrima stojí za přečtení).
Perexový obrázek pro tento seriál vytvořil Tibor Vizi. Děkujeme.
Kurz SEO - Praha, Brno
- Jak fungují vyhledávače a co od nich můžete očekávat.
- Analýza klíčových slov - kde hledat, jak slova vybrat, jak optimalizovat.
- Metody linkbuildingu - jak získat zpětné odkazy aniž byste za ně museli platit.
- Vyhodnocování SEO - nesledujte jen pozice.
Akce: Využijte last minute slevu na školení v Brně!
Seriál Webdesignérův průvodce po HTML5
- Webdesignérův průvodce po HTML5 - díl nultý
- Webdesignérův průvodce po HTML5 - nová sémantika
- Webdesignérův průvodce po HTML5 - nová sémantika II
- Webdesignérův průvodce po HTML5 - pohyblivé obrázky
- Webdesignérův průvodce po HTML5 - používáme pohyblivé obrázky
Přehled názorů
Tento text je již více než dva měsíce starý. Chcete-li na něj reagovat v diskusi, pravděpodobně vám již nikdo neodpoví. Pro řešení aktuálních problémů doporučujeme využít naše diskusní fórum.
