Komentáře k článku

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.

Zpět na článek

69 komentářů k článku Vyhněte se nejobvyklejším chybám v HTML5:

  1. asdasd

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

    Některé novinky v HTML5 se mi líbí, ale mít padesát jednoúčelových tagů pro každou kokotinu mezi ně určitě nepatří.

    1. Nox

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

      Přijde mi, že celé HTML5 je poměrně orientované na praktické použití a spousta z tagů má odpodstatnění… a jejich přítomnost ničemu neuškodí, není nutné je používat

  2. Bubák

    Obalování

    Obalovači stejně jen zmodernizují své osvědčené XHTML konstrukce za HTML5:

    <div id ="menu">
      <div id="leftmenu">
        <ul class="menu">
          <li>....</li>
          <li>....</li>
        </ul>
      </div>
    </div>

    Akorát teď tam začnou prát moderní SECTION a NAV.

    Díky za článek.

    1. johan

      Re: Obalování

      Jo, článek dobrej. A HTML5? Ještě jsem na něj nepřešel, takže v něm chyby nedělám :-) Čekám, až se trochu „usadí“…

    2. Martin MalýAutor příspěvku

      Re: Obalování

      Paralely by tu byly. Třeba masové zavržení tagů B a I („jsou staré a nemoderní“) a jejich nekritické nahrazení 1:1 tagama STRONG a EM. Končilo to silými prohlášeními typu „Kurzíva se v (X)HTML zapíše jako EM… dřív se psala jako I, ale ten tag je zastaralý a v XHTML už ani není…“ Nedělám si iluze, že totéž nenastane se section, article a pod.

  3. Martin Soušek

    k čemu to tedy je?

    K čemu ty nové tagy vůbec jsou, když pořádně nikdo netuší, kde se mohou a kde nemohou použít?

    Výsledek? Devadesát procent lidí je bude používat špatně a deset procent dobře (optimistický odhad). Jaký to potom bude mít přínos oproti nánosu DIVů?

    1. Jiří Šoman

      Re: k čemu to tedy je?

      Ano máte pravdu = k ničemu.

      Ovšem předpokládá se, že kodéři jsou odborníci v tom co dělají. A jako odborníci by měli věci rozumět, nemyslíte? V takovém případě bude vše OK.

  4. stope32

    zajímavý článek, ale...

    Když u elementů <script> a <link> odstraníte atribut Type, projde vám taková stránka validátorem? Mně ne…

    <section id=“wrapper“> může být špatně, ale ostatní užití toho tagu bude v pořádku, pokud např. v <section id=“main“> budou už jen nadpis a paragrafy? Vaše informace je pak poněkud zavádějící.

    Jaký jiný, než sémantický, význam má <nav>, pokud jsou odkazy v menu stejně baleny do seznamu

      1. Rdm

        Re: zajímavý článek, ale...

        tak pokud ji posíláte s DOCTYPE XHTML, tak se nedivte, že vám ji validátor nesežere…

        1. stope32

          Re: zajímavý článek, ale...

          To bych byl asi trochu debil, ne? Předpokládejme určitou úroveň inteligence =)

          1. Jiří Šoman

            Re: zajímavý článek, ale...

            Potom je to tedy dosti divné. Stránka samozřejmě validátorem projde.

            1. j

              Re: zajímavý článek, ale...

              Odstranovat type je samozrejme pitomost, nebot script muze byt i jiny nez javascript, stejne tak stylovani nemusi byt jenom CSS a je slusnost uvest o co jde. Ze tomu nekdo nerozumi, nebo netusi ze se pouzivaji i jiny veci a ze prohlizec to prevazne skousne neznamena, ze to tak je dobre.

              BTW: v tom clanku me nejvic pobavilo zhruba toto:

              V příkladu výše bychom tedy napsali (v HTML):
              <input type=“email“ name=“email“ required />

              Coz je samozrejme chyba jako svin, nebot /> v HTML neni definovano a byt to tam nesmi, naopak to tam byt musi pro Xhtml.

      2. bauglir

        Re: zajímavý článek, ale...

        K poslednímu odstavci:
        1/ protože seznam říká pouze, že se jedná o seznam, neříká, že se jedná o menu
        2/ protože v elementu nav nemusí být pouze seznam… element říká, že se jedná o menu, neříká, že v něm musí být seznam.

    • Jiří Šoman

      Nové HTML 5 tagy a jejich použití

      Je mi trochu smutno, když pročítám diskusi, která zde pod článkem vzniká. Článek má za cíl donutit ty, kteří opravdu použivají většinu elementů špatně k zamyšlení nad významem daného elementu a jeho správného použití.

      Pro ty co nevědí k čemu ty elementy vlastně jsou (použití je věc druhá) doporučuji prostudovat specifikace, nebo seriál o HTML 5 zde na lupě.

      Přidám zde informaci k zamyšlení:
      Nové elementy v HTML 5 vznikly hlavně pro zjednodušení a upřesnění struktury dokumentu. Nás jako normální zdravé lidi to asi nějak nevytrhne, web uvidíme tak i tak pořád stejně – nicméně i pro nás je to výhoda. Ale nastává otázka co lidé s různým postižením (zrak, sluch a podobně). Ano jednotná struktura (konečně) umožní různým načítačům, braillským řádkům a podobným zařízením lépe pochopit strukturu (a stím i obsah) daného webu případně aplikace. Nehledě na různé vychytávky v browserech, které díky těmto elementům mohou poznat co je na webu hlavní obsah, který nadpis patří k tomu a tomu textu atd.

      Lidi, proboha přemýšlejte…

      1. asdasd

        Re: Nové HTML 5 tagy a jejich použití

        Což o to, já se s tím srovnám celkem v pohodě, navíc z 90% nedělám obsahové weby. Ale je mi docela líto začátečníků, těm se z toho asi pěkně protočí panenky. U spousty webů to taky nakonec může mít přesně opačný dopad, než bylo původně zamýšleno.

        1. Jiří Šoman

          Re: Nové HTML 5 tagy a jejich použití

          Souhlas. Začátečníci to nebudou mít lehké, ale jak je vidět ani pokročilý si s tím v mnoha případech nevědí rady. Bohužel (konečně) už kodéři nemohou jenom slepě bušit kód jako cvičené opice, ale musejí u toho i přemýšlet…

            1. Jiří Šoman

              Re: Nové HTML 5 tagy a jejich použití

              Myslím to tak, že nemuseli přemýšlet na významem… Prakticky jenom u pár elementů. Ve většině případů převažoval div, span atd. Teď už musíš tušit čemu chceš dát jakej význam, jinak to budeš dělat špatně jako ti kterých se týká tento článek.

              1. TomasZmek

                Re: Nové HTML 5 tagy a jejich použití
                Trosku to odhlecim. Pred nekolika miliony lety nas predek nemusel premyslet nad vyznamem jednolitvych slov a skladani vet. Stacilo mu neco jako „agrr, huhuhu, ehehehe“ a podobně a dokázal se s ostatními domluvit. A pak nějaký ňouma vymyslel jazyk, strukturu věty a slovosled a šlo to do hajzlu. Museli jsme začít přemýšlet nad významem slov a jejich správné používání. Vedlejší efekt jsou úžasná psaná díla a to, že Člověk je tak nějak na jiné úrovni, než opice.

        2. Nox

          Re: Nové HTML 5 tagy a jejich použití

          Je ovšem otázka nakolik se začátečník vůbec s těmito tagy setká, myslim že toto nijak horké nebude protože než vůbec proniknout k většímu množství začátečníků, bude to více podchycené a vychytané

      2. Petr

        Re: Nové HTML 5 tagy a jejich použití

        To je for ne: „doporučuji prostudovat specifikace, nebo seriál o HTML 5 zde na lupě“? Zde: http://zdrojak.root.cz/clanky/webdesigneruv-pruvodce-po-html5-nova-semantika/

        <article> <header> <h1>Webdesignérův průvodce HTML5</h1> </header>

        Chytrý článek o tom, jak začít používat HTML5.

        <aside> <dl> <dt>HTML5</dt> <dd>značkovací jazyk, nástupce HTML 4</dd> </dl> </aside> </article>

        je vidět vúuka, kterou vy v článku kritizujete. Co si má tedy čtenář vybrat?

      3. j

        Re: Nové HTML 5 tagy a jejich použití

        Potiz je, ze vetsina masticu nevyuziva ani ty nastroje ktery ma. Uz sem videl i „profesionalni“ weby, kde nebyly jiny tagy nez div. Kupodivu vetsina amateru umi stvorit daleko semanticky kvalitnejsi web nez spousta firem za velky prachy.

    • František Kučera

      Zbytečnosti

      Když tak strašně vadí „zbytečné“ atributy, je škoda, že soudruzi nezařídili, aby se místo

      <script src="js/scripts.js"></script>

      psalo:

      <script src="js/scripts.js"/>
      1. asdasd

        Re: Zbytečnosti

        To taky moc nechápu :-). Stejně tak nechápu, proč musí být u tagu <link> uveden atribut rel, pokud je z přípony jasné, že jde o styly – stejně ho k ničemu jinému než ke vkládaní stylů v podstatě nikdo nepoužívá.

        1. František Kučera

          Re: Zbytečnosti

          Ten <link/> se používá k víc věcem (třeba RSS/Atom). Řídit se příponou je blbost – ta tam třeba nemusí být vůbec žádná (dynamicky generovaný soubor nebo hezká url), ale mohlo by záležet na MIME typu poslaném v HTTP hlavičkách. Je to trochu podobný problém jako (ne)uvádění velikosti obrázků v <img/> značce – rozměry jsou uvnitř souboru s obrázkem, takže na stránce je teoreticky není potřeba duplikovat – přesto je někdy dobré je i tam uvádět.

          1. asdasd

            Re: Zbytečnosti

            Myslel jsem to jednoduše tak, že v případě chybějícího rel se bude brát v potaz přípona. Jinak největší smysl by stejně dávalo vkládání stylů na způsob <style src=“styl.css“ />, stejně jako u skriptů.

      2. maryo

        Re: Zbytečnosti

        HTML5 je v urcitejch vecech kompromis. Oni nemuzou zmenit standardy jen tak aby to v nekterejch prohlizecich prestalo fungovat… Ale treba to odstraneni povinnyho atributu type zadnymu prohlizeci neublizi, tak je kontraproduktivni mit ho ve specifikaci jako povinnej.

        1. asdasd

          Re: Zbytečnosti

          Ono je občas místo udržování a záplatování překonaných pozůstatků lepší se na zpětnou kompatibilitu jednoduše vys*rat a místo kompromisů volit to nejlogičtější řešení. Rozdělení na HTML5 transitional/strict by nebylo od věci :-).

          1. juraj

            Re: Zbytečnosti

            Bolo by to odveci. Prehliadače nikdy nerozlišovali verzie HTML; z toho dôvodu nemá zmysel niečo rozdeľovať. Ak by si chcel takéto rozlišovanie zaviesť, znamenalo by to pridávanie ďalších zobrazovacích módov do prehliadačov. A po tom asi fakt nikto netúži.

    • František Kučera

      Booleovské atributy

      Ad „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="requ­ired"

      Proč se potom všechno ostatní (včetně required="false") nepovažuje za „nepravdu“?

      1. asdasd

        Re: Booleovské atributy

        Hlavní je to, že je v elementu ten atribut uvedený, jeho hodnota není podstatná, ta je tam jenom „aby se neřeklo“. Jinak si myslím, že používat booleovské hodnoty v podobných atributech by bylo podstatně logičtější, což bude asi důvod, proč je tam hodně lidí intuitivně píše.

        1. František Kučera

          Re: Booleovské atributy

          Navíc by to bylo i praktičtější při používání různých šablon nebo generování – vložit někam true/false je jednodušší, než atribut vkládat nebo vůbec nevkládat.

          Ale narážel jsem spíš na to, že v článku se píše o tom, že jsou tři platné způsoby – pak bych očekával, že všechny ostatní budou neplatné, resp. že budou vyhodnoceny jako false.

        2. srigi

          Re: Booleovské atributy

          A prave tu je velky nesulad u atributu autocomplete – tato funkcia je vsade (vo vsetkych browseroch) implicitne zapnuta nad textinput-mi. Ak ju kcete vypnut, tak minimalne v gecko browseroch je platny zapis

          <input type="text" autocomplete="of­f">

          co yrochu odporuje tomu co sa tvrdi v clanku.

          1. bauglir

            Re: Booleovské atributy

            Protože tento atribut nedefinuje logickou hodnotu, ale jednu z hodnot výčtového typu

        3. bauglir

          Re: Booleovské atributy

          Ahoj, není tam „aby se neřeklo“, ale aby se jednalo o platnou XHTML serializaci

          1. asdasd

            Re: Booleovské atributy

            Tady ale byla řeč o html5, kde ta hodnota opodstatnění nemá(až na kompatibilitu s xhtml) ;-). Navíc jsem měl na mysli to, že logika „je atribut = true / není atribut = „false“ je nekonzistentní se zápisem ostatních atributů, což vede k nejasnostem.

            1. bauglir

              Re: Booleovské atributy

              samozřejmě, že hovořím o HTML5, kde v HTML serializaci zapíšete required, v XHMLT serializaci zapíšete required=“requ­ired“, HTML5 je název specifikace, pak rozhoduje, jakou serializací budete dokument psát.
              a jak jsem psal výše, toto je naprosto konzistentní se všemi boolean atributy (z těch starých například selected, chcecked), nepleťte si boolean atribut (required) s boolean hodnotu (on/yes off/no)

              1. bauglir

                Re: Booleovské atributy

                jen dodám, tady nejde o „nějakou kompatibilitu“, XHTML serializace je součástí jazyka HTML5

              2. David Grudl

                Re: Booleovské atributy

                Asi přesnější by bylo říct, že XHTML serializace vůbec logické atributy nezná, jen je pomocí jednotné konvence imituje.

              3. asdasd

                Re: Booleovské atributy

                „a jak jsem psal výše, toto je naprosto konzistentní se všemi boolean atributy (z těch starých například selected, chcecked), nepleťte si boolean atribut (required) s boolean hodnotu (on/yes off/no)“

                Ale já se přece proboha nebavím o jednom konkrétním atributu, ale i o způsobu zápisu všech ostatních, včetně selected, checked, … Tou nekonzistencí jsem myslel to, že když se většina atributů zapisuje atribut=“hodnota“, tak nevidím důvod, proč by se těch pár nemohlo zapisovat taky jako atribut=“true“ nebo atribut=“false“. To je celý.

                1. bauglir

                  Re: Booleovské atributy

                  Takto ano, jsem Vás asi přesně nepochopil….
                  ono by to možná dávalo smysl, ale bohužel z historických důvodů….

                  předpokládám, že původní idea byla default missing value u boolean atributů bude false, potom není potřeba ji vůbec definovat, buď atribut je, nebo není… a pokud je, potom je true bez ohledu na hodnotu…

                  1. bauglir

                    Re: Booleovské atributy

                    + předpokládám, že autocomplete si vymysleli do MSIE nebo NN a ten druhý to zkopíroval…. zase historická zátěž…

    • Miki

      Jsou uzavřené tagy alá XHTML v HTML 5 chybou nebo ne?

      Jde mi o to, že nějaký generátor obsahu, který jinak vyhovuje, mi generuje například <img src=“…“ /> nebo
      . Co se stane když kolem budu mít stránku postavenou na HTML 5?

      1. Aleš Roubíček

        Re: Jsou uzavřené tagy alá XHTML v HTML 5 chybou nebo ne?

        Záleží, zda volíte XML serializaci či nikoli.

        1. Miki

          Re: Jsou uzavřené tagy alá XHTML v HTML 5 chybou nebo ne?

          Díky, a ta se tedy přepíná, jak jsem vygooglil pouhou přítomností namespace v tagu <html> respektive <html xmlns=“http:/­/www.w3.org/1999/xhtml­“>. Je to vše?

      2. gondo

        Re: Jsou uzavřené tagy alá XHTML v HTML 5 chybou nebo ne?

        nie, nieje to chyba
        bez ohladu na zvolenu serializaciu (ktoru v HTML5 vobec nieje potrebne definovat)
        v HTML5 mozes pouzivat HTML aj XML syntax

        1. Defines a single language called HTML5 which can be written in HTML syntax and in XML syntax.
        http://dev.w3.org/html5/html4-differences/

      3. Martin MalýAutor příspěvku

        Re: Jsou uzavřené tagy alá XHTML v HTML 5 chybou nebo ne?

        Není to chyba; ve středu se o tom na těchto stránkách rozepíše Jirka Kosek, takže prosím: „stay tuned“ ;)

    • Jakub Vrána

      Chyba v posledním příkladu

      Poslední příklad je kočkopes – používá zároveň syntaxi HTML a XHTML (která je v tomto případě v rozporu). Je to špatně i v původním článku.

      1. bauglir

        Re: Chyba v posledním příkladu

        Mohl byste upřesnit, kde je v kódu

        <input type=“email“ name=“email“ required />

        chyba?

        1. Jakub Vrána

          Re: Chyba v posledním příkladu

          Ukázka je v XML (což lze poznat podle />), kde musí mít atribut uvedenou hodnotu. Tu atribut required nemá.

              1. bauglir

                Re: Chyba v posledním příkladu

                v HTML5 je u void elementů povolené, daná ukázka je validní HTML5 v HTML serializaci

                1. Jakub Vrána

                  Re: Chyba v posledním příkladu

                  To jsem nevěděl, díky za rozšíření obzorů. Je to tedy jen zbytečně krkolomné :-).

    • Petr

      Kritika předchozího článku

      To co zde autor kritizuje (nadbytečnost header) je v jiném článku zda ne serveru doporučeno používat: http://zdrojak.root.cz/clanky/webdesigneruv-pruvodce-po-html5-nova-semantika/
      <article>
      <header>
      <h1>Webdesignérův průvodce HTML5</h1>
      </header>

      Chytrý článek o tom, jak začít používat HTML5.
      <aside>
      <dl> <dt>HTML5</dt> <dd>značkovací jazyk, nástupce HTML 4</dd> </dl>
      </aside>
      </article>

      Co si má tedy čtenář vybrat? Nechtělo by to spíš nějakou korekci vycházejících článku?

    • Jatan

      Co podpora?

      Článek ani dosavadní diskuse se nezabývá otázkou (ne)podpory HTML5 ve výstupních zařízeních, což je ovšem věc řádově důležitější než akademická debata o sémantice.

      Také doufat v kvalifikaci kodéra se mi jeví bláhové. Denně vznikají kvanta webů, jejichž autoři jsou rádi, že jsou vůbec schopni jakýkoli kód napsat a neřeší ani sémantiku <b><big>nadpi­su</big></b>, natož desítek nových tagů v HTML5.

      1. bauglir

        Re: Co podpora?

        Tak bylo by poněkud zvláštní, pokud by se článek s názvem „Vyhněte se nejobvyklejším chybám v HTML5“ věnoval podpoře HTML5…

        1. Jatan

          Re: Co podpora?

          Nevím, zda nezabývat se reálnou podporou je mezi kodéry HTML5 chyba nejobvyklejší, ale nejzávažnější je zcela jistě.

    • pdturnov

      Nové tagy

      Hlavním problémem je naprosto nejasná a nejednotná specifikace významu nových tagů v HTML5. Zejména tag „section“. Má-li tvůrce webu hloubat hodiny nad tím, má-li obrázek vztah k hlavnímu článku nebo ne a má-li použít figure nebo ne, je kontraproduktivní. Těžko chtít po kodérovi, aby nedělal chyby (které jsou ale jen formální), když ani tvůrci v tom nemají jasno.
      Nicméně jakékoliv, byť nesprávné, použití nových tagů kód zpřehledňuje, a pokud to projde validátorem, tak oč jde?
      Bohužel se mi zdá, že autoři se stále drží klasického způsobu tvorby stránek v jistém rozporu s moderním trendem dynamické změny obsahu (Ajax) a stylu Web 2.0.

    Napsat komentář

    Tato diskuse je již příliš stará, pravděpodobně již vám nikdo neodpoví. Pokud se chcete na něco zeptat, použijte diskusní server Devel.cz

    Zdroj: https://www.zdrojak.cz/?p=3531