Vyhněte se nejobvyklejším chybám v HTML5

HTML5 Badge

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 <nav> tam, kde si myslíte, že <section> s nějakým <hx> postačí  — Hixie on IRC
  • 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.)

  • required
  • required=""
  • 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.

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ď by rád neprogramoval a radši se věnoval starým počítačům.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 69

Přehled komentářů

asdasd Re: Vyhněte se nejobvyklejším chybám v HTML5
Nox Re: Vyhněte se nejobvyklejším chybám v HTML5
Bubák Obalování
johan Re: Obalování
Martin Malý Re: Obalování
jiri.pudil Re: Obalování
Jakub Vrána Re: Obalování
Martin Soušek k čemu to tedy je?
Rdm Re: k čemu to tedy je?
Jiří Šoman Re: k čemu to tedy je?
stope32 zajímavý článek, ale...
Rdm Re: zajímavý článek, ale...
stope32 Re: zajímavý článek, ale...
Jiří Šoman Re: zajímavý článek, ale...
j Re: zajímavý článek, ale...
bauglir Re: zajímavý článek, ale...
Jiří Šoman Nové HTML 5 tagy a jejich použití
asdasd Re: Nové HTML 5 tagy a jejich použití
Jiří Šoman Re: Nové HTML 5 tagy a jejich použití
Aleš Roubíček Re: Nové HTML 5 tagy a jejich použití
Jiří Šoman Re: Nové HTML 5 tagy a jejich použití
TomasZmek Re: Nové HTML 5 tagy a jejich použití
Nox Re: Nové HTML 5 tagy a jejich použití
Petr Re: Nové HTML 5 tagy a jejich použití
j Re: Nové HTML 5 tagy a jejich použití
John Re: Nové HTML 5 tagy a jejich použití
František Kučera Zbytečnosti
asdasd Re: Zbytečnosti
František Kučera Re: Zbytečnosti
asdasd Re: Zbytečnosti
j Re: Zbytečnosti
maryo Re: Zbytečnosti
Vrtak-CZ Re: Zbytečnosti
asdasd Re: Zbytečnosti
juraj Re: Zbytečnosti
František Kučera Booleovské atributy
asdasd Re: Booleovské atributy
František Kučera Re: Booleovské atributy
asdasd Re: Booleovské atributy
srigi Re: Booleovské atributy
bauglir Re: Booleovské atributy
bauglir Re: Booleovské atributy
asdasd Re: Booleovské atributy
bauglir Re: Booleovské atributy
bauglir Re: Booleovské atributy
David Grudl Re: Booleovské atributy
bauglir Re: Booleovské atributy
asdasd Re: Booleovské atributy
bauglir Re: Booleovské atributy
bauglir Re: Booleovské atributy
Miki Jsou uzavřené tagy alá XHTML v HTML 5 chybou nebo ne?
Aleš Roubíček Re: Jsou uzavřené tagy alá XHTML v HTML 5 chybou nebo ne?
Miki Re: Jsou uzavřené tagy alá XHTML v HTML 5 chybou nebo ne?
bauglir Re: Jsou uzavřené tagy alá XHTML v HTML 5 chybou nebo ne?
gondo Re: Jsou uzavřené tagy alá XHTML v HTML 5 chybou nebo ne?
Martin Malý Re: Jsou uzavřené tagy alá XHTML v HTML 5 chybou nebo ne?
Jakub Vrána Chyba v posledním příkladu
bauglir Re: Chyba v posledním příkladu
Jakub Vrána Re: Chyba v posledním příkladu
bauglir Re: Chyba v posledním příkladu
Jakub Vrána Re: Chyba v posledním příkladu
bauglir Re: Chyba v posledním příkladu
Jakub Vrána Re: Chyba v posledním příkladu
bauglir Re: Chyba v posledním příkladu
Petr Kritika předchozího článku
Jatan Co podpora?
bauglir Re: Co podpora?
Jatan Re: Co podpora?
pdturnov Nové tagy
Zdroj: https://www.zdrojak.cz/?p=3531