Zkratka na hlavní stranu: Alt + Shift + horní 2(ě)
Linkedin FB e-mail Google Plus Twitter

Hledat na tomto webu

 
 

Validita XHTML a CSS kódu – ano, či ne?
Reálný přínos, nebo zbytečná frajeřina?

 

Vytvořeno
12. – 14. 9. 2013

 

K čemu je to dobré

Validita kódu zvyšuje pravděpodobnost, že kód bude správně pochopen prohlížečem i vyhledávačem. Což jsou v zásadě jediné dvě věci, které od (X)HTML a CSS zdrojáku chceme (a ještě je někdy vhodné, když je srozumitelný i pro vývojáře-kodéra, a tomu vlastně validita také napomáhá).

Kromě toho je validátor ladicím nástrojem. Pomáhá kodérovi hledat chyby – když něco přestane fungovat, web se najednou rozsype (např. někde vypadla koncová značka párového tagu), tak je to právě validátor, kdo takovou chybu umí snadno a rychle nalézt – ale jen za předpokladu, že kód byl do poslední chvíle validní. Když vám z validátoru vyběhne 2500 chyb, z nichž většina tam byla, a nevadí vám, protože jde o drobnosti, nad které se povznášíte, tak v tom dlouhém seznamu budete jen těžko zjišťovat, která ze všech těch chyb je nejen formální, ale i fatální. Validátor tedy není nástroj pro vyučujícího, aby mu pomohl trápit studenty; validátor je nástroj pro kódera (např. tedy toho studenta), aby mu usnadnil kontrolu správnosti a hledání chyb.

Navíc většinu syntaktických chyb vyhodnocují, zpracovávají a snaží se opravovat různé prohlížeče různě,
takže o mnohé chybě by se autor webu nemusel hned dozvědět, a projevila by se až v praxi v nějakém méně obvyklém prohlížeči, ve kterém kodér web netestuje. Anebo zrádně až po nějaké době, když web běží, autor si ho nevšímá, a najednou přijde nový prohlížeč či nová verze stávajícího prohlížeče, a chová se jinak, než bylo dosud zvykem. Což někdy přináší trápení i u validního kódu, a nevalidita v takové situaci jistě neprospěje.

Jak s výsledky XHTML nebo CSS validátoru pracovat?

Vždy řešte jen první chybu. Validátor je jen robot, program. Může se stát, a dost často se také stává, že na jinak validním webu uděláte jen jednu drobnou chybu, která ale neinteligentního (zato poslušného a celkem spolehlivého) robota zmate tak, že mu přestane dávat smysl i celý zbytek kódu, protože ten zbytek kódu se v tu chvíli čistě syntakticky (formálně) stane nesmyslným, či spíše v daném místě a novém chybném kontextu nepatřičným.

Takže kouknout na první chybu (tu nejvyšší ve výpisu, na nejdřívějším řádku vašeho kódu i validátorova hlášení o výsledku kontroly), vyřešit ji, a znovu nechat kód zkontrolovat. Dost často se stává, že najednou jakoby zázrakem zmizí třeba dalších deset chyb (vycházím z několikaleté praxe ve výuce nejen XHTML pro úplné začátečníky na fakultě informatiky).

Z tohoto pravidla je jedna výjimka – jestliže vidím, že jsem se té jedné stejné chyby dopustil vícekrát, tak můžu opravit hned všechny její výskyty, a nemusím čekat, až mě o to validátor extra požádá. U studentů šlo typicky o případy, kdy si editor nepřepnuli do režimu XHTML, a neměli nepárové elementy (typicky br nebo img, příp. hned meta) ukončené lomítky.
Když naleznu chybu, kterou jsem systematicky opakoval, tak opravím hned všechny její důsledky (a ideálně hned také provedu opatření, aby se neopakovala... např. tedy přepnu editor do režimu XHTML, abych po stisku Ctrl+Enter získal <br />, a ne <br>).

Obcházení validátoru

Jak

K obcházení validátoru (skrývání nevhodné části kódu před jeho očima) se používá javascript. Dříve stačilo použít pouhé document.write(), ale pak se HTML validátor ve své důslednosti naučil (resp. "byl naučen", abych pestrostí textu nepokroutil význam) kontrolovat i kód vkládaný javascriptem.
Dnes se tedy používá XML element cdata obalený javascriptovým zakomentováním.

Proč (Kdy)

Ale proč validovat a přitom validátor obelhávat? Má to smysl? Někdy ano:

Typicky při vkládání pluginu Facebooku, který je nevalidní a jehož nevaliditu nemůžeme ovlivnit. A web se bez něj kdyžtak obejde. A hlavně nám díky skrytí do cdat nezaseká výstup validátoru, jenž tak můžeme i nadále využívat k jeho diagnostickému účelu. Zkrátka tím cdata de facto řekneme "O téhle vkládané hrůze vím, tu mi nehlaš, zajímá mě jen to ostatní, co si tu napáchám sám."

Hlavně ale facebookové pluginy (alespoň některé) plní jednu zásadní podmínku: Tak jako tak jsou závislé na javascriptu, bez něj nefungují, takže vložením přes javascript neomezíme jejich funkčnost a můžeme si tedy dovolit je javascriptem vkládat.

Nebezpečí javascriptu obecně (nezávisle na validátoru)

Jinak obecně může (zbytečné) vkládání (důležitého) obsahu stránky javascriptem vadit, web nesmí být na javascriptu závislý. JS můžeme využít ke zvýšení uživatelova pohodlí, ale vše podstatné musí bez javascriptu fungovat (mám na mysli běžné informačně-komunikační weby; ne on-line grafické editory, hry a jiné specifické webové aplikace).

V posledních letech letí AJAX – mnohdy je smysluplný, vhodný a příjemný, můžu ho použít, ale celé řešení musím mít ošetřené tak, aby nějak (byť přirozeně s menším pohodlím) fungovalo i bez JS.
(A také pozor na to, aby se ajaxem zbytečně nevkládalo to, co se klidně může načíst jako celá nová stránka – aby stejně jako u překonaných framů (rámů) nedošlo k tomu, že veškerý obsah bude na jednom URL, a nebude tak možné na něj předat odkaz, uložit si ho do záložek, navštívit ho z historie, apod.)

Skrytí části kódu i bez javascriptu

Jak tedy skrýt část HTML kódu před validátorem a přitom zajistit funkčnost skrytého kódu i při nedostupnosti javascriptu?
Mám čerstvě vyzkoušeno, že můžu

  1. do javascriptu zabalit jen javascriptově zakomentovanou počáteční značku cdata, pak celý javascript ukončit,
  2. úplně normálně natvrdo do HTML vložit potřebný element (nevalidní třeba proto, že jde o facebooku určenou metaznačku podle normy Open Graph, kterou z nějakého konkrétního důvodu nechci použít jako normu daného dokumentu (stránky)),
  3. a pak v dalším elementu script zase v JS komentáři ukrýt koncovou značku od cdat.

Tímto postupem skryjeme před validátorem kód, který je naprosto natvrdo staticky napsán přímo ve zdroji HTML kódu a není tedy závislý na dostupnosti javascriptu.

Příklad aplikace naleznete v mém řešení pro formálně validní vložení facebookových komentářů do stránky,
s možností odložit vložení pluginu (a veškerou komunikaci s FB vůbec) až do okamžiku, kdy si uživatel bude vložení FB komentářového pluginu výslovně přát.

Validátor není vševědoucí

Když jsem kdysi při výuce na FIM UHK zaučoval jednoho nového kolegu doktoranda, aby se mnou a dalšími vyučoval tvorbu webu,
tak se nejdřív domníval, že při kontrole projektu stačí se podívat, jestli je web validní, a tím je hotovo.

Ale kdepak, validita je jen jednou z mnoha vlastností webu. V podstatě říká pouze to, že zdroják je syntakticky bezchybný. Což je v některých jiných programovacích jazycích naprostá samozřejmost, při jejímž porušení program vůbec nelze zkompilovat, ergo spustit.
Při tvorbě webu jde ale také o sémantiku, přístupnost (do tohoto marketingově nezajímavého pojmu odjakživa spadá i přizpůsobivost, jež se nově označuje marketingově zajímavým newspeakovým termínem "responsivní webdesign"), použitelnost a další podobory.

Hodnocení každého semestrálního projektu spočívalo v kontrole desítek položek (požadavků/kritérií/parametrů webu), přičemž validita všech stránek projektu byla jednou z těchto položek (jeden řádek v xls tabulce).
Špičkový projekt jsem zkontroloval za deset minut, průměrný za půl hodiny, hodnocení nejtragičtějších neštěstí si vyžádalo třeba 50 minut, aby se dalo dopátrat toho, co autor jak myslel, co je co (co je splněno, a co není), aby se ta tragédie dala objektivně spravedlivě obodovat.

Takže validita je sice důležitá, ale zdaleka není jediným měřítkem kvality webu.

Ale je užitečný

Rozhodně ale doporučuji validátor používat, zejména v začátcích tvorby webu, kdy člověk učící se úplným základům celkem pochopitelně občas přehlédne, zapomene nebo nepochopí to, či ono. Což je úplně normální součást učení se něčemu novému, a mj. v této fázi je validátor převelice užitečný. Ale nejen v ní.

Přestože jsem v době, kdy jsem tvorbu statického webu učil, dokázal při cvičeních často už při pohledu do studentova XHTML (či CSS) zdrojáku nalézt tu chybějící konec tagu, tam záměnu atributu za element, a jinde zas něco jiného, aniž bychom museli čekat, až nás na tu syntaktickou chybu upozorní kolega validátor (který při cvičení 20 studentů sedících na jedné IP adrese někdy odmítal spolupracovat a dožadoval se použití různých IP adres),
tak při tvorbě složitějšího dynamického webu, kdy se v rozvětveném PHP kódu občas objeví nějaké to XHTML, se můžu někdy ukouknout, a validátor mi pak umí efektivně pomoci.


(Sepsáno částečně pro zachycení toho, co jsem na toto téma říkával při výuce, dříve, než to zapomenu
ale hlavně jako souhrn důvodů pro a proti snaze o validitu kódu, protože některými praktiky je validita kódu považována za zbytečnou, jinými za důležitou a užitečnou. Do určité míry jde o jeden z náboženských sporů, a tento článek by měl sloužit tomu, aby se každý mohl informovaně rozhodnout, u kterých projektů pro něj validita důležitá je, a u kterých není.)

Komentáře návštěvníků

Poskytovatelé diskusních služeb (Facebook, Disqus) si do cookies ve vašem prohlížeči ukládají různé údaje, čímž mohou narušit vaše soukromí. Načtením diskusí na vaši žádost s tím souhlasíte.
Na drtivé většině webů se plug-iny Facebooku, Googlu, Disqusu a jiných třetích stran načítají automaticky; a že u mě se to děje až na vaše výslovné přání (tedy většinou neděje), je moje specialitka pro ochranu vašeho soukromí.
Discussion plugins from 3rd parties (Facebook, Disqus) provide information about you to theirs providers, saving some information into cookies in your browser. If you will load discussion on your request, it means you agree with it.

Pokud máte účet na Facebooku

(nebo jiném z několika podporovaných serverů)

Chovejte se tady jako doma, ať vidíme, jak to u vás vypadá.
[nápis v linkovém autobusu]

A priori upřímně doufám, že mě obsah a forma příspěvků nedonutí k žádným moderátorským zásahům,
ale právo zásahu si vyhrazuji, protože tyto komentáře jsou přístupné komukoliv, kdo se zaregistroval na FB, a já netuším, co se tu může objevit.

V souvislosti s vkládáním odkazů na Vaše weby do komentářů nejsem hysterický. Odkaz na nekomerční web s relevantním obsahem, který může pomoci ostatním návštěvníkům, uvítám.

 
Načíst sem facebookové komentáře
pro čtení (aktuální počet: 0)
nebo přidání vlastního

(vyžadován javascript)
 
Komentáře se záměrně nenačítají samy, aby až do jejich načtení:
Facebook nevěděl, že jste tady právě vy,
nezkazila se přizpůsobivost webu a kvalita kódu
a nezvyšoval se datový tok.
 
Facebook ví, že tuto stránku teď někdo navštívil, ale na rozdíl od řešení obvyklého na drtivé většině jiných webů s FB pluginy tady díky mému způsobu realizace nepoznal, že jste to byli právě vy.

 

Pokud nemáte účet na Facebooku

Komentářový plugin Facebooku umožňuje vkládat komentáře i prostřednictvím účtů na několika dalších serverech (i když u nás nejsou moc používané).

Pokud nemáte žádný účet, prostřednictvím kterého byste sem mohli napsat komentář, neberte to jako diskriminaci. Zkrátka jsou tu komentáře alespoň pro uživatele FB a pár dalších serverů, což je lepší, než kdyby tu nebyly vůbec.

Kromě zjevné nevýhody má toto řešení i své výhody:

  • Při použití své FB identity by se většina uživatelů mohla zamyslet, co vypouští z prstů.
  • Odkaz na komentovanou stránku se může šířít Facebookem.
  • Ve výchozím nastavení se přednostně zobrazují komentáře zanechané návštěvníkovými facebookovými známými, což v důsledku podporuje obě předchozí výhody.

Navíc většina neuživatelů FB zůstává mimo FB ze svého vlastního rozhodnutí, takže jim neužívání Facebooku přináší různé pro ně důležité výhody (soukromí, čas), které snad vykompenzují nemožnost sem něco napsat.
Případně je možné jako náhradní možnost použít návštěvní knihu společnou pro celý web.
Časem třeba napíšu nebo nasadím nějaký jiný komentářový systém, který bude mít menší omezení pro komentátory, ale teď je tu alespoň toto.

Ale i tak si můžete alespoň přečíst komentáře od ostatních.

Strukturovaný opis komentářů

Pro:

  • paranoidní jedince, kteří nechtějí, aby FB věděl, že právě oni navštívili tuto stránku,
  • programátory, kterým se ta struktura vnořených polí bude líbit,
  • uživatele mobilních zařízení, kteří nechtějí, aby FB pokazil přizpůsobivost webu,
  • případný prohlížeč bez javascriptu
  • webový archiv, který si je takto uloží jako statický text dostupný v budoucnu i bez spolupráce Facebooku.
Array
(
    [error] => Array
        (
            [message] => (#4) Application request limit reached
            [type] => OAuthException
            [is_transient] => 1
            [code] => 4
            [fbtrace_id] => FdPn9CgWOpr
        )

)

Komentáře Disqus

Sem se javascriptem vkládají komentáře Disqus, teď Vám ale asi javascript nefunguje.
System for comments Disqus doesn't work without javascript.

Skok nahoru na: Navigační menu (klávesová zkratka „5”)

Zaujala Vás tato stránka?

  • Přidat do záložek (Ctrl+D)
  • Sdílet odkaz (vysílačka)Skok nahoru na:
  • Vytisknout (Ctrl+P)
  • Citovat podle ČSN ISO 690

    Tuto stránku

    ADÁMEK, Martin. Validita XHTML a CSS kódu – ano, či ne?: Reálný přínos, nebo zbytečná frajeřina?. Martin Adámek [online]. Náchod [cit. 2017-12-11]. Dostupné z: http://www.adamek.cz/clanky/popularne-odborne/validita-html-kodu

    Celý web

    ADÁMEK, Martin. Martin Adámek [online]. Náchod [cit. 2017-12-11]. Dostupné z: http://www.adamek.cz

 

 
 

Národní kulturní dědictví

Stránky archivovány Národní knihovnou ČR Tyto stránky jsou pravidelně archivovány Národní knihovnou ČR pro svou kulturní, vzdělávací, vědeckou, výzkumnou nebo jinou informační hodnotu za účelem dokumentace autentického vzorku českého webu. Jsou součástí kolekce českých webových stránek, které NK ČR hodlá dlouhodobě uchovávat a zpřístupňovat pro budoucí generace. Jejich záznam je součástí České národní bibliografie a katalogu NK ČR.  

 

 
 

Pro rozptýlení

Jak rozeznat informatika od bezdomovce?
Na první pohled těžko, ale informatik má v kapse mobil s operačním systémem.

 

Pro zamyšlení

Válka je hrozná, nepřípustná, ale ještě hroznější a nepřípustnější je otroctví.
[Karel Čapek]