XHTML a semantický kód versus realita

MyEgo.cz

home foto blogy mywindows.cz kontakt

XHTML a semantický kód versus realita

Technologie 19.08.04

XHTML, pokud by se používalo, tak jak má, je jazyk sémantický. Na rozdíl od HTML. Fakt je ale ten, že na velké většině dnešních XHTML 1.0 STRICT validních webů té sémantiky moc není. Je tam spíše k vidění 3x do sebe vnořený DIV, který není o nic víc sémantický než známá posloupnost TR, TD, TR, TD.

Takový XHTML validní web sice používá CSS pro formátování, ale to je také v podstatě celé. Vypadá to, jako by někteří web-designéři zcela zapomněli na to, kolik sémantických značek (X)HTML zavádí.

Podívejte se třeba na tento thread na forum.blogcms.com. Jeden zmatený uživatel tam chce, aby v defaultní instalaci BLOG:CMS bylo místo:

<h1>The Weblog for Jeremiah Kemper</h1>

přesně toto: 

<div class='blogtitle' id='topblogtitle'>
 <span class='blogtitletext' id='topblogtitletext'>
   <h1>The Weblog for Jeremiah Kemper</h1>
 </span>
</div>

Když jsem se na to podíval, chtělo se mi zvracet. Doslova. Mezi tím, co tento člověk chce, a 1px širokými GIFy v tabulkách není naprosto žádný rozdíl!

Jiný příklad?

V podstatě veškeré české weblogy (až na tento web|zine) mají komentáře formátovány nějak takto:

<div class='komentoval'>Modrý Kos</div>
<div class='komentar'>
řádek 1<br />
řádek 2<br />
řádek 3
</div>
<div class='datum'>11.1.2002</div>

A tato sekvence se bez ladu a skladu opakuje dál a dál. Jaká je v tom sémantika? Žádná! A jak to řešit lépe? No, komentáře by rozhodně měly být v OL / LI, na komentoval zde máme ADDRESS, a na datum INS, ne? A místo BR zde máme P. A místo tří CSS tříd zde máme jediné ID.

Takto zapsané komentáře jsou semantické:

<ol id='comments'>
<li>
  <address>Modrý Kos</address>
  <p>řádek 1</p>
  <p>řádek 2</p>
  <p>řádek 3</p>
  <ins>11.1.2002</ins>
</li> 
... další komentáře
</ol>

Komentáře

  1. 1 Martin Křížek 19.08.04, 12:08:32
    FB

    The Weblog for Jeremiah Kemper - tak to je hnus, i když jsem viděl i horší :(

  2. 2 Petr Weida 19.08.04, 12:08:33
    FB

    Tak nevím, jestli ins slouží pro definování data. Co jsem prošel:

    http://interval.cz/clanek.asp?article=1051...
    http://www.jakpsatweb.cz/html/text.htm#ins...

    tak slouží pro přidání textu. Otázka je, jestli brát komentář jako přidaný text. Pak by v něm ale IMHO musel být celý.

  3. 3 Radek Hulán 19.08.04, 12:08:40
    FB

    [2] ins - atribut datetime vyjadřuje čas, kdy došlo k přidání (z jakpsatweb).. Lepší tag pro datum vložení komentáře v XHTML není.

  4. 4 rony 19.08.04, 12:08:47
    FB

    a DL DT?

  5. 5 dgx 19.08.04, 12:08:48
    FB

    [2] ins mě při pohledu na kód generovaný BLOG:CMS také vcelku zarazilo. Je to otázka, jak si kdo význam značek vysvětluje.

    Na fóru La Trine jsem všechny komentáře (také) umístil do ol + li, protože je to logicky řazený seznam (pokud by se komentáře promíchaly, ztratili by smysl - neplatí ovšem pro komentáže na Žive)

    Otázka je, jak poté „otagovat“ samotný komentář. Použil jsem dl, dt, dd, což se mi ze všech variant zdá jako nejlepší - ale určitě ne dobré.

    Ovšem použití address pro jméno je trošku mimo mísu ;-)

  6. 6 dgx 19.08.04, 12:08:52
    FB

    ještě k té hrůze:
    <div class='blogtitle' id='topblogtitle'>...

    kdyby IE nebyl tak tupý, a uměl alespoň základní selektory CSS, bylo by možné formátovat XHTML dokument téměř s minimem atributů class a ID. To by byla parádička...

  7. 7 Radek Hulán 19.08.04, 12:08:52
    FB

    [5] no jo, Davide, ale pak tam máš u komentáře zbytečně class navíc, tedy dd class="info", a to i opakovaně, pokud tam jsou reakce...

    Je to otázka výkladu, nicméně moje řešení nepoužívá žádný class ;)

  8. 8 dgx 19.08.04, 01:08:20
    FB

    [7] DL/DT/DD alternativu Tvého řešení by mohlo být tohle:
    <dl>
       <dt>Titlek komentáře (jméno, ...)</dt>
       <dl>..text ...</dl>
       <dl><ins>čas</ins></d>
    </dl>

    Tedy bez class a id. Ale myslím si, že diskuze o tom, co je lepší, je bezpředmětná. Protože obě varianty jsou 100x lepší než ono
    <div class='komentoval'>Modrý Kos</div>
    <div class='komentar'>
    A toť oč tu běží, ne?

    Jen k tomu class='info'. To souvisí s něčím jiným. Napadlo mě všechny „neobsahové“ části stránky (tedy například informace o datu publikování článku atd.) označit třídou 'info' a všechny „nepodstatné“ jako 'unimportant'. Důvody jsou spíše experimentální ;-)

  9. 9 Radek Hulán 19.08.04, 01:08:25
    FB

    [8] ano, je jen otázkou osobního stylu zda zde použít ol, li nebo dl,dt,dd, já preferuji to první..

    Ale nesnáším class, id, budiž, ale class ne, zase spíše osobní styl ;)

  10. 10 Tomáš Hodboď 19.08.04, 05:08:37
    FB

    Vaše použití ol,li je semanticky špatné. Číslovaný seznam slouží k definování uspořádaného seznamu, ve kterém nelze přeházet položky, čemuž komentáře neodpovídají. Správné použití by bylo např. při vypisování obsahu knihy. Stejný nesmysl je použití, dl,dt,dd, které slouží k definici termínu - použití v komentářích je ze semantickeho pohledu špatně.

    Neohánějte se tady sémantickým kódem.

  11. 11 Radek Hulán 19.08.04, 05:08:41
    FB

    [10] ale komentáře na mém blogu Tomáši jsou uspořádaný seznam, každý má své číslo, 1,2,... na které se můžeš odkazovat, ne náhodný, neuspořádaný slet znaků a DIVů, jak na blogu tvém ;)

    Neoháněj se něčím, když tomu nerozumíš. Pro uspořádaný seznam je použití UL,OL jediné správné ;)

  12. 12 Ľuboš Kmeťko 19.08.04, 05:08:57
    FB

    "Je tam spíše k vidění 3x do sebe vnořený DIV, který není o nic víc sémantický než známá posloupnost TR, TD, TR, TD."

    DIV je sémanticky neutrálny prvok, takže aj keď vnorené divy kvôli layoutu obklopujú nejaký sémantický prvok ako H1 vždy je to lepšie ako keď ho kvôli layoutu obklopuju TR a TD, ktoré z hľadiska štruktúry dokumentu nie sú sémanticky neutrálne.

  13. 13 llook 19.08.04, 06:08:37
    FB

    Jo, to záleží na tom, jak ty komentáře vnímáte. Pro vás je to třeba seznam. Pro mě jsou to samostatné články, takže je, stejně jako články, obklopuji div class="item".
    Za seznam považuji výčet vlastností článku/komentáře. V
    dl seznamu pod článkem/komentářem definuju autora, datum, adresu (viditelnou v tiskové verzi).
    Dokonalé to není, ale úplně bez ladu a skladu mi to také nepřipadá. Jo a br tam nemám.
    ---
    BTW: Ve spotu mě napadla taková menší nejasnost. Považujete tyhle stránky za "weblog" nebo "web|zine"? Nebo obojí? Celkem nedávno jsem se dočetl, že tohle není blog, ale "web|zine". A teď píšete, že "V podstatě veškeré české weblogy (až na tento web|zine)...".

  14. 14 Tomáš Hodboď 19.08.04, 08:08:21
    FB

    [11] Ach jo. Podle pravidel ol,li je správně
    1. Do rychlovarné konvice nalijeme vodu
    2. Ohřátou vodu nalijeme do hrnečku s čajem
    3. Hrneček vypijeme

    To je správné použití ol,li - nelze položky přeházet.

    Což se o vašich komentářích říci nedá, můj komentář klidně může mít číslo 3. nebo číslo 213.

  15. 15 Radek Hulán 19.08.04, 08:08:53
    FB

    [14] to právěže ne, vzhledem k tomu, že je zde implementován poměrně složitý relační systém vazeb mezi komentáři, kde se komentáře na sebe vzájemně odkazují, a na to je navázán DOM JavaScript, je pořadí komentáře zcela rozhodující pro funkce "show in context", "show parents" a "show children". Jedná se tedy zjevně o uspořádaný seznam.

    Ale je fakt, že tento komentářový systém je pro někoho prostě příliš složitý na pochopení ;) Další blbé komentáře na toto téma mažu..

  16. 16 Miroslav Navrátil 19.08.04, 08:08:53
    FB

    [14] Tome, tak se mi zdá, že si to pleteš. ;) Proč? Mrkni se vedle tvýho jména. Co tam je? Čísílko čtrnáct a na to se odkazuju třeba když na tě odpovídám. Takže to je imho správně. ;)

  17. 17 Petr Bříza 19.08.04, 09:08:07
    FB

    Gratuluji, RaDo, další kvalitní spot... :-) Takže můj komentář:

    - XHTML není ve skutečnosti téměř o nic sémantičtější, než HTML
    - sémantika je u těchto formátů naprosto irelevantní
    - například DocBook je mnohonásobně sémantičtější

  18. 18 Radek Hulán 19.08.04, 09:08:18
    FB

    [17] XHTML není ve skutečnosti téměř o nic sémantičtější, než HTML - to je samozřejmě téměř pravda, ale takové validní HTML 4.01 Transitional bude méně sémantické než validní (a dobře napsané) XHTML 1.1.

    V praxi je řada HTML webů psána strašně prasácky, oproti XHTML webům... Pěkný kód se ale dá psát v obouch.

  19. 19 Petr Bříza 19.08.04, 10:08:27
    FB

    [18] No vida, s tímhle nemůžu jinak než souhlasit :-)
    Líbilo se mi, jak jsi dříve psal o tom, že kód je jako poezie, to beru! Psaní čistého a krásného (X)HTML je hlavně výhodou pro programátora, který se v kódu musí vyznat, a když se tam přemnoží DIVy, a CSS lze taky psát naprosto neuspořádaně - a pak se člověk nestačí divit, jak se jednotlivé CSS definice předhánějí v prioritách :-)

  20. 20 Ľuboš Kmeťko 20.08.04, 07:08:16
    FB

    [17] Pokiaľ "sémantický" berieme ako "významový" (a nielen v úzko linvgvistickom ponímaní ako "význam jazykových jednotiek, slov") potom XHTML a HTML je sémantický jazyk - sémantika (význam) sa týka štruktúry dokumentu. Jednotlivé prvky HTML určujú sémantiku (význam) častí dokumentu z hľadiska jeho štruktúry - časť dokumentu je nadpis, časť odstavec atď.

  21. 21 Vašek 20.08.04, 10:08:19
    FB

    ul, li možná jo, ale dl, dt na komentáře je podle mě sémanticky špatně, protože to je na definici termínů.