Weblint je HTML validátor, tedy takový kontrolor, který se snaží odhalit syntaktické i sémantické chyby v HTML kódu. Vlastně dělá to, co třeba kompilátor (resp. preprocesor) céčkového nebo jiného zdrojového kódu. HTML se (bohužel?) nekompiluje a tak na rozdíl od céčka mohou být vypuštěny do světa pěkné zrůdnosti (tedy v céčku samozřejmě také, ale rozhodně v menší míře). A právě weblint je tady proto, abyste se mohli vyhnout chybám, které snadno do kódu naseká člověk a ještě snáze leckterý WYSIWYG editor.
Weblint vznikl vlastně už v roce 1994 a celkem slibně se vyvíjel. O jeho oblíbenosti svědčí i to, že byl zahrnut do online validátoru W3 konsorcia. Ovšem už s HTML 3.2 nebyly výsledky jeho snažení úplně optimální a s nástupem verze 4.0 se stal prakticky nepoužitelným. Jeho vývoj ustal v září roku 1997. Naštěstí pro nás se ovšem nedávno probral z letargie a opět se rozjíždí. Aktuální verze 1.9.3 (nebo-li 2.0pre) podporuje HTML 4.0 a je zajímavé, že jádro weblintu je realizováno pomocí perlového modulu, takže může být integrováno do jiných aplikací (s distribucí získáte verzi pro příkazovou řádku a CGI verzi).
Do budoucna se počítá s některými zajímavými vylepšeními, jako například kontrola nefunkčních odkazů, kontrola kaskádových stylů a hlavně (na což se těším nejvíce) kontrola, zda požadované tagy odpovídají definici DOCTYPE.
A teď již přistupme k testu, který jsem pro weblint připravil. Udělal jsem testovací stránku, do níž jsem napěchoval následující oblíbené chyby:
- Chybí tag DOCTYPE
- Stránka není uzavřena do tagu HTML
- Definice BODY určuje barvu pozadí, nenastavuje však barvu textu a odkazů (pozn.: toto není přímo chyba, ale může to způsobit nečitelnost stránky, neboť barva textu se tak obvykle převezme z výchozího nastavení prohlížeče)
- Tag TABLE obsahuje nesmyslný parametr VALIGN
- První řádek tabulky je definován s nesmyslným parametrem BGCOLOR, který navíc nemá hodnotu uzavřenou do uvozovek, ačkoliv obsahuje speciální znaky
- Buňka s obsahem B2 nemá hodnotu parametru BGCOLOR uzavřenou do uvozovek, přestože obsahuje speciální znaky
- Tagy TD a TR v prvním řádku nejsou ukončeny (pozn.: ani být nemusí, je to tak trochu chyták)
- V textu se vyskytují speciální znaky & a "
- V textu je entita neukončená středníkem
- Tag H1 je ukončen tagem H2
- V textu jsou překříženy tagy B a FONT (B..FONT../B…/FONT)
- Další tag B není ukončen
- Obrázek bez definice ALTu
A co na to weblint?
line 1: <HEAD> must immediately follow <HTML>
line 1: outer tags should be <HTML> .. </HTML>.
line 5: should set all or none of BGCOLOR, TEXT, LINK, ALINK, VLINK attributes on BODY element
line 19: unknown attribute „VALIGN“ for element <TABLE>.
line 21: value for attribute BGCOLOR (#00A000) of element TR should be quoted (i.e. BGCOLOR=„#00A000“)
line 25: value for attribute BGCOLOR (#FF0000) of element TD should be quoted (i.e. BGCOLOR=„#FF0000“)
line 33: malformed heading – open tag is <H1>, but closing is </H2>
line 34: </B> on line 34 seems to overlap <FONT>, opened on line 34.
line 37: the ALT attribute is required for the <IMG> element.
line 37: IMG does not have ALT text defined.
line 38: no closing </B> seen for <B> on line 35.
První chybu (absence DOCTYPE) weblint ignoruje, naopak na chybějící tag HTML a přebývající parametr VALIGN upozorňuje. Správně poukazuje na neuzavření hodnoty parametru BGCOLOR do uvozovek, ovšem ignoruje, že u tagu TR tento parametr neexistuje. Nenechal se nachytat neuzavřeným TD a TR, ale neupozornil na použití speciálních znaků v textu ani neuzavřenou entitu. Výborně informuje o kombinaci tagů H1 a /H2, hned je zřejmé, v čem je problém, což platí i na informaci o překřížení tagů. Na chybějící ALT u obrázku upozorňuje hned dvakrát (asi mu to připadá důležité :) a neopomenul ani neuzavřený tag B.
Mile mě překvapilo i to, že weblint obsahuje kontrolu na chybu v nastavení barev v BODY (BGCOLOR bez TEXT, LINK, …).
Pokud navíc použijeme parametr pedantic, je weblint ještě důkladnější, ale to už obvykle není nutné. Je ovšem užitečné, že v pedantic režimu weblint upozorňuje například na to, že přidání parametrů WIDTH a HEIGHT tagu IMG může zrychlit zobrazení stránky v prohlížeči.
Weblint nezapomíná ani na možnost automatizované kontroly. V režimu tzv. „terse messages“ je jeho výstup snadno zpracovatelný například ve skriptech apod. Například chybějící ALT je vyjádřen takto:
./index.html:38:img-alt
Weblint je podle mě skvělý nástroj a i když má ještě v detekci chyb určité mezery, ty nejobvyklejší odhaluje s jistotou a informuje o nich velice přehledně, čímž u mě výrazně stoupl v ceně. Doporučuji jej používat – ušetříte si tak často ruční hledání toho, „proč to zase nefunguje jak má“.
V dohledné době se k tomuto tématu ještě vrátíme, tentokrát se ovšem budeme prát s hledáním nefunkčních odkazů…
ČLÁNKY DO MAILU