Vyhněte se nejobvyklejším chybám v HTML5
HTML5 je nový standard, a ačkoli vychází z toho, co už všichni webdesignéři a kodéři dobře znají, tak jeho novinky, zejména tzv. „sémantické“ tagy, nemusí být vždy a za všech okolností jasně srozumitelné. V článku si ukážeme nejčastější situace, kde se právě při práci s těmito elementy nejčastěji chybuje.
Tento článek napsal pro web HTML5Doctor Richard Clark. Richard je Head of Interactive v KMP Digitata, Manchester, UK. Můžete jej sledovat na twitteru nebo na jeho osobní stránce.
Originál článku vyšel na webu HTML5Doctor pod licencí CC-BY-NC.
Během hodnocení stránek pro HTML5 gallery a odpovídání na dotazy čtenářů na HTML5 Doctor jsem viděl spoustu stránek v HTML5 a jejich kódů. V tomto článku si ukážeme některé chyby a zlozvyky, které se často opakují, a vysvětlíme si, jak se jim vyhnout.
Nepoužívejte section jako obalový element pro stylování
Jedním z nejobvyklejších problémů, které ve stránkách v HTML5 vídáme, je mechanické nahrazování <div> ů elementem pro vyznačování sekcí — konkrétně nahrazení obalových <div> ů (použitých při stylování) elementem <section>. V XHTML nebo HTML4 se běžně používá konstrukce:
<!-- HTML 4-style code --><div id="wrapper"> <div id="header"> <h1>My super duper page</h1> <!-- Header content --> </div> <div id="main"> <!-- Page content --> </div> <div id="secondary"> <!-- Secondary content --> </div> <div id="footer"> <!-- Footer content --> </div> </div>
Místo ní nyní vídáme toto:
<!-- Tento kód nepoužívejte! Je špatně! --> <section id="wrapper"> <header> <h1>My super duper page</h1> <!-- Header content --> </header> <section id="main"> <!-- Page content --> </section> <section id="secondary"> <!-- Secondary content --> </section> <footer> <!-- Footer content --> </footer> </section>
Na rovinu – je to prostě špatně:<section> není obalový element. Element <section> označuje sémantický oddíl v obsahu, čímž pomáhá vytvořit document outline. Sekce může obsahovat nadpis. Pokud hledáte obalový element pro celou stránku (v HTML, HTML5 či XHTML), zvažte nastylování elementu <body>, jak popisuje Kroc Camen. Pokud potřebujete nějaký obalový element kvůli stylování, použijte <div>, který nenese sémantickou informaci. Jak vysvětluje Dr Mike, DIV není mrtvý, a pokud nemáte nic, co by bylo sémanticky vhodnější, je to stále dobrý způsob, jak aplikovat stylování.
Pokud si toto uvědomíme, dokážeme vytvořit správný kód pro předchozí příklad, včetně některých atributů ARIA. (Poznámka: možná budete potřebovat nějaký <div> navíc, podle použitého designu.)
<body> <header> <h1>My super duper page</h1> <!-- Header content --> </header> <div role="main"> <!-- Page content --> </div> <aside role="complementary"> <!-- Secondary content --> </aside> <footer> <!-- Footer content --> </footer> </body>
Pokud si nejste jisti, jaký element použít, odkazuji vás na HTML5 sectioning content element flowchart.
Používejte header a hgroup jen pokud jsou potřeba
Psaní tagů tam, kde nemusí žádné být, nedává smysl, že? Naneštěstí stále vídám <header> a <hgroup> v situacích, kde nemají žádné opodstatnění. Podrobnosti o jejich použití naleznete v článcích the <header> element a the <hgroup> element, ale zde si pravidla stručně shrneme:
- Element
<header>reprezentuje skupinu úvodních nebo navigačních prvků a obvykle obsahuje titulek sekce - Element
<hgroup>seskupuje nadpisy<h1>—<h6>v situacích, kdy nadpis sekce má více úrovní, jako např. podtitulek, alternativní titulek nebo řádek s tagy.
Nadužívání header
Pravděpodobně víte, že element <header> může být použit v dokumentu několikrát – což přineslo populární vzor:
<!-- Nepoužívejte tento kód! Header je tu nadbytečný --> <article> <header> <h1>My best blog post</h1> </header> <!-- Article content --> </article>
Pokud váš <header> obsahuje jen jediný nadpis, tak <header> vypusťte. Element <article> zajistí, že titulek bude zahrnut do struktury dokumentu, a protože <header> neobsahuje v tomto případě víc prvků (jak je popsáno v dokumentaci), tak není důvod psát kód, který je nepotřebný. Prostě napište toto:
<article> <h1>My best blog post</h1> <!-- Article content --> </article>
Nesprávné použití <hgroup>
Když je řeč o nadpisech, je na místě zmínit další častou chybu – nesprávné použití <hgroup>. Neměli bychom používat <hgroup> ve spojení s <header>, když:
- obsahuje jediný nadpis, nebo
- element
<hgroup>bude fungovat i samostatně (tedy bez<header>u).
První problém vypadá takto:
<!-- Nepoužívejte tento kód! Hgroup je tu nadbytečný --> <header> <hgroup> <h1>My best blog post</h1> </hgroup> <p>by Rich Clark</p> </header>
V tomto případě odstraňte <hgroup> a nechte titulek samostatně.
<header> <h1>My best blog post</h1> <p>by Rich Clark</p> </header>
Druhý problém je příkladem použití elementů, které nejsou nezbytné.
<!-- Nepoužívejte tento kód! Header je tu nadbytečný --> <header> <hgroup> <h1>My company</h1> <h2>Established 1893</h2> </hgroup> </header>
Když jediným potomkem elementu <header> je <hgroup>, tak k čemu je <header>? Pokud v něm nejsou další dodatečné elementy („sourozenci“ <hgroup>), tak <header> vyhoďte.
<hgroup> <h1>My company</h1> <h2>Established 1893</h2> </hgroup>
Další příklady použití <hgroup> najdete v článcích o HGROUP na HTML5Doctor.
Nebalte každý seznam odkazů do <nav>
V HTML5 bylo představeno 30 nových elementů (stav v době psaní článku), což je množství, které může člověka zmást a ztížit výběr toho správného elementu pro určitou situaci. Jinými slovy – neměli bychom těmito super-sémantickými elementy plýtvat. Bohužel přesně to se často stává s elementem <nav>. Specifikace o elementu <nav> říká:
Element nav reprezentuje oblast stránky, která odkazuje na jiné stránky či části aktuální stránky, tedy sekci s navigačními odkazy.
Poznámka: Ne každá skupina odkazů na stránce musí být v elementu nav — tento element je primárně určen pro oddíly, které obsahují hlavní navigační bloky. Konkrétně bývá např. běžné, že patičky obsahují odkazy na různé stránky jednoho webu, jako jsou pravidla použití, domovská stránka nebo stránka s copyrightem. Pro takové případy je plně dostačující element footer; když je v takové situaci použitý nav, je nadbytečný.
WHATWG HTML spec
Klíčové slovo je ‘hlavní’ navigace. Můžeme celé dny diskutovat o tom, co je to ‘hlavní’, ale podle mého názoru to znamená:
- Primární navigace
- Prohledávání webu
- Sekundární navigace (sporné)
- In-page navigace (např. v dlouhých článcích)
Ačkoli není jednoznačně řečeno, co je dobře a co špatně, tak mi cit říká, že následující bloky by neměly být v <nav>:
- Stránkování
- Odkazy na sociální sítě (i když mohou existovat výjimky, například stránky jako About me nebo Flavours)
- Tagy u blogpostu
- Kategorie u blogpostu
- Terciární navigace
- „Reklamní odkazy“ v patičce
Pokud si nejste jisti, kde <nav> použít, zeptejte se sami sebe: Je to hlavní navigace?
Následující tipy mohou pomoci:
Nepoužívejte
— Hixie on IRC<nav>tam, kde si myslíte, že<section>s nějakým<hx>postačí- Dali byste odkaz na to do bloku „Přeskočit na…“ pro zlepšení přístupnosti?
Pokud je odpověď NE, pak odkaz pravděpodobně nepatří do <nav>.
Běžné chyby u elementu figure
Ach, <figure>. Správné použití tohoto elementu, spolu s jeho spolupachatelem <figcaption>, je někdy obtížné i pro mistry. Pojďme se podívat na několik běžných problémů s <figure>.
Ne každý obrázek je ilustrace (figure)
Výše jsem radil, abyste nepsali kód, který je nadbytečný. Tato chyba je podobná. Viděl jsem i weby, kde byl každý obrázek označen jako <figure>. Přitom není žádný důvod balit všechny obrázky do dalšího elementu, jen si tím přiděláváme práci a nepřidáváme k obsahu žádnou užitečnou informaci.
Specifikace popisuje <figure> jako obsah, volitelně s nadpisem, který je samostatný a je z hlavního textu odkazován jako jediná jednotka.
V tom je krása elementu <figure>. Může být přesunut z primárního obsahu — například do postranního bloku — aniž by to narušilo tok dokumentu.
Pokud to je čistě ilustrační obrázek, který není v textu zmíněn, tak to rozhodně není <figure>. Případy použití se mohou lišit – pro začátek se zeptejte sami sebe: Je ten obrázek nezbytný k pochopení vlastního textu?
Pokud ne, tak pravděpodobně nejde o <figure> (možná je to do <aside>). Pokud ano, zeptejte se znovu: Mohl bych to přesunout do Dodatků?
Pokud jsou odpovědi na obě otázky ANO, pak jde pravděpodobně o <figure>.
Vaše logo není ilustrace (figure)
Totéž co výše platí i pro vaše logo. Zde je pár ukázek toho, co lze v kódu někdy nalézt:
<!-- Tento kód nepoužívejte! Je špatně! --> <header> <h1> <figure> <img src="/img/mylogo.png" alt="My company"class="hide" /> </figure> My company name </h1> </header> <!-- Tento kód nepoužívejte! Je špatně! --> <header> <figure> <img src="/img/mylogo.png" alt="My company" /> </figure> </header>
K tomu není co dodat. Je to prostě špatně. Můžeme se dohadovat až do úpadu o tom, jestli by logo mělo být v <h1>, ale to není důvod, kvůli kterému si tento příklad ukazujeme. Opravdový problém je zneužití elementu <figure>. Element <figure> by měl být použit pouze tehdy, když je zmiňován v textu nebo v okolních elementech. Myslím, že lze tvrdit že firemní logo bývá jen málokdy zmíněno v obsahu stránky. Prostě a jednoduše – nedělejte to. Místo toho použijte:
<header> <h1>My company name</h1> <!-- More stuff in here --> </header>
Figure nemusí být jen obrázek
Další častý omyl a nepochopení smyslu <figure> je přesvědčení, že může být použit pouze pro obrázky. To není pravda, <figure> může být video, audio, graf (třeba pomocí SVG), citace, tabulka, ukázkový kód, ukázka z knihy, tohle všechno dohromady nebo cokoli jiného, co ilustruje obsah. Neomezujte se s <figure> pouze na obrázky. Naší prací je popsat co nejpřesněji obsah pomocí k tomu určených značek.
Před časem jsem popisoval <figure> do hloubky.
Neuvádějte nepotřebné atributy
Toto je pravděpodobně nejčastější problém, který se v HTML5 vyskytuje. Ačkoli nejde o vyslovenou chybu, tak bude nejlépe se podobným konstrukcím vyhnout.
V HTML5 není zapotřebí uvádět atribut type u elementů <script> a <style>. Může být leckdy obtížné se těchto atributů zbavit, obzvlášť když je generuje CMS, ale není žádný důvod, proč je nechávat v ručně kódovaných stránkách. Protože všechny prohlížeče očekávají, že skript bude JavaScript a styl CSS, tak takovéhle konstrukce nejsou potřeba:
<!-- tento kód nepoužívejte, není dobře --> <link type="text/css" rel="stylesheet"href="css/styles.css" /> <script type="text/javascript" src="js/scripts.js"></script>
Místo toho použijte prosté:
<link rel="stylesheet" href="css/styles.css" /> <script src="js/scripts.js"></script>
Nesprávné použití atributů u formulářů
Asi víte, že HTML5 přineslo mnoho nových atributů u formulářů. Jejich podrobnější popis naleznete jinde (např. v článku na Zdrojáku – pozn. překl.), zde si ukážeme, čemu se vyhnout.
Booleovské atributy
Booleovské atributy existují i u multimediálních elementů a dalších, nejen u formulářů. Pravidla ale platí i pro ostatní booleovské atributy u jiných elementů.
Booleovské atributy mají tu vlastnost, že jejich uvedení v kódu znamená, že jsou „zapnuté“ („on“, „true“, „yes“…) Příklady takových atributů:
- autofocus
- autocomplete
- required
Po pravdě jsem špatné použití v tomto případě viděl málokdy, ale např. u required jsem nalezl:
<!-- Tento kód je špatně --> <input type="email" name="email" required="true" /> <!-- a tento taky --> <input type="email" name="email" required="1" />
Ve skutečnosti takováto chyba nezpůsobí žádnou škodu. Prohlížeč vidí atribut required v kódu, takže funkce je zapnutá. Ale co když chceme zapsat opak, tedy funkci „vypnout“, a napíšeme required="false"?
<!-- Tento kód je taky špatně --> <input type="email" name="email" required="false" />
Parser vidí atribut required a považuje jej za zapnutý, ačkoli se snažíme říct, že má být vypnutý. Tedy něco, co jsme nechtěli.
Existují tři platné způsoby, jak v HTML říct, že booleovský atribut má být použitý. (Druhá a třetí možnost je určena pro zápis v syntaxi XHTML.)
requiredrequired=""required="required"
V příkladu výše bychom tedy napsali (v HTML):
<input type="email" name="email" required />
Shrnutí
Je nemožné vypsat všechny podivné zvyky a konstrukce, které se ve stránkách v HTML5 objevují – výše uvedené jsou pouze ty, co se objevují nejčastěji. Znáte také takové příklady, které jste zahlédli na webu? Které části HTML5 potřebují ujasnit? Svěřte se v komentářích.
Poděkování: Ian Devlin, Derek Johnson, Tady Walsh, kurátor HTML5 Gallery a lidé z HTML5 Doctor za materiál k článku.
Martin Malý
Začal programovat v roce 1984 s programovatelnou kalkulačkou. Pokračoval k BASICu, assembleru Z80, Forthu, Pascalu, Céčku, dalším assemblerům, před časem v PHP a teď je rád, že neprogramuje…
Školení: Hackujeme operační systém Android
Školení vám ukáže, jak se dostat k Linuxu (tzv. "rootování"), který se pod hezkou tváří Androida skrývá a jak ho naplno využít. Pomůže vám to při záloze dat, zvětšování prostoru pro aplikace nebo sdílení připojení k internetu a pokud chcete z telefonu dostat opravdové maximum, ukážeme vám, jak v něm vyměnit kompletní systém za lepší.
Podrobnější informace a přihláška
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.
