Navigace: Domů Dive Into HTML5


Co to všechno znamená?

 

Jdeme na to

Tato kapitola vezme HTML stránku, na které není vůbec nic špatného, a zlepší ji. Některé části se zkrátí. Jiné se prodlouží. A všechno bude více sémantické. Bude to úchvatné.

Tohle je naše stránka. Naučte se ji. Žijte s ní. Mějte ji rádi. Otevřete ji v novém okně a nevracejte se, dokud jste si alespoň jednou neprohlédli její zdrojový kód.

Typ dokumentu – doctype

Pěkně od začátku:

<!DOCTYPE html
          PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Říká se tomu „typ dokumentu (doctype)“. Skrývá se za ním dlouhá historie – a černá magie. Když vývojáři Microsoftu pracovali na Internet Exploreru 5 pro Mac, narazili na překvapivý problém. Připravovaná verze jejich prohlížeče podporovala standardy o tolik lépe, že se starší stránky přestaly zobrazovat správně. Přesněji řečeno, ony se zobrazovaly správně (podle specifikací), ale uživatelé čekali, že se budou zobrazovat nesprávně. Autoři stránek totiž počítali s chybami tehdejších prohlížečů, zejména Netscape 4 a Internet Explorer 4. IE5/Mac byl tak pokročilý, že vlastně rozbil web.

Microsoft přišel s neobvyklým řešením. IE5/Mac před zobrazením stránky prozkoumal „doctype“, který zpravidla bývá v prvním řádku HTML kódu (ještě před prvkem <html>). Starší stránky (které spoléhaly na zobrazovací chyby starších prohlížečů) obvykle neobsahovaly žádný typ dokumentu. IE5/Mac tyto stránky zobrazil stejně jako starší prohlížeče. Pokud chtěl autor stránky „aktivovat“ podporu nových standardů, musel to dát najevo a poskytnout před prvkem <html> správný typ dokumentu.

Myšlenka se rozšířila jako požár a všechny hlavní prohlížeče brzy měly dva režimy: „podivný režim (quirks mode)“ a „standardní režim“. Řeč je o webu, takže se věci samozřejmě brzy vymkly z rukou. Když se Mozilla snažila vydat verzi 1.1, zjistila, že existují stránky zobrazované ve „standardním režimu“, které ale ve skutečnosti počítají s určitou konkrétní chybou. Mozilla jednoduše opravila své zobrazování, aby chybu odstranila, a rázem se rozpadly tisíce stránek. Takže byl vytvořen – opravdu si nevymýšlím – „skoro standardní režim“.”

Henri Sivonen ve své významné práci Activating Browser Modes with Doctype shrnuje různé režimy:

Podivný režim (quirks mode)
V podivném režimu prohlížeče porušují aktuální specifikace webových formátů, aby zabránily „poškození“ stránek vytvořených podle zvyklostí převládajících v pozdních 90. letech.
Standardní režim
Ve standardním režimu se prohlížeče snaží v rámci svých možností poskytnout zpracování podle platných specifikací pro korektní dokumenty. HTML5 tento režim označuje jako „nepodivný (no quirks mode)“.
Skoro standardní režim
Firefox, Safari, Chrome, Opera (od verze 7.5) a IE8 mají také režim známý jako „skoro standardní“, který svislé rozměry tabulek implementuje tradičně, místo aby se striktně držel specifikace CSS2. HTML5 mu říká „trochu podivný režim (limited quirks mode)“.

(Doporučuji přečíst si zbytek Henriho článku, protože silně zjednodušuji. Dokonce i v IE5/Mac existovalo několik starších typů dokumentu, které nebyly dost daleko na to, aby aktivovaly standardní režim. Postupem času seznam chyb rostl a s ním i seznam typů dokumentu, které vyvolají „podivný režim“. Když jsem je naposledy zkoušel spočítat, existovalo 5 typů spouštějících „skoro standardní režim“ a 73, které vyvolaly „podivný režim“. Ale pravděpodobně jsem nějaké přehlédl a raději se ani nesnažím mluvit o blázinci, který provozuje Internet Explorer 8 při přepínání mezi svými čtyřmi – čtyřmi! – různými režimy. Tady je diagram. Zničte to. Spalte to.)

Tak tedy. Kde jsme skončili? Aha, typ dokumentu:

<!DOCTYPE html
          PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Tohle je jeden z 15 typů vyvolávajících „standardní režim“ ve všech moderních prohlížečích. Není na něm nic špatného. Pokud se vám líbí, nechte si ho. Nebo ho můžete vyměnit za typ dokumentu pro HTML5, který je kratší, sladší a také vyvolá „standardní režim“ ve všech moderních prohlížečích.

Tohle je doctype pro HTML5:

<!DOCTYPE html>

To je celé. Jen 15 znaků. Je tak jednoduchý, že ho dokážete napsat z hlavy a neuděláte chybu.

Kořenový prvek

stom na kopci

HTML stránka je sekvencí vnořených prvků. Celá její struktura připomíná strom. Některé prvky jsou „sourozenci“ jako dvě větve, které vyrůstají ze stejného kmene. Některé prvky jsou „dětmi“ jiných prvků, jako když menší větev vyrůstá z větší větve. (Funguje to i obráceně; prvek, který obsahuje jiný prvek, je nazýván „rodičem“ uzlů představujících jeho přímé děti a „předkem“ svých vnoučat.) Bezdětné prvky se nazývají „listy“. Nejvnějšnější prvek, který je předkem všech ostatních prvků stránky, se nazývá „kořenový prvek“. Kořenovým prvkem HTML stránky je vždy <html>.

Na této ukázkové stránce, vypadá kořenový prvek následovně:

<html xmlns="http://www.w3.org/1999/xhtml"
      lang="en"
      xml:lang="en">

Na jeho kódu není nic špatného. Zase, pokud se vám líbí, nechte si ho. Je to validní HTML5. Nicméně některé jeho části v HTML5 už nejsou potřeba, takže se jejich odstraněním dá ušetřit pár bajtů.

První věcí k diskusi je atribut xmlns. Je pozůstatkem XHTML 1.0. Říká, že prvky na této stránce patří do jmenného prostoru XHTML, http://www.w3.org/1999/xhtml. Ale prvky HTML5 jsou vždy v tomto jmenném prostoru, takže už to nemusíme explicitně deklarovat. Vaše HTML5 stránka bude ve všech prohlížečích fungovat zcela stejně, ať tento atribut uvedete nebo ne.

Po zahození atributu xmlns nám zůstane tento kořenový prvek:

<html lang="en" xml:lang="en">

Oba jeho atributy lang a xml:lang definují jazyk této HTML stránky. (en znamená „English“. Nepíšete anglicky? Najděte si kód pro svůj jazyk.) Proč dva atributy pro totéž? Opět se jedná o pozůstatek XHTML. V HTML5 má nějaký účinek jen atribut lang. Můžete atribut xml:lang zachovat, pokud chcete, ale pokud to uděláte, musíte zajisit, aby obsahoval stejnou hodnotu jako atribut lang.

Aby se usnadnila migrace z XHTML, autoři mohou v HTML prvcích uvnitř HTML dokumentu uvést atribut bez jmenného prostoru, bez prefixu a s přesným lokálním jménem "xml:lang", ale tyto atributy smí být uvedeny jen pokud je také uveden atribut lang bez jmenného prostoru a oba atributy musí mít stejnou hodnotu při porovnání v ASCII nerozlišujícím malá a velká písmena. Atribut s přesným lokálním jménem "xml:lang" bez jmenného prostoru a bez prefixu nemá žádný vliv na jazykové zpracování.

Jste připraveni ho zahodit? Nic nezkazíte, prostě nic nedělejte. Ještě, ještě… hotovo! Zůstal nám tenhle kořenový prvek:

<html lang="en">

Víc už nemusím říkat.

Prvek <head>

8 mužů zezadu

Prvním dítětem kořenového prvku je obvykle prvek <head>. Obsahuje metadata – informace o stránce, nikoli její vlastní tělo. (Tělo stránky obsahuje, nepříliš překvapivě, prvek <body>.) Samotný prvek <head> je celkem nudný a v HTML5 se nijak zajímavě nezměnil. Dobroty jsou uvnitř prvku <head>. A proto se opět obrátíme na naši ukázkovou stránku:

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>My Weblog</title>
  <link rel="stylesheet" type="text/css" href="style-original.css" />
  <link rel="alternate" type="application/atom+xml"
                        title="My Weblog feed"
                        href="/feed/" />
  <link rel="search" type="application/opensearchdescription+xml"
                        title="My Weblog search"
                        href="opensearch.xml"  />
  <link rel="shortcut icon" href="/favicon.ico" />
</head>

Pro začátek: prvek <meta>.

Kódování znaků

Když uvažujete o „textu“, pravděpodobně uvažujete o „znacích a symbolech, které vidím na obrazovce svého počítače“. Ale počítače nepracují se znaky a symboly, pracují s bity a bajty. Každý kousek textu, který jste kdy viděli na počítačové obrazovce, je ve skutečnosti uložen v určitém kódování znaků. Existují stovky různých znakových kódování, některá jsou optimalizována pro konkrétní jazyky, jako je ruština, čínština nebo angličtina, jiná lze použít pro více jazyků. Kódování znaků zhruba řečeno poskytuje mapování mezi tím co vidíte na obrazovce a tím co váš si počítač ukládá do paměti a na disk.

Ve skutečnosti je to ještě složitější. Stejný znak se může vyskytovat v několika kódováních, ale každé z nich může používat jinou sekvenci bajtů k uložení tohoto znaku do paměti nebo na disk. Takže můžete znakové kódování brát jako určitý druh dešifrovacího klíče pro text. Kdykoli vám někdo předá sekvenci bajtů a tvrdí, že to je „text“, potřebujete znát kódování znaků, které použil, abyste mohli dekódovat bajty na znaky a zobrazit je (nebo je jakkoli zpracovat).

Jak tedy váš prohlížeč vlastně určí kódování znaků pro proud bajtů, který mu posílá web server? Jsem rád, že se ptáte. Pokud se orientujete v HTTP hlavičkách, možná jste už viděli hlavičku podobnou této:

Content-Type: text/html; charset="utf-8"

Stručně řečeno říká, že server si myslí, že vám posílá HTML dokument a že ten dokument používá kódování znaků UTF-8. Naneštěstí jen pár autorů v celém tom úžasném webovém oceánu ovládá svůj HTTP server. Vezměte si třeba Blogger: obsah vytvářejí jednotlivci, ale server provozuje Google. Proto HTML 4 poskytl způsob, jak specifikovat kódování znaků v samotném dokumentu. Tohle jste pravděpodobně viděli také:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Stručně řečeno říká, že autor stránky si myslí, že vytvořil HTML dokument používající kódování znaků UTF-8.

Obě techniky fungují i v HTML5. HTTP hlavička je preferovanou metodou a má přednost před značkou <meta>, pokud se vyskytnou obě. Ne každý ale může nastavovat HTTP hlavičky, takže <meta> zůstává k dispozici. Ve skutečnosti se v HTML5 trochu zjednodušila. Nyní vypadá takhle:

<meta charset="utf-8" />

Funguje ve všech prohlížečích. Odkud zjednodušená syntaxe pochází? Tady je nejlepší vysvětlení, které jsem našel:

Důvodem pro kombinaci atributů <meta charset=""> je, že ji prohlížeče už implementují, protože lidé mají sklon vynechávat uvozovky, jako:

<META HTTP-EQUIV=Content-Type CONTENT=text/html; charset=ISO-8859-1>

Existuje dokonce několik testovacích stránek na <meta charset>, pokud nevěříte, že se prohlížeče takto chovají.

Zeptejte se profesora Značky

OT: Nikdy nepoužívám legrační znaky. Musím přesto deklarovat své kódování znaků?

OD: Ano! Měli byste vždy specifikovat kódování znaků na každé HTML stránce, kterou poskytujete. Chybějící specifikace kódování může vést k bezpečnostním rizikům.

Abych to shrnul: kódování znaků je složité a nezjednodušilo se během desítek let mizerně psaných programů používaných autory školenými v kopírování a vkládání. Měli byste vždy specifikovat kódování znaků v každém HTML dokumentu, jinak se přihodí ošklivé věci. Můžete to udělat HTTP hlavičkou Content-Type, deklarací <meta http-equiv> nebo kratší deklarací <meta charset>, ale udělejte to, prosím. Web vám bude vděčný.

Normální odkazy (<a href>) jednoduše ukazují na jinou stránku. Vztah odkazu umožňuje vysvětlit, proč na danou stránku odkazujete. Dokončují větu „Na tuto stránku odkazuji, protože…“

A tak dále. HTML5 rozděluje vztahy odkazů do dvou kategorií:

Použitím prvku link lze vytvořit dvě kategorie odkazů. Odkazy na vnější zdroje jsou odkazy na zdroje, jež mají být použity k rozšíření aktuálního dokumentu, zatímco hyperodkazy jsou odkazy na jiné dokumenty. …

Přesné chování odkazů na externí zdroje závisí na konkrétním vztahu, definovaném pro příslušný typ odkazu.

V příkladech, které jsem před chvílí uvedl, pouze první (rel="stylesheet") představuje odkaz na externí zdroj. Ostatní jsou hyperodkazy na jiné dokumenty. Možná je budete chtít následovat a možná ne, ale nejsou potřeba pro zobrazení aktuální stránky.

Vztahy odkazů jsou nejčastěji k vidění u prvků <link> uvnitř <head> na začátku stránky. Některé vztahy lze použít také pro prvky <a>, což je ale dost neobvyklé, i když povolené. HTML5 také připouští určité vztahy pro prvky <area>, ale to je ještě méně obvyklé. (HTML 4 nepřipouštělo atribut rel u prvků <area>.) Podívejte se na kompletní tabulku vztahů pro odkazy a ověřte si, kde můžete používat jednotlivé hodnoty rel.

Zeptejte se profesora Značky

OT: Mohu vytvářet své vlastní vztahy pro odkazy?

OT: Vypadá to, že zásoba nápadů na nové vztahy odkazů je nevyčerpatelná. WHATWG se snaží zabránit lidem udělat v nich naprostý guláš, a proto spravuje registr navržených hodnot atributu rel a definuje proces jejich schvalování.

rel = stylesheet

Podívejme se na první vztah odkazu na naší ukázkové stránce:

<link rel="stylesheet" href="style-original.css" type="text/css" />

Jedná se o nejčastěji používaný vztah odkazu na světě (doslova). <link rel="stylesheet"> slouží pro odkaz na CSS pravidla uložená v samostatném souboru. V HTML5 jej můžete drobně vylepšit vypuštěním atributu type. Pro web existuje jen jeden stylový jazyk, CSS, takže je výchozí hodnotou atributu type. Funguje to ve všech prohlížečích. (Předpokládám, že by někdo jednou mohl vymyslet nový stylový jazyk, ale pokud se to stane, jednoduše zase přidáte atribut type.)

<link rel="stylesheet" href="style-original.css" />

rel = alternate

Pokračujeme s naší ukázkovou stránkou:

<link rel="alternate"
       type="application/atom+xml"
       title="My Weblog feed"
       href="/feed/" />

Tento vztah odkazu je také poměrně běžný. <link rel="alternate"> v kombinaci s médii typu RSS nebo Atom umožňuje tak zvané „automatické objevování kanálů“. Umožňuje čtečkám syndikovaných zdrojů (jako je Google Reader) zjistit, že tento web obsahuje kanál ohlašující nové příspěvky. Většina prohlížečů také podporuje automatické objevování a zobrazuje speciální ikonu poblíž URL. (Na rozdíl od rel="stylesheet" zde záleží na atributu type. Nevynechávejte ho!)

Vztah odkazu rel="alternate" vždy býval podivným míšencem různých způsobů použití, i v HTML 4. V HTML5 došlo k vyjasnění jeho definice a k jejímu rozšíření, aby přesněji popisovala existující webový obsah. Jak jste právě viděli, použití rel="alternate" ve spojení a type=application/atom+xml indikuje Atom kanál pro aktuální stránku. rel="alternate" však můžete použít v kombinaci s jinými hodnotami stributu type k označení stejného obsahu v jiném formátu, například PDF.

HTML5 také ukončilo dlouhodobý zmatek v odkazech na překlady dokumentů. HTML 4 požaduje, abyste jazyk odkazovaného dokumentu určili atributem lang ve spojení s rel="alternate", jenže to je špatně. Seznam chyb v HTML 4 uvádí čtyři naprosté chyby ve specifikaci HTML 4. Jednou z nich je definice jazyka dokumentu odkazovaného pomocí link="alternate". Správný způsob, popsaný v seznamu chyb HTML 4 a nyní i v HTML5, je použít atribut hreflang. Naneštěstí nebyly opravy chyb nikdy zpětně začleněny do specifikace HTML 4, protože na HTML už nepracuje nikdo z pracovní skupiny W3C pro HTML.

Další vztahy odkazů v HTML5

rel="author" se používá pro odkaz na informace o autorovi stránky. Může se jednat o mailto adresu, ale není to povinné. Může jednoduše odkazovat na kontaktní formulář nebo stránku „o autorovi“.

rel="external" „signalizuje, že odkaz vede na dokument, který nepatří do webu, jehož je tato stránka součástí.“ Myslím, že jako první jej zpopularizoval WordPress, který jej používal u odkazů vložených komentujícími.

dívka krmící ptáky

HTML 4 definoval rel="start", rel="prev" a rel="next" určující vztahy mezi stránkami, jež patří do určité posloupnosti (jako kapitoly v knize nebo třeba příspěvky v blogu). Jediný, který kdy byl používán korektně, je rel="next". Lidé psali rel="previous" místo rel="prev", používali rel="begin" a rel="first" místo rel="start" a rel="end" místo rel="last". Ó, a – úplně sami – vytvořili rel="up" pro odkaz na „rodičovskou“ stránku.

HTML5 obsahuje rel="first", což byla nejběžnější variace z různých způsobů, jak říci „první stránka v sérii“. (rel="start" je nevyhovující synonymum poskytnuté pro zpětnou kompatibilitu.) Obsahuje také rel="prev" a rel="next", stejně jako HTML 4, a podporuje rel="previous" pro zpětnou kompatibilitu, stejně jako rel="last" (poslední v posloupnosti, opak rel="first") a rel="up".

O rel="up" je nejlepší uvažovat jako o drobečkové navigaci (nebo si to alespoň představovat). Vaše domácí stránka je pravděpodobně první stránkou mezi drobečky a aktuální stránka je na jejich konci. rel="up" ukazuje na předposlední stránku v drobečcích.

rel="icon" je druhým nejpopulárnějším vztahem odkazů po rel="stylesheet". Obvykle je k vidění společně s shortcut, asi takhle:

<link rel="shortcut icon" href="/favicon.ico">

Všechny hlavní prohlížeče podporují tohle použití přiřazující malou ikonu ke stránce. Je obvykle zobrazena v adresním řádku prohlížeče vedle URL, v panelu prohlížeče, případně v obou.

V HTML5 máme novinku: atributem sizes lze ve spojení se vztahem icon oznámit velikost odkazované ikony.

rel="license" byl vymyšlen komunitou kolem mikroformátů. „Naznačuje, že odkazovaný dokument obsahuje licenci, pod níž je dotyčná stránka poskytována.“

rel="nofollow" „indikuje, že autor nebo vydavatel stránky tento odkaz nepodporuje, nebo že odkaz byl vložen především jako důsledek komerčního vztahu mezi osobami spojenými s oběma stránkami.“ Byl vynalezen Googlem a standardizován mikroformátovou komunitou. WordPress přidává rel="nofollow" k odkazům vloženým komentujícími. Vychází z úvahy, že pokud odkazy s nofollow nemají vliv na PageRank, spammeři se přestanou snažit vkládat spamové komentáře do blogů. Nestalo se, ale rel="nofollow" zůstává.

rel="noreferrer" „označuje, že při následování odkazu by neměly být vyzrazeny žádné informace o odkazující stránce.“ V současnosti jej nepodporuje žádný dostupný prohlížeč, ale podpora byla nedávno doplněna do nočních překladů WebKitu, takže se časem objeví v Safari, Google Chrome a dalších klientech založených na WebKitu. [testovací stránka rel="noreferrer"]

rel="pingback" určuje adresu „pingback“ serveru. Jak vysvětluje specifikace Pingback, „Systém pingback představuje způsob jak automaticky informovat blog, když na něj odkáže jiný webový server. … Umožňuje zpětné odkazy – cestu, jak se vracet řetězcem odkazů, aniž by člověk musel všechny procházet.“ Blogovací systémy, zejména WordPress, implementují mechanismy pingback, aby upozorňovaly autory, že jste na ně odkázali ve svých nových příspěvcích do blogu.

pes na křesle

rel="prefetch" „naznačuje, že předběžné stažení daného zdroje a jeho uložení do vyrovnávací paměti bude nejspíš výhodné, protože je velmi pravděpodobné, že uživatel bude zdroj potřebovat“. Vyhledávače někdy přidávají <link rel="prefetch" href="URL nejlepšího výsledku hledání"> do stránky s výsledky hledání, pokud mají pocit, že nejlepší nalezená stránka je mnohem populárnější, než ty ostatní. Například: pomocí Firefoxu si nechte Googlem vyhledat CNN, podívejte se na zdrojový kód a hledejte slovo prefetch. Mozilla Firefox je jediný současný prohlížeč, který podporuje rel="prefetch".

rel="search" „signalizuje, že odkazovaný dokument poskytuje rozhraní výlučně pro hledání v dokumentu a s ním spojených zdrojích“. Pokud chcete, aby rel="search" dělalo něco užitečného, mělo by ukazovat na OpenSearch dokument, který popisuje, jak má prohlížeč sestavit URL k vyhledání určitého slova na aktuálním webu. OpenSearch (a rel="search" odkazy, které vedou na popisné dokumenty ve formátu OpenSearch) je podporován v Microsoft Internet Exploreru od verze 7 a v Mozilla Firefoxu od verze 2.

rel="sidebar" „indikuje, že odkazovaný dokument, pokud bude stažen, má být zobrazen ve vedlejším prohlížecím kontextu (pokud je to možné) místo v aktuálním prohlížecím kontextu“. Co to znamená? V Opeře a Mozilla Firefoxu to znamená „pokud na odkaz klikne, vyzvi uživatele k vytvoření záložky, která, když bude vybrána z nabídky záložek, otevře odkazovanou stránku v postranní liště prohlížeče“. (Opera ji vlastně nazývá „panel“ místo „postranní lišta“.) Microsoft Explorer, Safari a Chrome rel="sidebar" ignorují a prostě zacházejí s odkazem úplně normálně. [testovací stránka rel="sidebar"]

rel="tag" „naznačuje, že štítek reprezentovaný odkazovaným dokumentem platí pro aktuální dokument“. Označování štítky (klíčovými slovy pro kategorie) s atributem rel vymyslelo Technorati, aby si usnadnilo kategorizaci blogových příspěvků. Rané blogy a návody je proto označují za „Technorati štítky“. (Čtete dobře: komerční firma přesvědčila celý svět, aby přidával metadata, která té firmě usnadnila práci. Skvělá práce, když něco takového dokážete!) Syntaxe byla později standardizována komunitou mikroformátů, kde jí jednoduše říkali rel="tag". Většina blogovacích systémů, které umožňují příspěvkům přiřazovat kategorie, klíčová slova nebo štítky, je označuje odkazy s rel="tag". Prohlížeče s nimi nezacházejí nijak speciálně; byly vlastně navrženy, aby napověděly vyhledávacím strojům, čeho se daná stránka týká.

Nové sémantické prvky v HTML5

HTML5 se neomezuje na zkracování existujícího kódu (i když v téhle oblasti dělá opravdu dost). Definuje také nové sémantické prvky.

<section>
Prvek section představuje obecný úsek dokumentu nebo aplikace. Úsek v tomto kontextu znamená tématické seskupení obsahu, typicky s nadpisem. Za příklady úseků poslouží kapitoly, panely v dialogovém okně uspořádaném do panelů nebo číslované části diplomové práce. Domácí stránka webu může být rozdělena do úseků pro úvod, aktuality a kontaktní informace.
<nav>
Prvek nav reprezentuje část stránky, která odkazuje na další stránky, nebo na části aktuální stránky: část obsahující navigační odkazy. Ne všechny skupiny odkazů na stránce musí být uvnitř prvku nav – pouze části tvořící hlavní navigační bloky jsou vhodné pro prvek nav. Například je běžné umisťovat do zápatí stránek krátký seznam odkazů na společné stránky webu, jako jsou podmínky použití, domácí stránka nebo informace o autorských právech. Pro tyto případy stačí samotný prvek footer, bez prvku nav.
<article>
Prvek article představuje část stránky, která tvoří samostatný celek v dokumentu, stránce, aplikaci nebo webu a která je určena k nezávislé distribuci či opakovanému požití, například k syndikaci. Může se jednat o příspěvek ve fóru, časopisecký nebo novinový článek, záznam v logu webu, uživatelský komentář, interaktivní widget nebo gadget či jakýkoli jiný prvek nebo obsah.
<aside>
Prvek aside představuje část stránky tvořenou materiálem, který se dotýká materiálu kolem prvku aside, ale který je považován za oddělený od tohoto obsahu. Tyto části jsou v tištěné typografii často reprezentovány jako postranní pruhy. Prvek lze použít pro typografické efekty, jako jsou citace vytažené z textu, komentáře na okraji, reklamy, skupiny prvků nav a pro další obsah, který je vnímán jako oddělený od vlastního obsahu stránky.
<hgroup>
Prvek hgroup reprezentuje nadpis části. Prvek se používá k seskupení několika prvků h1h6, když má nadpis několik úrovní, jako jsou podnadpisy, alternativní titulky nebo slogan.
<header>
Prvek header představuje skupinu úvodních nebo navigačních prostředků. Smyslem prvku header je obvykle obsahovat nadpis úseku (prvek h1h6 nebo hgroup), ale není to povinné. Lze jej použít také k obalení obsahu úseku, vyhledávacího formuláře nebo souvisejícího loga.
<footer>
Prvek footer představuje patičku pro nejbližšího předka představujícího část stránky, nebo pro celou stránku. Patička typicky obsahuje informace o své sekci, jako autora, odkazy na související dokumenty, autorská práva a podobně. Patičky se nemusí nutně vyskytovat na konci části, ale obvykle to tak bývá. Pokud prvek footer obsahuje celé úseky, představuje přílohy, rejstříky, tiráž, kompletní licenční ujednání a podobný materiál.
<time>
Prvek time znamená buď čas ve 24hodinovém formátu, nebo konkrétní datum podle gregoriánského kalendáře, případně doplněné o čas a časové pásmo.
<mark>
Prvek mark představuje část textu v dokumentu, označenou nebo zvýrazněnou ze účelem citace.

Vím, že se už nemůžete dočkat, až začnete tyhle nové prvky používat, jinak byste tuhle kapitolu nečetli. Ale nejdřív musíme absolvovat malou okliku.

Dlouhá odbočka o zacházení s neznámými prvky v prohlížečích

Každý prohlížeč má základní seznam HTML prvků, které podporuje. Například Mozilla Firefox má svůj seznam uložen v nsElementTable.cpp. Prvky, jež v něm nejsou obsaženy, jsou zpracovány jako „neznámé prvky“. Vztahují se k nim dva základní problémy:

  1. Jak by měl prvek vypadat? <p> implicitně vynechává mezeru nad a pod sebou, <blockquote> má odsazený levý okraj a <h1> je zobrazen velkým písmem. Ale jaký implicitní vzhled se má použít pro neznámé prvky?
  2. Jak má vypadat DOM tohoto prvku? nsElementTable.cpp v Mozille obsahuje informace o tom, co jednotlivé prvky mohou obsahovat. Vložíte-li tento kód <p><p>, druhý odstavcový prvek implicitně uzavře první, takže oba skončí jako sourozenci, nikoli jako rodič a dítě. Ale pokud napíšete <p><span>, span neukončí odstavec, protože Firefox ví, že <p> je blokový prvek, který může obsahovat řádkový prvek <span>. Proto <span> skončí v DOMu jako dítě <p>.

Různé prohlížeče zodpovídají tyto otázky odlišně. (Šokující, já vím.) Mezi hlavními prohlížeči odpovídá na obě otázky nejproblematičtěji Microsoft Explorer, ale každý prohlížeč potřebuje trochu pomoci.

Odpověď na první otázku může být celkem jednoduchá: Nepřiřazujte neznámým prvkům žádný speciální vzhled. Prostě je nechte zdědit aktuální hodnoty CSS vlastností, kdekoli se na stránce vyskytnou, a nechte autora stránky určit celý vzhled pomocí CSS. Takhle to v zásadě funguje, ale je tu ukrytý malý háček, o kterém byste měli vědět.

Professor Značka říká

Všechny prohlížeče zobrazují neznámé prvky jako řádkové, tedy jako by pro ně CSS obsahovalo pravidlo display: inline.

HTML5 definuje několik nových prvků, které patří mezi blokové. To znamená, že mohou obsahovat jiné blokové prvky a prohlížeče dodržující HTML5 je implicitně budou zobrazovat jako display: block. Pokud je chcete používat ve starších prohlížečích, musíte jim definovat styl zobrazení sami:

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

(Tento kód pochází z předpisu pro reset HTML5 od Riche Clarka, který dělá i řadu dalších věcí přesahujících záběr této kapitoly.)

Ale počkejte, bude hůř! Internet Explorer před verzí 9 nepřiřazoval neznámým prvkům žádný vzhled. Například pokud jste vytvořili tento kód:

<style type="text/css">
  article { display: block; border: 1px solid red }
</style>
...
<article>
<h1>Welcome to Initech</h1>
<p>This is your <span>first day</span>.</p>
</article>

Internet Explorer (až po verzi 8 včetně) nezpracoval <article> jako blokový prvek, ani kolem něj nevytvořil červený rámeček. Všechna stylová pravidla prostě ignoroval. Internet Explorer 9 tento problém odstranil.

Druhým problémem je DOM, který prohlížeč vytvoří, když narazí na neznámé prvky. Opět jsou nejproblematičtější starší verze Internet Exploreru (před verzí 9, která opravila i tenhle problém). Pokud IE 8 nezná jméno prvku, vloží jej do DOMu jako prázdný prvek bez dětí. Všechny prvky, které byste očekávali jako děti neznámého prvku, budou ve skutečnosti vloženy jako jeho sourozenci.

Následující kousek poctivého ASCII umění ilustruje rozdíl. Tento DOM předepisuje HTML5:

article
|
+--h1 (dítě article)
|  |
|  +--textový uzel "Welcome to Initech"
|
+--p (dítě article, sourozenec h1)
   |
   +--textový uzel "This is your "
   |
   +--span
   |  |
   |  +--textový uzel "first day"
   |
   +--textový uzel "."

Ale Internet Explorer ve skutečnosti vytvoří tenhle DOM:

article (bezdětný)
h1 (sourozenec article)
|
+--textový uzel "Welcome to Initech"
p (sourozenec h1)
|
+--textový uzel "This is your "
|
+--span
|  |
|  +--textový uzel "first day"
|
+--textový uzel "."

Tenhle problém se dá úžasně obejít. Když pomocí JavaScriptu vytvoříte fiktivní prvek <article> dříve než jej použijete na stránce, Internet Explorer pak prvek <article> magicky rozpozná a nechá vás definovat jeho vzhled pomocí CSS. Nemusíte ani vkládat fiktivní prvek do DOMu. Jen jediné (na stránku) vytvoření prvku stačí k tomu, aby se IE naučil definovat styl prvku, který nezná.

<html>
<head>
<style>
  article { display: block; border: 1px solid red }
</style>
<script>document.createElement("article");</script>
</head>
<body>
<article>
<h1>Welcome to Initech</h1>
<p>This is your <span>first day</span>.</p>
</article>
</body>
</html>

Funguje to ve všech verzích Internet Exploreru až po IE 6! Můžeme tuto techniku rozšířit a vytvořit fiktivní kopie všech nových HTML5 prvků najednou – opět nejsou vloženy do DOMu, takže je nikdy neuvidíte – a pak je jednoduše používat, aniž bychom se museli starat o prohlížeče nerozumějící HTML5.

Remy Sharp udělal přesně tohle ve svém příhodně pojmenovaném skriptu zpřístupňujícím HTML5. Skript prošel více než tuctem revizí od doby, kdy jsem začal psát tuhle knížku, nicméně tohle je jeho základní idea:

<!--[if lt IE 9]>
<script>
  var e = ("abbr,article,aside,audio,canvas,datalist,details," +
    "figure,footer,header,hgroup,mark,menu,meter,nav,output," +
    "progress,section,time,video").split(',');
  for (var i = 0; i < e.length; i++) {
    document.createElement(e[i]);
  }
</script>
<![endif]-->

Kousky <!--[if lt IE 9]> a <![endif]--> představují podmíněné komentáře. Internet Explorer je interpretuje jako příkaz if: „pokud je aktulním prohlížečem Internet Explorer verze nižší než 9, proveď tento blok.“ Všechny ostatní prohlížeče budou brát celý blok jako HTML komentář. Ve výsledku Internet Explorer (až po verzi 8 včetně) provede tento skript, zatímco ostatní prohlížeče jej budou zcela ignorovat. Díky tomu se stránka načte rychleji v prohlížečích, které tenhle hack nepotřebují.

Vlastní JavaScriptový kód je celkem přímočarý. Proměnná e se stane polem řetězců "abbr", "article", "aside" a tak dál. Následně toto pole procházíme v cyklu a vytváříme každý z vyjmenovaných prvků voláním document.createElement(). Protože ignorujeme návratovou hodnotu, prvky se nikdy nevloží do DOMu. Ale stačí to k tomu, aby s nimi Internet Explorer začal zacházet způsobem, který chceme, když je později doopravdy použijeme na stránce.

To „později“ je důležité. Skript musí být na začátku vaší stránky, nejlépe uvnitř prvku <head>, nikoli na konci. Díky tomu Internet Explorer skript provede před analýzou vašich značek a atributů. Kdybyste skript vložili na konec stránky, přišel by moc pozdě. Internet Explorer by už dezinterpretoval váš kód a vytvořil špatný DOM, nevrátil by se zpět a neupravil jej jen kvůli tomuhle skriptu.

Remy Sharp skript „minifikoval“ a umístil na Google Project Hosting. (Pokud by vás to zajímalo, vlastní skript má otevřený zdrojový kód s licencí MIT, takže jej můžete použít v libovolném projektu.) Chcete-li, můžete skript dokonce vložit přímo a odkázat se na tuto hostovanou verzi, asi takhle:

<head>
  <meta charset="utf-8" />
  <title>My Weblog</title>
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

A teď můžeme začít používat nové sémantické prvky z HTML5.

Nadpisy

kamelot prodávající noviny

Vraťme se k naší ukázkové stránce. Konkrétně se teď podívejme jen na její nadpisy:

<div id="header">
  <h1>My Weblog</h1>
  <p class="tagline">A lot of effort went into making this effortless.</p>
</div>

…

<div class="entry">
  <h2>Travel day</h2>
</div>

…

<div class="entry">
  <h2>I'm going to Prague!</h2>
</div>

Na kódu není nic špatného. Pokud se vám líbí, můžete si ho nechat. Je to validní HTML5. Ale HTML5 přidává pár sémantických prvků pro nadpisy a úseky.

Nejprve se zbavme <div id="header">. Je to běžně používaný vzor, ale neznamená nic. Prvek div ani atribut id nemají definován žádný význam. (Uživatelští agenti si nesmí odvozovat žádné významy z hodnot atributu id.) Můžete jej změnit na <div id="shazbot"> a bude mít stejnou sémantickou hodnotu, tedy žádnou.

HTML5 definuje pro tento účel prvek <header>. Specifikace HTML5 obsahuje příklady rálného použití prvku <header>. Takhle by to vypadalo na naší ukázkové stránce:

<header>
  <h1>My Weblog</h1>
  <p class="tagline">A lot of effort went into making this effortless.</p>
  …
</header>

To je dobré. Říká každému, kdo se o to zajímá, že se jedná o nadpis. Ale co ten slogan? Další běžný vzor, který až do teď neměl standardní kód. Je těžké ho označit. Slogan je jako podnadpis, ale je připojen k primárnímu nadpisu. Jedná se vlastně o podnadpis, který nevytváří vlastní sekci.

Hlavičkové prvky jako <h1> a <h2> dávají vaší stránce strukturu. Dohromady tvoří osnovu, kterou můžete použít k vizualizaci (nebo navigaci) své stránky. Obrazovkové čtečky využívají osnovu dokumentu, aby usnadnily nevidomým navigaci po vaší stránce. Existují online nástroje a rozšíření prohlížečů, které vám pomohou vizualizovat osnovu dokumentu.

V HTML 4 představovaly prvky <h1><h6> jediný způsob, jak vytvořit osnovu dokumentu. Osnova ukázkové stránky vypadá asi takto:

My Weblog (h1)
   |
   +--Travel day (h2)
   |
   +--I'm going to Prague! (h2)

To je fajn, ale znamená to, že nemáme jak označit slogan. „A lot of effort went into making this effortless.“ Pokud bychom jej zkusili označit jako <h2>, přidal by uzel navíc do osnovy:

My Weblog (h1)
   |
   +--A lot of effort went into making this effortless. (h2)
   |
   +--Travel day (h2)
   |
   +--I'm going to Prague! (h2)

Ale to neodpovídá struktuře dokumentu. Slogan nepředstavuje úsek textu, je to jen podnadpis.

Možná bychom mohli označit slogan jako <h2> a nadpisy všech článků jako <h3>? Ne, to je ještě horší:

My Weblog (h1)
   |
   +--A lot of effort went into making this effortless. (h2)
         |
         +--Travel day (h3)
         |
         +--I'm going to Prague! (h3)

Pořád máme v osnově jeden uzel navíc, navíc však „ukradl“ děti, které právoplatně patří kořenovému uzlu. Problém se nachází zde: HTML 4 nenabízí žádný způsob, jak označit slogan aniž by byl přidán do osnovy dokumentu. Ať zkoušíme věci uspořádat jak chceme, „A lot of effort went into making this effortless“ skončí v grafu. A proto skončíme u sémanticky bezvýznamného kódu typu <p class="tagline">.

HTML5 nabízí řešení: prvek <hgroup>. Funguje jako obal dvou nebo více souvisejících prvků s nadpisy. Co znamená „souvisejících“? To znamená, že dohromady tvoří jen jeden uzel v osnově dokumentu.

Vezměme tenhle kód:

<header>
  <hgroup>
    <h1>My Weblog</h1>
    <h2>A lot of effort went into making this effortless.</h2>
  </hgroup>
  …
</header>

…

<div class="entry">
  <h2>Travel day</h2>
</div>

…

<div class="entry">
  <h2>I'm going to Prague!</h2>
</div>

Vytvoří následující osnovu dokumentu:

My Weblog (h1 z příslušné hgroup)
   |
   +--Travel day (h2)
   |
   +--I'm going to Prague! (h2)

Můžete si otestovat své stránky v HTML5 Outlineru, abyste si ověřili, že používáte nadpisové prvky správně.

Články

Pokračujeme s naší ukázkovou stránkou a podíváme se, co se dá udělat s kódem:

<div class="entry">
  <p class="post-date">October 22, 2009</p>
  <h2>
    <a href="#"
       rel="bookmark"
       title="link to this post">
       Travel day
    </a>
  </h2>
  …
</div>

Opět se jedná o validní HTML5. Ale HTML5 nabízí konkrétnější prvek pro běžný případ vyznačení článku na stránce – vhodně pojmenovaný prvek <article>.

<article>
  <p class="post-date">October 22, 2009</p>
  <h2>
    <a href="#"
       rel="bookmark"
       title="link to this post">
       Travel day
    </a>
  </h2>
  …
</article>

Oh, ale není to až tak jednoduché. Měl bych udělat ještě jednu změnu. Nejdříve vám ji předvedu a potom vysvětlím:

<article>
  <header>
    <p class="post-date">October 22, 2009</p>
    <h1>
      <a href="#"
         rel="bookmark"
         title="link to this post">
         Travel day
      </a>
    </h1>
  </header>
  …
</article>

Všimli jste si? Změnil jsem prvek <h2> na <h1> a zabalil jej do prvku <header>. Použití <header> už jste viděli. Jeho účelem je obalit všechny prvky tvořící nadpis článku (v tomto případě jeho datum vydání a titulek). Ale…ale…ale… neměl by být v každém dokumentu jen jeden <h1>? Nerozbije to osnovu dokumentu? Ne, ale abychom pochopili proč, musíme se trochu vrátit.

V HTML 4 byly jedinou cestou k vytvoření osnovy dokumentu prvky <h1><h6>. Pokud jste chtěli mít v osnově jediný kořen, museli jste se v kódu omezit na jediný <h1>. Ale specifikace HTML5 definuje algoritmus pro vytvoření osnovy dokumentu, který zahrnuje i nové sémantické prvky jazyka. Algoritmus HTML5 říká, že prvek <article> vytváří novou sekci, která je novým uzlem v osnově dokumentu. A každá sekce může mít v HTML5 svůj vlastní prvek <h1>.

Jedná se o drastickou změnu proti HTML 4 a hned si řekneme, proč je k lepšímu. Mnohé webové stránky jsou generovány podle šablon. Z jednoho zdroje se vezme špetka obsahu o vloží sem do stránky, z jiného zdroje se vezme další trocha obsahu a vloží do stránky támhle. I mnohé návody jsou strukturovány stejně. „Tady máte nějaký HTML kód. Prostě jej zkopírujte do své stránky.“ To je v pořádku pro malé části obsahu, ale co když vkládaný kód tvoří celý úsek? V tom případě návod obvykle obsahuje něco jako „Tady máte nějaký HTML kód. Zkopírujte jej, vložte do textového editoru a opravte značky nadpisů tak, aby odpovídaly příslušné úrovni vnoření nadpisů na stránce, do níž kód vkládáte.“

Dovolte mi říci to jinak. HTML 4 nemá žádný obecný prvek pro nadpisy. Má šest přesně číslovaných nadpisových prvků, <h1><h6>, které musí být vnořeny přesně v uvedeném pořadí. To je průšvih, zejména když je vaše stránka „složena“, nikoli „napsána“. A tento problém řeší HTML5 novými prvky pro členění obsahu a novými pravidly pro stávající nadpisové prvky. Pokud používáte nové prvky pro členění, mohu vám nabídnout tento kód:

<article>
  <header>
    <h1>A syndicated post</h1>
  </header>
  <p>Lorem ipsum blah blah…</p>
</article>

a vy jej můžete zkopírovat a vložit beze změny kamkoli do své stránky. Skutečnost, že obsahuje prvek <h1>, ničemu nevadí, protože je celý obsažen uvnitř <article>. Prvek <article> definuje samostatný uzel v osnově dokumentu, prvek <h1> poskytuje titulek pro tento uzel a všechny ostatní prvky pro členění dokumentu na stránce zůstanou na stejné úrovni vnoření, na které byly předtím.

Professor Značka říká

Jako u všeho na webu je realita trochu složitější, než předstírám. Nové „explicitní“ prvky pro členění dokumentu (jako <h1> zabalené do <article>) mohou nečekanými způsoby reagovat se starými „implicitními“ prvky pro členění dokumentu (samotné <h1><h6>). Váš život bude jednodušší, pokud budete používat jedny nebo druhé, ale nikoli oboje zároveň. Pokud musíte na jedné stránce použít oboje, zkontrolujte si výsledek na the HTML5 Outlineru a ověřte si, že osnova vašeho dokumentu dává smysl.

Datum a čas

věž s hodinami

Je to vzrušující, co? Podle mě není vzrušující sjet nahý na lyžích Mount Everest a recitovat při tom americkou hymnu, ale je pořádně vzrušující, jak daleko se dá dotáhnout sémantický kód. Pojďme pokračovat s naší ukázkovou stránkou. Další řádek, na který se zaměřím, je tenhle:

<div class="entry">
  <p class="post-date">October 22, 2009</p>
  <h2>Travel day</h2>
</div>

Ten samý starý příběh, ne? Běžně používaný vzor – vyznačení data vydání článku –, který není podepřen žádnými sémantickými značkami, takže se autoři uchylují k obecným značkám s vlastními atributy class. Opět se jedná o validní HTML5. Nikdo po vás nepožaduje jeho změnu. Ale HTML5 poskytuje řešení přímo na míru tomuto případu: prvek <time>.

<time datetime="2009-10-22" pubdate>October 22, 2009</time>

Prvek <time> obsahuje tři části:

  1. Strojově čitelnou časovou značku
  2. Textový obsah čitelný pro člověka
  3. Volitelný příznak pubdate

V tomto příkladu atribut datetime určuje pouze datum, nikoli čas. Jeho formátem je čtyřciferný rok, dvojciferný měsíc a dvojciferný den, vzájemně oddělené pomlčkami:

<time datetime="2009-10-22" pubdate>October 22, 2009</time>

Pokud chcete zahrnout i čas, přidejte za datum písmeno T, za něj čas ve 24hodinovém formátu a za něj časové pásmo (posun času).

<time datetime="2009-10-22T13:59:47-04:00" pubdate>
  October 22, 2009 1:59pm EDT
</time>

(Formát data a času je dost pružný. Specifikace HTML5 obsahuje příklady validních řetězců pro data a časy.)

Všimněte si, že jsem změnil textový obsah mezi <time> a </time>, aby odpovídal strojově čitelné značce. Ve skutečnosti to není povinné. Text může obsahovat cokoli chcete, dokud poskytnete strojově čitelnou značku v atributu datetime. Takže toto je validní HTML5:

<time datetime="2009-10-22">minulý čtvrtek</time>

I tohle je validní HTML5:

<time datetime="2009-10-22"></time>

Posledním kouskem skládačky je atribut pubdate. Je to booleovský atribut, takže jej stačí jednoduše přidat, když jej potřebujete. Asi takto:

<time datetime="2009-10-22" pubdate>October 22, 2009</time>

Nemáte-li rádí „holé“ atributy, tento zápis je ekvivalentní:

<time datetime="2009-10-22" pubdate="pubdate">October 22, 2009</time>

Co atribut pubdate znamená? Jednu ze dvou věcí. Pokud se prvek <time> vyskytuje uvnitř prvku <article>, znamená, že tato časová značka představuje datum vydání článku. Pokud se prvek <time> nachází mimo <article>, znamená, že časová značka je datem vydání celého dokumentu.

Tady máme celý článek, upravený tak, aby využíval všechny výhody HTML5:

<article>
  <header>
    <time datetime="2009-10-22" pubdate>
      October 22, 2009
    </time>
    <h1>
      <a href="#"
         rel="bookmark"
         title="link to this post">
         Travel day
      </a>
    </h1>
  </header>
  <p>Lorem ipsum dolor sit amet…</p>
</article>

muž řídící plachetnici na vodě

Jednou z nejdůležitějších částí každého webu je navigační lišta. CNN.com má na každé stránce nahoře „záložky“, které odkazují na různé zpravodajské sekce – „Technika“, „Zdraví“, „Sport“ atd. Stránka s výsledky hledání na Google obsahuje nahoře podobný proužek, který vám umožňuje vyhledávat v různých službách Google – „Obrázky“, „Videa“, „Mapy“ atd. A naše ukázková stránka má v záhlaví navigační lištu, která obsahuje odkazy na různé části hypotetického webu – „domů“, „blog“, „galerie“ a „o nás“.

Kód této navigační lišty původně vypadal takto:

<div id="nav">
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">blog</a></li>
    <li><a href="#">gallery</a></li>
    <li><a href="#">about</a></li>
  </ul>
</div>

Zase se jedná o validní HTML5. Ale i když ji kód definuje jako seznam se čtyřmi položkami, nic v tomto seznamu neříká, že se jedná o součást navigace webu. Vizuálně to můžete odhadnout podle umístění v záhlaví stránky a podle textu odkazů. Ale sémanticky neexistuje nic, co by tento seznam odkazů odlišilo od jakéhokoli jiného.

Koho zajímá sémantika navigace webu? Za prvé handicapované uživatele. Proč? Zvažte tento scénář: máte omezenou pohyblivost a je pro vás obtížné nebo nemožné používat myš. Abyste ji nahradili, můžete nasadit rozšíření prohlížeče, které vám umožní přeskočit na hlavní navigační odkazy. Nebo uvažte tohle: pokud špatně vidíte, mohli byste používat specializovaný program zvaný „čtečka obrazovky“, který převádí text na mluvené slovo a předčítá webové stránky. Jakmile se dostanete přes nadpis stránky, další zajímavou informací jsou hlavní navigační odkazy. Pokud spěcháte s navigací, nařídíte čtečce obrazovky, aby skočila na hlavní navigační pruh a začala číst. Když chcete co nejdříve procházet obsah, můžete čtečce poručit, aby přeskočila hlavní navigaci a začala číst hlavní text. Ať tak či tak, schopnost programově rozpoznat navigační odkazy je důležitá.

I když na používání <div id="nav"> k vyznačení navigace není nic špatného, není na tom ani nic mimořádně pěkného. Je to neoptimální z hlediska dopadů na skutečné lidi. HTML5 nabízí sémantický způsob, jak vyznačit navigační části: prvek <nav>.

<nav>
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">blog</a></li>
    <li><a href="#">gallery</a></li>
    <li><a href="#">about</a></li>
  </ul>
</nav>

Zeptejte se profesora Značky

OT: Jsou přeskakující odkazy kompatibilní s prvkem <nav>? Budu v HTML5 ještě potřebovat přeskakování odkazů?

OT: Přeskakující odkazy umožňují čtečkám přeskočit navigační části. Jsou užitečné pro handicapované uživatele, kteří používají software pro hlasové čtení stránek a navigují bez myši. (Naučte se poskytovat přeskakující odkazy.)

Jakmile budou čtečky aktualizovány a naučí se rozpoznávat prvek <nav>, přeskakující odkazy zastarají, protože čtecí program bude schopen automaticky nabídnout přeskočení navigační sekce označené prvkem <nav>. Nicméně nějakou dobu potrvá než všichni handicapovaní uživatelé webu přejdou na čtecí programy podporující HTML5, takže byste zatím měli poskytovat vlastní odkazy pro přeskočení <nav> sekcí.

Konečně jsme dorazili na závěr naší ukázkové stránky. Poslední věc, o které chci mluvit, je poslední věc na stránce: patička. Její kód původně vypadal takhle:

<div id="footer">
  <p>&#167;</p>
  <p>&#169; 2001&#8211;9 <a href="#">Mark Pilgrim</a></p>
</div>

Je to HTML5. Pokud se vám líbí, můžete si jej nechat. Ale HTML5 poskytuje specifičtější prvek pro tento účel: prvek <footer>.

<footer>
  <p>&#167;</p>
  <p>&#169; 2001&#8211;9 <a href="#">Mark Pilgrim</a></p>
</footer>

Co je vhodné zařadit do prvku <footer>? Pravděpodobně vše, co dnes vkládáte do <div id="footer">. Dobře, je to definice kruhem. Ale právě takhle se věci mají. Specifikace HTML5 říká: „Patička typicky obsahuje informace o daném úseku, jako kdo jej napsal, odkazy na související dokumenty, autorská práva a podobně.“ Na naší ukázkové stránce tam máme krátké vyjádření autorských práv a odkaz na stránku o autorovi. Když se rozhlédnu po pár populárních webech, vidím značný potenciál patiček.

V současnosti se všichni zbláznili do „tučných patiček“. Podívejte se na patičku webu W3C. Obsahuje tři sloupce, nadepsané „Navigace“, „Kontaktujte W3C“ a „W3C aktuality“. Její kód vypadá víceméně takto:

<div id="w3c_footer">
  <div class="w3c_footer-nav">
    <h3>Navigation</h3>
    <ul>
      <li><a href="/">Home</a></li> 
      <li><a href="/standards/">Standards</a></li> 
      <li><a href="/participate/">Participate</a></li> 
      <li><a href="/Consortium/membership">Membership</a></li> 
      <li><a href="/Consortium/">About W3C</a></li> 
    </ul>
  </div>
  <div class="w3c_footer-nav">
    <h3>Contact W3C</h3>
    <ul>
      <li><a href="/Consortium/contact">Contact</a></li> 
      <li><a href="/Help/">Help and FAQ</a></li> 
      <li><a href="/Consortium/sup">Donate</a></li> 
      <li><a href="/Consortium/siteindex">Site Map</a></li> 
    </ul>
  </div>
  <div class="w3c_footer-nav">
    <h3>W3C Updates</h3>
    <ul>
      <li><a href="http://twitter.com/W3C">Twitter</a></li>
      <li><a href="http://identi.ca/w3c">Identi.ca</a></li>
    </ul>
  </div>
  <p class="copyright">Copyright © 2009 W3C</p>
</div>

Udělal bych následující změny, abych jej převedl do sémantického HTML5:

Výsledný kód by mohl vypadat nějak takhle:

<footer>
  <nav>
    <h1>Navigation</h1>
    <ul>
      <li><a href="/">Home</a></li> 
      <li><a href="/standards/">Standards</a></li> 
      <li><a href="/participate/">Participate</a></li> 
      <li><a href="/Consortium/membership">Membership</a></li> 
      <li><a href="/Consortium/">About W3C</a></li> 
    </ul>
  </nav>
  <nav>
    <h1>Contact W3C</h1>
    <ul>
      <li><a href="/Consortium/contact">Contact</a></li> 
      <li><a href="/Help/">Help and FAQ</a></li> 
      <li><a href="/Consortium/sup">Donate</a></li> 
      <li><a href="/Consortium/siteindex">Site Map</a></li> 
    </ul>
  </nav>
  <section>
    <h1>W3C Updates</h1>
    <ul>
      <li><a href="http://twitter.com/W3C">Twitter</a></li>
      <li><a href="http://identi.ca/w3c">Identi.ca</a></li>
    </ul>
  </section>
  <p class="copyright">Copyright © 2009 W3C</p>
</footer>

Doplňkové čtivo

Ukázkové stránky používané v této kapitole:

O kódování znaků:

O zpřístupnění nového HTML5 v Internet Exploreru:

O standardních režimech a zkoumání typu dokumentu:

Validátor znalý HTML5:

Dočetli jste kapitolu „Co to všechno znamená?“ Pokud chcete pokračovat, přejděte na celý obsah knihy.

Víte že?

O’Reilly spolu s Google Press nabízí anglickou verzi této knihy v řadě formátů včetně tištěné pdoby, ePub, Mobi a DRM-free PDF. Placená verze se nazývá „HTML5: Up & Running,“ a můžete ji mít ihned. Obsahuje i tuto kapitolu.

Pokud se vám tahle kapitola líbila a chcete autora anglického originálu podpořit, kupte si „HTML5: Up & Running“ skrze tento spřátelený odkaz nebo elektronickou verzi přímo od O’Reilly. Vy dostanete knihu, já peníze. V současnosti nepřijímám přímé dary.

Copyright MMIX–MMXI Mark Pilgrim, Czech translation Pavel Satrapa