EGTwins - logo
Validace kódu webu. Co to je a proč je důležitá?

VALIDACE KÓDU WEBOVÉ STRÁNKY

Validace kódu je téma, které trápí většinu vývojářů, nebo minimálně ty, kteří chtějí mít svůj projekt co nejlepší. O co se však jedná? Je důležitá, nebo se nevyplatí nad ní ztrácet čas? Jak zjistím, zda je webová stránka a její kód validní? Tento článek Vás krátce seznámí s těmito nezodpovězenými otázkami. Je určen jak pro začínající webové vývojáře, tak i pro laickou společnost.

Co je ta Validita kódu?

Validace určuje, jak korektně je stránka napsaná (nakódovaná) a v případě nalezení chyb se řeší jejich odstranění. Jedná se tedy o fázi oprav, úprav a optimalizace samotného zdrojového kódu. Validace se nejčastěji využívá pro kontrolu validity u HTML, či CSS. Pro laickou společnost, jsem ve zkratce popsal, co to HTML a CSS je:



Je Validita důležitá?

Vzhledem k tomu, že již víme, co to je HTML/CSS a jak tyto jazyky, alespoň obecně fungují, je ten pravý čas si říct, jak je to s důležitostí validity.

Dám praktický příklad z běžného života. Je firma A a firma B. Obě prodávají například budíky, které jsou na pohled stejné a za podobnou cenu. Firma A kupuje budíky od certifikovaného výrobce, tudíž jsou vyráběny podle určitých pravidel a jeví se věrohodně. Na druhou stranu firma B prodává budíky, vyrobené kdo ví odkud a kdo ví jakým způsobem. Při důkladné recenzi budíků od obou firem, byly budíky, prodávané firmou A, z kvalitních materiálů a vnitřní komponenty krásně a úhledně zabudovány, kdežto u budíku od firmy B byly komponenty naházeny tak nějak „všelijak“. Následná oprava budíku od firmy B by bylo peklo a už na první pohled při prohlídce komponentů budíků bylo jasné, že budíky prodávané firmou B nezaručují takovou životnost a kvalitu, jako budíky od firmy A.

Validita zdrojového kódu nemá daleko od tohoto praktického přirovnání. Pokud webová stránka obsahuje spoustu validačních chyb, může se stát, že stránka nebude fungovat správně, bude se špatně zobrazovat, nemusí být dostatečně rychlá, nebo se na každém prohlížeči bude zobrazovat špatně. Jak Shaun Anderson z hobo-web.co.uk zjednodušeně napsal: co indexovací robot (někdy také nazývaný crawler), například od Google přečte – to také narankuje. Toto „rankování“ je důležité pro vyšší pozice ve výsledcích vyhledávání. Nutno zmínit, že Google nezvýhodňuje validní weby nad invalidními weby. Nicméně, i přesto není dobré validitu kódu podceňovat. Pokud by byl totiž kód velmi špatný, tak by jej nemusel indexovací robot správně pochopit a interpretoval by obsah jinak. Prohlížeč by tak například o některém obsahu ve špatně validním HTML fragmentu ani „nevěděl“ . Naštěstí je Google přizpůsoben na tzv. Low-quality kódy, z toho důvodu se s řadou chyb tak nějak popere.

Jsou dva tábory s opačnými názory. Jeden říká, že validace není potřeba, druhý že ano. Pravdou je, že prohlížeče jsou již velmi chytré a řadu chyb si domyslí a opraví. Na druhou stranu je lepší se chybám vyvarovat a samotná validace je taková druhá kontrola. Nikdo totiž nezaručí, že si to prohlížeč opravu sám „opraví“. Tudíž z mého názoru weboví vývojáři, kteří říkají, že validace je úplně zbytečná, zřejmě pojem „validace“ neznají nebo se jim nechce řešit. Samozřejmě u začátečníků vývojářů, nebo webových „kutilů“ se chyby najdou a žádný učený z nebe nespadl. U profesionálů, kteří poskytují webové služby, by se však tyto chyby měly vyskytovat v co nejmenší míře. Tudíž ano, validní kód je důležitý.

Jak zjistím, že kód webové stránky není validní?

K zjištění chyb existuje řada nástrojů. Nejoblíbenější jsou on-line nástroje, u kterých stačí zadat URL odkaz stránky, kterou chcete zkontrolovat a validátor Vám zobrazí případné chyby i s popisem, jak je eliminovat. Mezi známý validátor určitě patří W3C validátor (celý název W3C: World Wide Web Consortium, je mezinárodní konsorcium, které společně s veřejností vyvíjejí webové standardy). Jak u validátoru pro HTML, tak CSS lze zvolit míru „striktnosti“ a typ HTML (Validator typ dokumentu umí automaticky detekovat, nemusíte nic nastavovat, stačí jen zadat URL). EGTwins je napsán v HTML5, z toho důvodu byla testována validace HTML5. Bohatě postačí základní nastavení. Pro validaci CSS bohatě postačí úroveň 3, jelikož střiktnější úrovně berou za chybu i takové věci, se kterými kóder občas nic nenadělá, nebo jsou zde některé hlášení zbytečné, jako upozornění na webkity a podobné. Důležité je, aby kód nebyl rozbitý a již úrovní 3 je kód validní. Není potřeba tedy řešit hlouposti, na které není čas 😄. Nutno zmínit, že u spousty webů není ani úroveň 3 dosažena, proto většinou postačí úroveň 3. Skvělé je, že čím více začnete tyto nástroje využívat, budete si všímat jednotlivých chyb a při dalším vývoji již budete psát krásný a validní kód třeba již „od píky“. Zde jsou odkazy pro kontrolu validace HTML a CSS

Zde je náhled validace naší stránky egtwins.cz. Jak můžete vidět, validace proběhla pro HTML i CSS v pořádku a zdrojový kód je bez chyb, což naznačuje zelené hlášení.

Validní HTML kód stránky egtwins.cz | EGTwins Validní CSS kód stránky egtwins.cz | EGTwins

V případě správné validace si může uživatel vložit na svůj web následující ikonky, které se uživateli vygenerují po validaci. Jedná se o známku toho, že webová stránka je validně napsaná.

Ověřit CSS! HTML5 Powered with CSS3 / Styling, and Semantics

Na druhou stranu je níže ukázka hlášení chyb z jiné stránky, u které není zdrojový kód v pořádku a bylo by dobré nad opravou popřemýšlet. Ukázkovou stránku jsme narychlo vytvořili pro prezentaci, z toho důvodu nebyl kladen důraz na design ukázkové stránky.

Náhled špatné stránky | EGTwins Validační chyby HTML | EGTwins Validační chyby CSS | hlášení špatného kódu

V případě hlášení chyb se zobrazí různé errory a warningy.

Errory“ jsou chyby, které jsou opravdu špatně a měly by se opravit.
Warningy“ jsou upozorňovací hlášky, nejedná se však o chyby. Jednoduše řečeno, pokud hlášky neupozroňují na velmi závážný problém (warning může totiž upozorňovat například i na možné zneužití některých atributů HTML tagů), tak není třeba warningy řešit a stačí jen o nich vědět.

Může se však stát, že za některé chyby, které zobrazí validační nástroje, nemůže samotný vývojář, ale třetí strana, od které má poskytnutý fragment kódu, například pro externí rezervační systém atd.. Tudíž je nutné brát některé validační chyby s rezervou a kouknout se, o jaké chyby se jedná.

Na závěr by bylo dobré také zmínit, že validace není jediný faktor pro úspěšný web. Web by měl být psán pro lidi, ne pro roboty. Hlavní je mít stránku přívětivou pro uživatele s co nejkvalitnějším obsahem. Jinými slovy, nemusíte se držet validace zuby nehty, z pár validačních chyb se svět nezboří. Pokud máte kvalitní obsah, tak validací posunete úspěšnost Vašeho webu o něco dál. Zároveň validní kód je kvalitní vizitka webaře a jeho práce.

Doufáme, že byl pro Vás článek přínosný a již víte, co to je validace a že to není žádné magické slovo. Pokud se Vám článek líbil, budeme velmi rádi za sdílení a lajk.

Tento článek byl napsán ze zkušeností autorů a odborných článků/zdrojů uvedených níže.


Přidáno 16-10-2020, Autoři: Milan Řehoř, Jan Řehoř
Externí zdroje: