Deset nejčastějších chyb při validaci

2006-12-12 20:10 napsal Lukáš Havrlant

Co jsem si všiml, dost stránek obsahuje stále stejné chyby oproti cílové dtd, takže jsem se rozhodl sepsat takový stručný seznam těch nejčastějších chyb:

Blokový prvek v řádkovém

Validátor opravdu nebude nijak extra nadšený, pokud se budete snažit narvat do nějakého řádkového prvku (typicky odkaz) nějaký blokový prvek (klasicky div). To se prostě nedělá, ať se vám to líbí nebo ne. Pokud chcete do toho odkazu dostat něco blokového, máte v zásadě dvě možnosti – buď udělat pomocí CSS vlastnosti display:block z odkazu blokový element a pak pracovat s ním anebo namísto divu použít span opět s nastavením display:block. Většinou platí, že do blokového elementu můžete narvat jak další blokový prvek (výjimku tvoří odstavec, který nemůže obsahovat další bloky), tak i řádkový (i zde jsou výjimky, přímo do body ve striktním doctypu nemůžete narvat řádkový prvek, musíte ho nejdříve obalit nějakým jiným blokovým). Do řádkového poté můžete vložit pouze řádkové prvky, nikdy blokové. Jistou anomálií jsou elementy ins a del, které sami o sobě blokové nejsou, ale mohou obsahovat bloky i řádkové elementy. Validátor na takovouto konstrukci:

<a href="#"><div>asd</div></a>

zahlásí něco takového:

document type does not allow element „DIV“ here; missing one of „APPLET“, „OBJECT“, „MAP“, „IFRAME“, „BUTTON“ start-tag.

Překřížení elementů

Překřižení elementů mnozí považují za vůbec zvěrstvo největší a nedá se než souhlasit, prostě je to hnus, nedělá se to, i když to mnohdy nemívá ani žádné strašidelné dopadky. Zkrátka chcete-li mít hezký kód, zanořujte elementy správně. Špatný příklad:

<strong>tohle je <span>strašně</strong> důležitý text</span>

Takhle to má vypadat:

<strong>tohle je <span>strašně</span></strong> důležitý text

Nebo takhle, podle toho, čeho vlastně chcete dosáhnout:

<strong>tohle je <span>strašně</span></strong> <span>důležitý text</span>

Prohlížeče to sice vykreslí správně, ale prostě se to nedělá, navíc v XHTML už vám to kiksne, parser vám zahlásí dračí error. Ale i v HTML se vám může stát, že se za jistých podmínek i „jednoduchý překřížený“ kód nevykreslí ideálně. Mějme tento kód:

<b>text<i> další </b> text</i>

Firefox si tenhle kód převede tošku jinak, hle:

<b>text<i> další </i></b><i> text</i>

Jak vidíte, jsou tam namísto jednoho <i> dvě. Což se za jistých okolností může projevit docela nevhodně. Viz třeba ukázková stránka (koukat ve Firefoxu). Validátor pak řve takto:

end tag for „B“ omitted, but its declaration does not permit this.

U XHTML je hláška trochu jiná:

end tag for „i“ omitted, but OMITTAG NO was specified.

Povinný atribut alt

U obrázků musí být nutně uveden atribut alt. Někdy otravná zbytečnost, ale většinou je smysluplný alt velice užitečný. Proto neváhejte a vždy alternativní text vypisujte, pokud možno co nejrelevantnějším textem. Popisek alt="obrazek1" je opravdu na . Validátor si na tom zase vyláme zuby:

required attribute „alt“ not specified.

Povinné atributy cols a rows

Další povinné atributy, tentokrát u prvku textarea. Udávají počet sloupců a řádků. Pevně věřím, že každý z vás stejně tyto údaje určuje přes styly, čímž se atributy stávají prakticky zbytečnými, ale holt jsou povinné. V podstatě to jsou jediné povinné prezentační atributy ;-). Validátor křičí podobně jako minule:

required attribute „rows“ not specified

required attribute „cols“ not specified.

Povinný atribut type

Pokud máte v kódu element style anebo script, musíte u nich vždy uvádět atribut type (u stylů obvykle s hodnotou text/css, u Javascriptu text/javascript). V praxi je to téměř zbytečné, protože prohlížeče předpokládají, že ve style bude CSS a ve script Javascript. Nicméně jsou to povinné atributy. U script se ještě používal atribut language, ovšem ten je pravděpodobně v praxi stejně zbytečný jako type a navíc je zavržený, ve striktní verzi již není povolený.

required attribute „type“ not specified.

Ampersand v odkazech

Pokud odkazujete na nějakou stránku a v adrese předáváte nějaké proměnné, oddělujete je znakem „&“. Ovšem tímto symbolem obvykle začínají entity, takže i odkazech musíte namísto obyčejného znaku „&“ použít entitu &amp;. Špatný zápis:

<a href="stranka.php?page=kontakt&num=2">další</a>

Správný zápis:

<a href="stranka.php?page=kontakt&amp;num=2">další</a>

Validátor nám v případě chyby předhodí hlášku:

cannot generate system identifier for general entity „num“.

Špatný doctype

Někdy se stane, že máte stránku odlazenou pro přechodnou (transitional) verzi, ale v kódu máte uveden striktní doctype. Anebo píšete v HTML, ale máte uveden doctype určený pro XHTML a validátor pak validuje podle úplně jiných pravidel, které nemohou sedět. Často to pak hlásí chyby, když validátor nahlásí na atributy, které striktní verze nezná.

Obsah v hlavičce

V hlavičce (element head) nesmí být žádný obsah, který se má zobrazit na webové stránce. Jedinou výjimkou tvoří element title. Jinak se nesmí stát, že byste měli v hlavičce prostý text. Toto se obvykle stává, pokud píšete v HTML a zkopírujete nějakým omylem XHTML hlavičku, kde jsou meta a link tagy psány odlišně: <meta />. K vaší smůle v HTML element meta ukončuje již to lomítko, nikoli až ta druhá závorka, ta se bude brát už jako obsah stránky a validátor zahlásí chybu:

character data is not allowed here.

Jedinečný identifikátor

Atribut id má tu vlastnost, že jeho hodnota musí být v rámci stránky vždy jednoznačná. Nemůže se stát, že na stránce bude dvakrát id="logo". Dvě loga mít můžete, ale u druhého loga již nesmíte použít tentýž identifikátor. Buď použijte třídy anebo ten prvek prostě nazvěte jinak. Zkrátka identifikátor máme od toho, aby jednoznačně identifikoval daný prvek.

ID „logo“ already defined

style v hlavičce

Element style (pozor, neplatí pro atribut téhož názvu) se může vyskytovat pouze v hlavičece (head). Obdobný element script sice můžete vměstnat i kdekoliv do těla stránky, ale style může být opravdu pouze v hlavičce.

A teď bonusové chyby:

Nedefinovaný stylovací jazyk

Píšete-li styly do elementu <style> nebo je načítáte pomocí <link>, určujete typ stylů pomocí atributu type. Pokud ovšem používáte přímý styl rovnou v nějaké značce pomocí atributu style (například: <p style="color:red">), také musíte nejprve určit, o jaký typ stylu se jedná. To se provádí pomocí meta značky v hlavičce: <meta http-equiv="Content-Style-Type" content="text/css"> (tato značka platí pouze pro kaskádové styly – v praxi se však jiný stylovací jazyk neužívá). To je všechno.

Nedefinovaný skriptovací jazyk

Jestliže vkládáte do stránky nějaké skripty, používáte u elementu <script> atribut type k určení typu skriptovacího jazyka (nejčastěji text/javascript pro Javascript). Jenomže když použijete atributy typu onclick nebo onchange, zkrátka on*něco*, musíte také určit, jakého typu je skriptovací jazyk, který chcete volat. To se provádí přidáním následujícího meta tagu do hlavičky: <meta http-equiv="Content-Script-Type" content="text/javascript">. Platí pouze pro Javascript – jiný skriptovací jazyk se prakticky nepoužívá.

Linkuj.cz!

Komentáře

12. December 2006, 20:37

Validitou jsem kdysi žil. Pak jsem zjistil, že stránky fungují nezávisle na validitě ve všech 3 prohlížečích, tak jsem validovat víceméně přestal (to neznamená, že jsem začal psát prasácké kódy). A dnes se už jen směju těm, kteří skorem brečí z toho, že na jejich stránce je jedna chyba v kódu :o).

12. December 2006, 20:55

Validátor je dobrá věc protože mě často upozorní na nějakou chybu která vznikla překlepem (tzn. ne že bych to tak úmyslně napsal) a sám bych si jí nevšiml (typicky třeba neuzavřený tag, chybějící alt u obrázku atp.).

Ale brát ho jako svatou knihu je imho hovadina. V naprosté většině případů to lze napsat validně a dělám to tak defaultně (to co není validní většinou (ne vždy) nebývá správné i z jiných hledisek), ale občas se najde případ kdy např. nacpání style do těla dokumentu (nebo jiná nevalidní věc) je nejlepší možné řešení jak rozumně vyhovět požadavkům klienta, ale takových okamžiků je minimum.

Taktéž je problém s validitou v případě že si zákazník svůj web může spravovat sám přes nějaký cms – pak neexistuje žádný opravdu použitelný a funkční způsob jak mu zabránit v tom aby tam nacpal nějaké prasárny.

12. December 2006, 21:01

[1] Validita je dobrá jako pomocník, ne pán. Může se stát každému, že se někde uklepne a může najít chybu. Největší přínos má ale pro začátečníky, kterým většinou zaručí lepší stránky, a pro ně je tento článek (tedy doufám, tyto chyby snad profík ani neudělá, natož aby jim nerozuměl).

12. December 2006, 21:03

Validátor je fajn věc už i proto, že díky němu občas objevím chybu, která má na triku rozházenej čaj v ostatních prohlížečích (trochu to nakousl zimmi přede mnou).

Ještě horší ovšem je, když je validita vyžadována při zakázce či při ucházení o pracovní místo (to bych vážně brečel, jak už taky zimmi řekl…)

# Sed
12. December 2006, 21:13

Nechápu, že se zde body 1–3 stále objevují, asi to je tím, že to všichni ví, tak to už ani nekontrolují, jinak si to nedovedu vysvětlit. Možná by však bylo lepší zjistit, jaké chyby se vyskytují nejčastěji při kontrole validátorem, vyšlo nějaké prohlášení nebo něco podobného?

12. December 2006, 21:23

Mně teda nejvíc dostává jak to spousta firem píše na we b, že je validní. A webdesignérské firmy to píšou na web svým klientům. A proč? Protože to přece návštěvníka webu strašně moc zajímá. :-)

12. December 2006, 22:12

Validita, stará známa. Čo tak zaujať postoj ani za, ani proti? Ja si myslím, že ak niekto „dokope“ stránku k tomu, aby sa validátoru páčila, tak to svedčí o jeho znalostiach a schopnostiach. Samozrejme vieme o chybách vo validátoroch, veď aj oni sú len programy (ľudia?).

Na druhej strane, ak mi validácia bráni v mojom cieli a nedá sa to čistým (rozumej validným) spôsobom dosiahnuť, tak ju odsúvam bokom. Treba uznať, že vyše 99% chýb (to jedno percento povyžujem za samotné chyby validátora), ktoré validátor hlási sú naozajstné chyby a chyby by mali byť opravené (ak sa teda dá).

Preto nie som ani proti ani za robenie „božstva“ z validátora. Na druhej strane nechápem slepému nasledovaniu jeho príkazov alebo jeho úplnú ignoráciu.

13. December 2006, 01:56

Jeden z největších problémů je ten ampersant v odkazech. Pokud se takový článek prohání nějakým nástrojem, tak vždy po prvním XML parsování je to rozhozené. Je třeba zajistit aby první aposlední parser byl ten v prohlížeči, nebo zkoušet různé obskurné hacky.

jako: &amp;amp;amp;

13. December 2006, 08:17

Nejradši mam frajery, kteří si do hlavičky dají XHTML 1.1, obsah odpovídá tak nejstaršímu HTML a ještě možná, a tím se podle sebe povýšili na úroveň moderního kódování. O jejich CSS v html zdrojáku ani nemluvě..

13. December 2006, 10:35

[8] co to je za parser (praser)?

13. December 2006, 13:06

Většinou není důvod psát nevalidně. Většinou není důvod se chválit, že je kód validně napsaný. Většinou není důvod se stydět, že píšu validně nebo že používám validátor. A obvykle není důvod se chválit, že píšu nevalidně.

Párkrát mi už pomohlo, když jsem na prototyp stránky pustil validátor.

# numero
13. December 2006, 15:30

Valdita mě nijak netíží, stejně píšu kód tak, že většinou projde. [9] Co mi vadí je to, když někdo použije na XHTML stránce do loga třeba div img /div místo h1 (a obrázkem na pozadí via css). Prostě tím pozbýva část inovací XHTML smysl. [10] Co nesnáším je ikonka „W3C Valid“.

13. December 2006, 18:31

„Povinné atributy cols a rows“ nepovažuji zase za takovou hovadinu, na stránce bez stylů a atributů cols, rows se občas zobrazí textarea o rozměrech 5×2 znaky, nebo tak nějak. Což mě přijde, pocitově, hodně blbé.

K validitě: něco napíšu, některé tagy ani neukončím, ze srandy tam dám doctype HTML trans a ejhle, validní to většinou je. V podstatě pustím validátor, jenom když se mě stránka nějak špatně zobrazuje.

Lukáš Havrlant: už jsi zjistil proč byl včera ten Munch na Googlu?

13. December 2006, 19:20

13. Peca:

„Povinné atributy cols a rows“ nepovažuji zase za takovou hovadinu, na stránce bez stylů a atributů cols, rows se občas zobrazí textarea o rozměrech 5×2 znaky, nebo tak nějak. Což mě přijde, pocitově, hodně blbé.

Bez stylů se ti rozjede celá stránka, to bych potom mohl říct, že bez stylů mám menu dole/nahoře a ne nalevo/napravo a proto bychom měli zase zpátky používat table layout. Je to použitelné i bez těhle atributů, takže nevidím důvod, proč by tam měly být nutně. Je lepší, když jsou uvedeny, to jo, ale nevidím důvod, proč by měly být povinné (to už bych spíš dal povinné height a width u obrázků).

už jsi zjistil proč byl včera ten Munch na Googlu?

Nezjistil, víc jsem se po tom nepídil :-)

# Peca
14. December 2006, 07:50

14. Lukáš Havrlant: Bez stylů se, pravda, stránka většinou zobrazí malinko jinak, ale lze to udělat tak, že je to pořád použitelné. Subminiaturní textarea podle mě ale použitelná není a proto asi otcové standarditáři učinili cols, rows povinné.

14. December 2006, 11:23

15. Peca:

Bez stylů se, pravda, stránka většinou zobrazí malinko jinak

Krásně diplomaticky řečeno :-)

Subminiaturní textarea podle mě ale použitelná není a proto asi otcové standarditáři učinili cols, rows povinné.

Ale je použitelná, možná není použitelná úplně nejlíp (navíc ani to není jisté, někdo nepotřebuje velkou textarea), ale to neznamená, že není použitelná. Nehledě na to, že kdyby to nebylo oužitelné, výrobci prohlížečů by pravděpodobně upravili základní CSS tak, aby bez stylů byla textarea větší. Bez stylů není takto použitelných více věcí, nevím tedy, proč jsou povinné zrovna cols a rows.

# MzK
16. December 2006, 20:57

chybovati je lidské, tak jsem člověk no

# Miloš
22. December 2006, 04:26

12. numero: Co nesnáším je ikonka „W3C Valid“.
Já to sice snáším také těžce, ale spíš mě to pobaví než naštve (teda – pokud to nejni na webu nějaké z daní placené ynstytuce, že…).

24. December 2006, 00:46

Validita není tak důležitá jako celková použitelnost webu. Tak to platí nyní a bude to platit vždy.

Nicméně, web plný chyb nebude patrně příliš použitelný…

Myslím, že je dobré naučit se psát validní stránky dle standardů, nikoli dle validátoru – který obsahuje chyby..

24. December 2006, 09:07

19. Clickmedia webdesign: Validátor žádné chyby neobsahuje, alespoň já o žádné nevím ;-).

# Ale blbost
19. October 2007, 19:51

Myslím, že řešit validitu, je šetření práce pro parser. Fakt se domníváte, že to parser ocení? VYpadá-li stránka tak, jak chcete, v prohlížeči, který vás zajímá, bože neřešte nějakou validitu. To je jen pro milovníky úřadů… Haha. Tahle stránka nefunguej v IE 7. Nicméně jistě bude validní… k smíchu

10. November 2007, 17:08

1. zimmi:
celkom ide oto :) kvoli vyhladavacom aby si spravne dal :)

Komentáře jsou uzavřeny