Notice: Undefined index: print in /home/ftpsite/joshis.iprofil.cz/articles.php on line 61
Tvorba webu s čistým sémantickým obsahem - joshis.iprofil.cz
 
[ Webhosting profitux.cz ]
Nové osobní stránky Petra Dvořáka

Moje články

hertpl: Undefined index: page_title(template line: 251) in templates/articles.html on line 145

Verze pro tisk (ladí se...) >>

Tvorba webu s čistým sémantickým obsahem

Klíčová slova: sémantika webu, přístupný web, zásady správné tvorby webu

Úvod

K nepřehlednosti některých webových stránek značnou mírou přispívá i fakt, že tvůrce webu upřednostnil formu (tedy to jak web vypadá) před obsahem. Často tomu tak bývá z "dobrých úmyslů", totiž ze snahy učinit web co nejvíce originálním nebo třeba z důvodů "urychlení" tvorby webu. Záměr originality se však často nezdaří, ale i když už je originality dosaženo, uživatel to často ne(d)ocení - řadoví uživatelé webu jsou značně konzervativní co se formy týče. Zároveň uspěchaná tvorba - například formátování stránky pomocí tabulek, vynechávání atributu alt u obrázků a podobně - snižuje čistotu sémantiky webu, a tak má za následek snížení přístupnosti webu (např. pro zrakově handicapované uživatele). Kvalitní web tedy podle mého názoru znamená v první řadě web s kvalitním (a sémanticky jasným) obsahem a kvalitní strukturou.

Sémanticky správně pojatý web je zároveň mnohem vhodnější pro jakékoli automatické zpracování. V tomto ohledu je asi nejdůležitější indexace webu pro potřeby vyhledávání (pomocí služeb jako je Google, Jyxo, Centrum, a podobně) - "weby s dobrým obsahem" dostanou znatelně vyšší page-rank a jsou tedy více viditelné...

Více o jednotlivých elementech, které tu v jednotlivých bodech uvádím, najdete ve specifikacích, třeba ve specifikaci HTML 4.0.

EDIT: Narazil jsem na velice pěkný web o sémantice HTML značek (www.semantika­.name). Je nutno zde podotknout, že autor Yuhů (autor stránek jakpsatweb.cz) s tímto webem semantika.name - jak sám uvádí - nesouhlasí. Já ale zase spíše nesouhlasím s ním (vzhledem k váze kterou oproti jeho slovu má moje je to ale asi jedno...). Web se má podle mě tvořit v rámci sémantiky, kterou k tomu zvolený jazyk (tedy v našem případě HTML) zavádí. Ta dle mého názoru jasně říká, co HTML dokument může obsahovat (odstavce, seznamy, nadpisy, ...) a co ne (reklamy, poznámky pod čarou, navigace nemají v HTML vyčleněn sémantický význam).

Titulek stránky

Především z hlediska vyhledávačů, ale i kvůli orientaci uživatele na webu, bychom neměli zapomenout každé stránce přiřadit jednoznačný titulek, tedy vyplnit vhodně element <TITLE> (ten se nachází v hlavičce, tedy už v elementu <HEAD>).

To, co je uvedeno v titulku stránky tvoří podstatně více než polovinu page-ranku většiny vyhledávačů. Element <TITLE> je totiž vlastně stručný popis toho, co daný dokument obsahuje.

Navíc se text, který je v titulku uveden zobrazuje v prohlížeči v historii navštívených stránek - budou-li mít všechny naše stránky stejný titulek, uživateli orientaci v historii neusnadníme.

Nadpisy

Hlavní nadpis - element H1

Důležitým sémantickým prvkem stránky je její hlavní nadpis. Tělo každé stránky - už z té podstaty, že obsahuje nějaký obsah - by mělo mít alespoň jeden nadpis první úrovně (HTML element <H1>), který tento obsah shrnuje. To platí i v případě, že by měl tento nadpis být neviditelný (CSS vlastnost display:none; nebo visibility:hid­den;) a překrytý (resp. podložený) například obrázkem se stejným (různě umělecky/graficky ztvárněným) textem.

Přítomnost nadpisu první úrovně je velice důležitá i s ohledem na optimalizaci stránky pro vyhledávače. Ty totiž přiřazují nadpisům první úrovně vyšší váhu, než obyčejnému textu, a to třeba i zvětšenému tak, že vypadá stejně jako nadpis první úrovně - to nemá žádný vliv. Rozhodně pak vyhledávače přiřadí textu v elementu <H1> mnohem vyšší váhu, než obrázkům s textem nadpisu.

Další důvod pro přidávání nadpisu první úrovně je ryze psychologický - návštěvník, který vidí jasný, stručný a výstižný nadpis spíše pozná, jestli stránka obsahuje informace, které hledá. Sníží se tedy pravděpodobnost, že návštěvník hned poté, co na stránku přijde, také bez zkoumání jejího obsahu odejde...

Nadpisy vyšších úrovní - elementy H2 až H6

Pro strukturování textu je také velice důležité, aby byly dlouhé texty členěny na bloky pomocí nadpisů vyšších úrovní.

Zde je potřeba si uvědomit jedno: za nadpisem první úrovně následuje nadpis druhé úrovně, za nadpisem druhé úrovně následuje nadpis třetí úrovně, a tak dále. Nemělo by se stávat (a sémanticky to není správně), že za elementem <H1> následuje element <H3>, a to ani v případě, že "se mi to tam líbí víc, protože mi tam sedí velikost písma" - to v žádném případě není výmluvou. Přehlednosti každého dokumentu pomáhá, když má "stromovitou strukturu", to v jazyce HTML znamená, že nadpis druhé úrovně logicky podrozděluje obsah toho, co patří pod nadpis první úrovně. Analogicky pro nadpisy vyšších úrovní. Častou námitkou je, že běžný návštěvník stránky nevidí při nastylování nadpisů rozdíl. To je sice pravda, ale ne vždy je návštěvníkem webu běžný návštěvník a z mého pohledu je neohleduplné tvořit web jen pro něj (například zde diskutované správné zanoření nadpisu nás nic nestojí!). Čtečka pro nevidomé může při špatném zanoření nadpisů oznámit nevidomému návštěvníkovi stránek toto: "Nadpis první úrovně, ..., nadpis čtvrté úrovně, ..., nadpis druhé úrovně"... Návštěvník, který nevidí velikost písma (a jí vyvolaný dojem, že <H3> je vlastně nadpis první úrovně), a který je odkázán jen na sémantickou čistotu webu se poté na webu nedokáže pohodlně orientovat.

Členění textu

Odstavce

Každý text se lépe čte, pokud je rozdělen na menší bloky, tedy pokud je rozdělen na odstavce. Je však opět důležité si uvědomit, že i odstavce mají v HTML sémantický ekvivalent - element <P>. Často je vidět nahrazení elementu <P> pomocí dvou zalomení řádků - <BR>. Opět je třeba uvědomit si, že sémanticky je zalomení řádku něco jiného, než konec odstavce, a že tím, že zalomíme řádek - a to třeba i čtyřikrát za sebou - nezačneme nový odstavec. Odstavce je možno navíc oproti zalomením řádku vhodně nastylovat - například je vertikálně odsadit, odsadit text na první řádce, ohraničit jednotlivé odstavce rámečkem, atd. Dále je potřeba rozlišovat mezi elementy <P> a <DIV>. I když se tyto elementy chovají v prohlížečích velice podobně, element <P> je sémantický ekvivalent pro odstavec, zatímco element <DIV> má ryze formátovací charakter. Jednotlivé odstavce článku je tedy lépe uzavřít do elementu <P>, celý článek a třeba menu stránky potom uzavíráme do <DIVu>.

Je také dobré poznamenat, že některé indexovače webového obsahu ukládají obsah prvního odstavce na stránce pro potřeby popisu stránky při vyhledávání.

Citace

HTML zároveň obsahuje elementy pro sémantické zachycení citací textu. Zde je situace nepatrně složitější. Máme zde totiž více elementů, které odpovídají citacím, a to elementy <BLOCKQUOTE>, <CITE> a <Q>. Rozdíl mezi nimi je ten, že <BLOCKQUOTE> je blokový element (chová se v základu jako <DIV>, <P>, ...) a používá se pro citaci bloku textu, zatímce <Q> a <CITE> jsou řádkové a lze jej tedy použít kdekoli v textu. Dále je zde problém, který vyplývá z překladu z angličtiny: <BLOCKQUOTE> a <Q> slouží pro citaci ve významu "quotation", <CITE> pro citaci ve významu "citation". Sémantický rozdíl je podle mě zde natolik bezvýznamný, že stačí používat <BLOCKQUOTE> a <Q>.

Kód

V případě, že na svých stránkách chcete uvádět ukázky kódu, je pěkné za tím účelem použít HTML element <CODE>. Námaha navíc je - třeba oproti použití DIVu - nulová, explicitně tím označíte kusy kódu na stránkách a opět tak docílíte přesnější sémantiky prvku stránky. Pozor si musíte dát jen na fakt, že element <CODE> je řádkový... Proto je někdy potřeba jej nastylovat na blokový element vlastností display: block;. Automatické obarvovače kódu, například Geshi, které používám i zde na stránkách, často namísto elementu <CODE> používají element <PRE> - předformátovaný text...

Seznamy

Seznamy jsou dle mého názoru nejvíce podceňovanou součástí stránek. Jen málo webových obchodů si například uvědomuje, že ten levý sloupeček, co mají na stránkách, ve kterém jsou vypsány jednotlivé kategorie zboží je vlastně seznam kategorií. Často je nevědomky opomíjeno, že se jedná o seznam a jsou tam pouhé odkazy (elementy <A>) na jednotlivé kategorie (případně zabaleny do DIVu...). Opět podotýkám a zdůrazňuji - stačí to - jen to nemá explicitně uvedenou sémantiku seznamu, což je pro libovolné strojové zpracování stránky jistou nevýhodou. Mimo jiné je jen zanedbatelně málo pracné použít ve výše uvedeném případě element <UL> nebo <OL> a patřičně nastavit přes kaskádové styly vzhled těchto elementů (a povinných podelementů <LI>) tak, aby to vypadalo úplně stejně, jak to vypadá bez nich.

Z mého pohledu je jistým paradoxem, že seznamy se - podle mě sémanticky nesprávně - často používají tam, kde se mají používat tabulky a naopak... Je pochopitelně rozdíl mezi "seznamem účastníků závodu" a "výsledkovou tabulkou" toho závodu. Pro seznam účastníků často více hodí číslovaný seznam (pokud tedy ke každému účastníkovi neuvádíme rok narození, zemi, ... - potom se hodí tabulka), pro výsledky závodu se hodí spíše tabulka s dvěma (popřípadě více) sloupci, kde první sloupec je pořadí a druhý sloupec je jméno a příjmení (další případné sloupce, třeba výkon...). Tím jsem se nenápadně přesunul k tématu, které často vyvolává flame...

Tabulky

Přestože sémantický obsah pojmu "tabulka" je relativně dost jasný a jen těžko umožňuje chybnou interpretaci, dochází i dnes k využívání tabulek pro formátování stránek - tedy k tvorbě tabulkového layoutu. To sémantický obsah pojmu "tabulka" - dle mého názoru - nepřipouští.

Není mým cílem zde vyvolávat flame, proto to vyřeším diplomaticky: Protože uznávám, že tvorba tabulkového layoutu je rychlejší a má jisté přednosti z toho pohledu, že se v ní některé layouty dělají snadněji, očekávám, že se se mnou nikdo nebude přít o tom, že ze sémantického hlediska (a to je jediné hledisko, které v tomto článku uvádím) se tabulky pro tvorbu layoutu nehodí.

Opět uvedu příklad se čtečkou pro zrakově handicapované. První, co ohlásí nevidomému po návštěvě stránky je: "Tabulka, ... nový řádek, ... nový sloupec, ...".

Kdyby "zneužívání" tabulek pro tvorbu layoutu nebylo tak masovou záležitostí, mohl by se třeba (podmiňovací způsob a moje zbožné přání...) Google rozhodnout, že obsahu tabulek přiřadí jen mrňavou, téměř nulovou váhu (už dnes je nepatrně snížená) - v tabulce (chápáno v sémanticky správném smyslu) jsou totiž často věci pro indexaci spíše nedůležité. Stránky s tabulkovým layoutem by potom byly téměř nenalezitelné a věřím, že by časem tabulkový layout nikdo komu záleží na viditelnosti jeho stránek nepoužíval a dal by přednost DIVům a CSS...

Tabulky slouží primárně pro zachycování tabulkových dat (výsledky závodů, tabulky s finančními údaji, ...). V těchto případech je jejich použití zcela v pořádku a není třeba se mu vyhýbat. Tabulky tedy nejsou vždy zlo...

Obrázky

Obrázky mají v dnešní době pro sémantický obsah webu jen minimální význam. Jediné, čím mohou obrázky (element <IMG>) k obsahu webu nějak přispět, jsou atributy alt a title. Přesto se na většině webů tyto atributy vynechávají a to i povinný atribut alt - podle mě se jedná o nejčastější prohřešek proti validitě.

Atribut alt specifikuje text, který se zobrazí v prohlížeči v případě, že se obrázek z nějakého důvodu nenačte (třeba proto, že uživatel zobrazování obrázků vypnul, protože platí za přenesená data). Obrázky, které jsou z nějakého důvodu důležité pro samotný obsah webu tak, jak jej uživatel vnímá (např. fotografie ve fotogalerii) by měli mít neprázdný popisek - a to třeba jen "Obrázek DSC0001.jpg". Samozřejmě může být i nápaditější. Obrázky, které nemají sémantický význam na stránce (jen ji dekorují) mají mít tento atribut také (třeba prázdný)! Atribut alt je zároveň ten atribut, který čtou čtečky pro nevidomé když narazí na obrázek.

Atribut title zobrazuje bublinku u kurzoru při najetí nad obrázek - uživateli tak usnadňuje použití webu v tom smyslu, že mu může říct, co na obrázku je (příklad: "To jsem já na dovolené v Chorvatsku").

Zdůrazňování částí textu

Pakliže chceme nějaký text zdůraznit, máme k tomu několik prostředků. Pro základní zdůraznění textu použijeme element <EM> ("emphasize"). Ten většina prohlížečů zobrazí - dle nepřímého doporučení W3C - kurzívou a můžeme se tak vyhnout použití sémanticky (nikoli vizuálně!) nejasného elementu <I>. Chceme-li nějaký text zdůraznit více, použijeme k tomu element <STRONG> - ten se zobrazuje nejčastěji tučně (můžeme proto zapomenout na element <B>). Chceme-li nějaký text zvýraznit pouze vizuálně (zvýraznění nemá sémantický, ale estetický význam) a toto zvýraznění tak není pro samotný obsah důležité, používáme k tomu nejlépe patřičně nastylovaný element <SPAN>.

Zkratky

Speciální a zřídkakdy používané jsou elementy <ABBR> a <ACRONYM>. Ty slouží k označování zkratek (<ABBR>) a akronymů (<ACRONYM>), a aby měli faktický přínos, je nutné vyplnit jim atribut title (uvést, co zkratka znamená - to se potom opět objeví v bublince u kurzoru při najetí myši) a lang (z jakého jazyka zkratka/akronym pochází).

Odkazy

Text, který je uzavřen mezi otevíracím a uzavíracím tagem odkazu (element <A>) je v první řadě důležitý pro vyhledávače - říká jim de facto za jakým účelem se na stránku odkazuje. Je proto více než vhodné vyhýbat se tomu, aby odkaz obsahoval nic neříkající text, jako třeba "klikněte zde" nebo "pokračujte tudy". Snažte se namísto toho uvést co pod daným odkazem uživatel najde, například "Dokumentace k programu ke stažení" nebo "Registrace nového uživatele". Odkaz má zároveň volitelný atribut title - ten opět obsahuje text, který se zobrazí v bublince u kurzoru při najetí nad odkaz. Uživateli tak tento text může zjednodušit rozhodování, zda na daný odkaz klikne či ne.


Nový komentář k článku "Tvorba webu s čistým sémantickým obsahem"

Podpis (smí obsahovat url ve tvaru "http://domeny")
Zde napište slovo "člověk" (malá písmena, smí být bez diakritiky)
Text příspěvku (Texy markup)

Komentáře čtenářů

http://radekdvorak.eu (2008-02-04 23:17:18)

Ahoj,

upřednostňování sémantické tvorby před obsahem je ale také upřednostněním formy. Pro většinu návštěvníků je jedno, jestli vidí span, div nebo code - já ostatně také nekontroluju, jestli ta velká písmena nahoře jsou h2, div nebo vytuňený span. Přes css si můžeš vizuální stránku plně předefinovat a sémantika nikoho nezajímá, pokud extrémně nelovíš roboty. Lidé se vracejí za kvalitním obsahem a i ten se vyhledává. Sice hůře, ale vyhledává.

Otázkou je, jestli CHCE programátor/kodér psát jako pra*e. Je to jeho práce a vizitka. U větších projektů to přispívá k údržbě projektu. Sémantika je ale pořád důvod pro tvůrce za obrazovkou, ne pro návštěvníky před ní.

joshis (http://joshis.iprofil.cz/) (2008-02-05 13:40:46)

Ano, v tomto mas samozrejme do jiste miry pravdu, ale je to i otazka toho, jak se na vec divas. Sematnika totiz bez obsahu nema zadny smysl (to jsem mel do toho clanku take napsat) - pokud neni na strance obsah, neni cemu prirazovat semantiku.

Souhlasim, ze vetsinu uzivatelu zajima to, jak stranka vypada - na druhou stranu tim, ze budes dodrzovat spravnou semantiku docilis toho, ze ta vetsina bude o neco malo vetsi (viz priklad s nevidomymi uzivateli).

Co se tyce vyhledavani kvalitniho obsahu - ano - google udajne zaznamenava, ze na nektere odkazy ve vysledcich vyhledavani se klikne a pak se z nich uzivatel ihned nevrati (a predpoklada, ze to je proto, ze nasel co hledal). Timto zpusobem google zvyhodnuje stranky s dobrym obsahem a horsi (semantickou) formou.

Dale - k poslednimu odstavci - presne zde je podle me maly problemek se zpetnou vazbou. Napr. kdybych chtel napsat web "agregator zprav", tedy web, co se podiva na aktualne, pravo, lidovky, vytahne H1-H6, P, LI, OL, UL, ... a to jen za pomoci tech HTML souboru, tak nemam sanci. Musim pouzit XML export zprav - cili RSS feed... Podobne na strojove zpracovani zbozi z webovych obchodu potrebuji i XML export. Zde je potom problem ktery souvisi s ostatnimi clanky na tomto webu - web neni vhodnym prostredim pro agenty a jejich cinnost - misto vecneho reseni problemu se agent musi starat o to, ze HTML koder je prase. Proto vyvoj (multi-)agentnich systemu bezicich v prostredi Interentu trva dlouho, sluzba, kterou by takovyto system mohl poskytnout se nespusti (napriklad super-web-shop-crawler, ktery by prolezal webove obchody a radil s vyberem zbozi) a "navstevnik pred obrazovkou" prijde nakonec zkratka - prestoze vzhledem k tomu, co ma si to nemusi uvedomovat...