Hlavní strana » Návody » Fekální styl
...aneb jak by rozhodně zdrojový kód vypadat neměl...
Asi nejznámnější a nejčastější ukázka fekálního stylu v praxi. Naprostá většina exemplářů naštěstí pochází z dob, kdy ještě kaskádové styly nebyly v příliš velkém rozmachu, takže to autory víceméně omlouvá. Novější weby se již obvykle tomuto stylu psaní vyhýbají, avšak pravidlo to také není. Proč jsem tabulkový layout označil za fekální styl? Už jenom používání tabulky na layout není zrovna dvakrát sémantické a pak celá stránka bývá obvykle prošpikována značkami jako <font>
(s patřičnými atributy pochopitelně), místy se vyskytne třeba i <u>
, nadpisy jsou tvořeny značkou <b>
apod. V celé stránce se pak nedá vyznat a těžko se na ni v budoucnu aplikují styly. Pokud jenom můžete a máte k tomu prostředky a schopnosti, vyhněte se, prosím, tabulkovému layoutu.
Tenhle styl psaní nemám rád snad ještě více, než ten předchozí. Představte si stránku, kde jsou v elementu <body>
pouze značky <div>
, <span>
, <img>
a možná nějaký ten formulář. Takhle nějak vypadá přeDIVovaná stránka. Tento web postrádá jakoukoliv sémantiku (předchozí příklad měl alespoň špatnou sémantiku), jakoukoliv strukturu, je to prostě jen hromada bezvýznamných oddílů. Doufám, že již i toto pojetí webdesignu je na pokraji úpadku. Kaskádové styly mají oddělit formu a obsah, nemají k sobě stáhnout obojí, na to je třeba pamatovat. Stránka má přímo hrát různými HTML značkami, od toho je tady máme. Představte si, že čtete nějakou knížku a na každém řádku se vyskytuje jedno a totéž slovo. Také by se vám to nelíbilo a na knihu byste se patrně vykašlali (prohlížeč má tu smůlu, že se vykašlat nemůže :-)).
Toto je také poměrně častá chyba. Někteří webdesigneři (většinou neznalí kaskádových stylů) používají HTML značky jak se jim zachce, respektive jak se jim to zrovna hodí. Takže když potřebují odsadit odstavec, tak místo značky <p>
použijí <blockquote>
, které má nadefinované nějaké to základní odsazení od okraje. Další perla je třeba změna pozadí odstavce při najetí myší na odstavec. Někdo totiž udělá celý odstavec odkazem a nadefinuje běžnou pseudotřídu a:hover
. To je ovšem špatně, protože odstavec ve skutečnosti odkazem není, tudíž se musí použít Javaskript (nebo počkat na lepší podporu Internet Exploreru). Nepřetvářejte si zavedené značky k obrazu svému, vždy existuje sémantičtější řešení buď přes Javaskript nebo kaskádové styly.
«« Nesémantické značky » rozcestník « Desatero sémantického webu »»
o web se stará Lukáš Havrlant (kontakt)