No Future
Weblog přesunut na atd.havrlant.net
Divy? Ale kdeže, buďte moderní
26 prosinec 2005, 23:36
rubrika XHTML-semantika
Zkuste se alespoň jednou obejít bez třech hromad divů a bez sedmi tuctů spanů. Jde to.
Tento článek byl napsán jako částečná reakce na Filův článek Divy a spany.
Dnes a denně vídám weby, na kterých jsou v elementu
<body> výhradně značky <div>,
<span>, <img> a <a>,
občas se objeví nějaký ten nadpis a případně značka
<strong> (aneb autor zaslechl něco o SEO).
Nechápu ten smysl, co vede někoho použít místo krásné a jednoduché
značky <h1> nějakou oplzlost jako <div
id="nadpis">? Jestli je to teď moderní, tak jsem asi něco
zaspal.
Většina jednoduchých webů by se dala řešit zcela bez divů, stačí si jen pohrát se stylováním. Když jsem to dokázal já – jakožto kaskádová lama – tak to musí zvládnout prakticky každý zkušenější webdesigner. Problém nastává až u komplikovanějších designů, kde jsou například na pozadí kopy obrázků, různě poskládaných, aby dohromady tvořily nějaký obrazec nebo třeba kulaté rohy a speciální obrázkový border bloku. Tady už sémantice nepomůže ani pánbůh.
Vsadil bych se, že většina z vás začíná nějakým takovýmto zápisem:
<body>
<div id="cela-stranka">
<div id="hlavicka">
Nějaká ta hlavička, nadpis, logo apod.
</div>
<div id="menu">
Prostě menu, doufám, že bude alespoň v <ul>
</div>
<div id="obsah">
Tady bude obsah stránky
</div>
<div id="paticka">
A o web se stará...
</div>
</div>
</body>Céesesko si snad už každý domyslí. A teď by mě zajímalo, kdo z vás to zkusil bez těch divů? Zkuste si prostě nejdříve napsat HTML strukturu, kde budou pouze sémantické značky (tj. bez divů a bez spanů) a až poté zkuste web nastylovat. A až ve chvíli, kdy to prostě už dál nepůjde, použijte div nebo span. Při tomto postupu byste teoreticky měli dosáhnout maximálně sémantické stránky v rámci daných možností. Přesně takto jsem vytvářel stránky o sémantice.
Největším problémem při budování sémantického webu je fakt, že podmínky nejsou zrovna ideální, páč HTML prostě nezná některé značky, které by znát mělo a těch pár sémantických značek a atributů, které už má, nám w3c vesele zavrhuje, což je věčná škoda. Přesně proto některé věci bez divu (či spanu) prostě udělat nejde. Jako příklad mě zrovna napadá náhrada textu obrázkem, kde se bez toho jednoho spanu jen těžko obejdeme.
Právě proto tvrdím, že sémantický web by měl obsahovat minimální počet divů či spanů, ale je třeba si uvědomit, že pojem minimální se nerovná nule (respektive může se rovnat, ale také nemusí). Druhá otázka pak je, zda-li toužíte po sémantickém webu ;-). Moderní web by ale sémantický být měl. Přece jenom webové stránky si neprošly sémantickými zrůdnostmi jako je tabulkový layout jenom proto, aby nakonec skončily v hromadě bezvýznamných divů…
komentáře
Hledej na weblogu:
Ereses
— 27. prosinec 2005, 12:21
Příklady, které uvádíš jsou samozdřejmě správné, ale musím se Filosofa přeci jenom zastat. Jak bys bez spanů a divů dělal zaoblené rohy? Nějakým umělým vkládáním dalších odstavců nebo jak?
Bohužel ještě web není na sémantické weby připraven.
P.S.: Jsem zastánce sémantického webu a ano čím míň divů, tím líp
— 27. prosinec 2005, 12:28
Petr Stříbrný: opět jsem nucen citovat ze svého článku. Asi se budu muset naučit psát texty tak, aby byly k pochopení hned napoprvé ;-)
Přesně v těchto případech zatím jiné řešení než tam naházet ty divy neexistuje. Ale ve spoustě jiných případů to řešení existuje.
— 27. prosinec 2005, 13:26
Vezmu-li v úvahu, že div je jen prázdný kontejner, nevidím důvod ho nepoužít. Samozřejmě, že se nezastávám layoutu, který popisuješ ty(tedy samé div a span), ale nevidím důvod aby layout s 5, 6 div byl špatný. Koneckonců většina komerčních webových stránek je podle mě pixel design(Nevím jestli jsem to už někde zaslechl, nebo právě vymyslel:) → graficky složitých
— 27. prosinec 2005, 13:51
Ivorius: Konkrétní čísla bych neudával. Pro některý web to může být až příliš divů, pro jiný strašně málo. Tudíž také nevidím důvod, aby byl layout s 5 divy špatný, pokud jsou ty divy použity správně a účelně. Ne ve stylu div se div tam.
V podstatě na to máme všichni stejný názor, akorát já možná trochu více extrémní. Ale stejně bych souhlasil s Leem:
Myslím si, že to prostě tak je víceméně všude.
— 27. prosinec 2005, 23:42
Jéjej tak to sorry, měl jsem za to že o tom nepíšeš. Tak to se fakt omlouvám…
— 28. prosinec 2005, 10:05
Berte to, co tady napíšu, jako názor amatéra, jímž nepochybně jsem a také zůstanu.
Sémantika je významové označení textu a částí textu, proto nemohu než souhlasit s apelem na používání tagů h1-h6 pro nadpisy, tagu p pro odstavce atd. Nicméně definice tagu div – blokový element bez sémantického významu a totéž pro span (řádkový…) mě vede k názoru, že je budu používat pro seskupení logických částí textu (např. menu, hlavička, patička, pravý, levý sloupec…). Výhodou tohoto řešení je třeba možnost nastavení odkazů uvnitř stránky na atributy id přiřazené jednotlivým divům (přeskočení menu, zpět na začátek stránky).
Počítání divů a podle toho hodnotit sémantičnost stránky není, podle mě, zcela správně.
Spíš bych se přiklonil ke kritériu: jak vypadá web bez stylů, poznám co je nadpis, odstavec, citace… ? A z tohoto hlediska je počet případných divů a spanů nezajímavý.
Skoro na závěr si dovolím kacířskou myšlenku: není významové označování souvisejících textů divem s atributem id také sémantikou?
Nechtěl bych, aby to vyznělo jako, že jsem zastáncem předivovaných webů, ale chtěl jsem také upozornit, že 90% čtenářů webu nějaké divy a spany vůbec nezajímají, je zajímá to, aby si informace na libovolném zařízení přečetli. A to s podporou CSS i bez ní.
Jinak hodnotím stránky o sémantičnosti velmi dobře a na svém blogu na ně odkážu. Dobrá práce. Díky za ni.
— 28. prosinec 2005, 11:17
Aleš Dobrovolný:
Předně děkuji za obsáhlý komentář. Teď k jednotlivým bodům:
Ano, jednodušší řešení bohužel neexistuje. Leda by někdo začlenil do HTML značky právě pro hlavičku, patičku apod., což se asi jen tak nestane. Dnešní HTML příliš nepřeje sémantickému webu, ale i tak se můžeme snažit využívat alespoň to, co můžeme.
Počet divů zdaleka není hlavní kritérium, dalo by se říci, že to je až to poslední kritérium, podle kterého bych hodnotil sémantičnost webu. Ale i toto poslední kritérium je nutné vzít v úvahu.
Z tohoto pohledu je také nezajímavé, zda vložím text do značky em, i, var nebo cite. Všechny se vykreslí kurzívou.
Bylo by to sice ideální řešení, ale ze zápisu div id=napis pozná nadpis jedině člověk, který si čte zdroják, prohlížeč nikoliv. Už z toho důvodu, že si každý může označit cokoliv jakkoliv.
Tomu číslu bych ještě tak minimálně devět procent přidal ;-). Ano, celá sémantika „na plný výkon“ je spíše pro pocit, moc objektivních výhod nenajdeme.
Také děkuji :-)
— 28. prosinec 2005, 15:15
Ještě k tomu neostylovanému webu. Ano, spousta značek vypadá v prohlížečích stejně, nicméně cítím jemnější rozdíl:
i – kurzíva (pokud chci, aby se takto označený text zobrazil za všech okolností jako kurzíva – například skalární proměnná v nějakém vzorci)
CSS formát font-style:italic – pokud je kurzíva pouze dyzajnérský doplněk, nemá jinou funkci
em – zvýraznění, důraz (chci zvýraznit část textu a je mi v podstatě jedno, co s tím UA provede, pomocí CSS dosáhnu žádaného stavu)
cite, address, var, q – použití je už spíše věcí autora html kódu, jakým způsobem označí části textu, jak přiřadí tyto tagy a zda je vůbec zná. Já třeba cite občas používám pro vlastní jména, i když vím, že z hlediska sémantiky je to trochu mimo mísu. Ale zase při formátování CSS mám to jaksi víc pod kontrolou. Prostě mi přijde definice těchto tagů poněkud „gumová“. No, u address je to vcelku jasné, tam bych neváhal :-))
— 28. prosinec 2005, 15:20
Aleš Dobrovolný: Ano, a přesně proto nemůžete vzít zobrazení bez stylů jako kritérium sémantičnosti.
— 28. prosinec 2005, 16:59
Já myslím, že některé tagy (cite) nejsou úplně přesně určeny a hodně lidí je bere volně, což nepokládám za špatné. Pokud jsou to vlastní jména pro lidi od kterých něco cituješ, je to ale sémanticky asi nejsprávnější.
— 28. prosinec 2005, 18:40
Petr Stříbrný: Patrně jsme se nepochopili, reagoval jsem na jinou část příspěvku. Protože se některé elementy vykreslí bez stylů stejně, ač mají naprosto odlišný význam, nemůžeme zobrazení bez stylů brát jako důležité kritérium sémantičnosti. Takhle by to mělo být správně.
Zobrazení bez stylů beru spíš jako poslední vodítko, když si opravdu nevím rady, kterou značku zrovna někde dát.
— 28. prosinec 2005, 21:24
Ne, pochopili jsme se správně – máš samozdřejmě pravdu. Já nereagoval na tebe a to co sem chtěl napsat jsem napsal – že některé sémantické značky se používají na vícero věcí. To, že spousta značek vypadá bez stylů stejně je podle mě škoda, ale to samozdřejmě neurčuje dobrou či špatnou sémantiku.
Jo a píšu se bez ‚r‘.
— 29. prosinec 2005, 10:22
Petr Stříbný: No jo, já jsem zase reagoval na něco, co jsem neměl a ještě jsem to stačil mezitím třikrát poplést…
— 29. prosinec 2005, 11:16
Timy, rozumím Tvému nadšení pro sémantiku, přesto Tě zkusím zvyklat a ukázat druhou stranu mince.
Zkus si někdy vyzkoušet práci se sázecím software (Adobe PageMaker, InDesign, QuarkXPress a svým způsobem stačí i MS Word). Zjistíš, že velmi důležitým prvkem je tzv. frame (rámeček). Tím se myslí jakákoliv převážně pravoúhlá oblast, ve které může být obrázek, text, nebo jiný logicky oddělený obsah. Jeho webový ekvivalent je právě DIV.
Paragraf aneb odstavec textu se v sázecích programech určuje „odentrováním“, tedy ručním zalomením řádku. V HTML je třeba jej explicitně uzavřít značkami P. Ale to je jen technický detail, stále jde o jakýsi virtuální blok uvnitř toku textu.
Snažím se tedy říci že mezi DIV a P je dosti zásadní rozdíl. Zamysli se, je hlavička, patička, levý panel, pravý panel atd. skutečně virtuálním blokem uvnitř tekoucího textu, nebo je to oddělený rám s logicky odděleným obsahem? Tedy, je to [P] nebo [DIV]?
Jsem hluboce přesvědčen, že je to [DIV]. Dokonce z hlediska 100% sémaniky bych považoval použití [P] za chybu. Co myslíš?
— 29. prosinec 2005, 15:00
dgx: Tak předně děkuji za komentář a i za pohled na druhou stranu mince. Pokusím se ji postavit na hranu ;-).
Nejdříve budu reagovat na levý panel & pravý panel. Zrovna tady si myslím, že ať je to levý panel nebo pravý panel, pořád je to součást hlavního obsahu stránku a jedná se tedy pouze o vzhled (neberu tedy v potaz nějaká tabulková data apod.). Je to jen další část stránky, takže stačí jí zařadit pod nějaký logický nadpis. Teoreticky úplně nejlepší by bylo něco jako je u formulářů – značka [fieldset] obalí určitou oblast a značkou [legend] poté nadefinujeme nadpis celé této oblasti. Kdyby to takto fungovalo i mimo formuláře, nebylo by podle mě co řešit. Z praktického hlediska je bohužel většinou nutné ten panel vložit do divu, protože jinak se to docela těžko styluje.
Co se týče hlavičky a patičky – ano, tady už je to problém. Nemyslím si, že měla existovat třeba značka [levypanel], ale kdyby existovala značka [paticka], bylo by to super. Tohle je podle mě jeden z nedostatků HTML. Takže co se dá dělat? Pro patičku jsem si vymyslel experiment [p][small]patička[/small][/p], ale 100% sémantické to také není, bohužel. Pro hlavičku jsem nic nevymýšlel, respektive v hlavičce na semantika.name používám výhradně nadpis [h1], ale to také asi u každého webu nepůjde. I když možná ano – co má být vlastně v hlavičce? Jestli název stránky a případné motto, tak na to by mohly stačit přinejhorším dva nadpisy. Ale to už je všechno znouzectnost. Dokud nebude existovat značka [paticka] (či nějaký identický ekvivalent, pochopitelně), tak je každé řešení patičky defacto nesémantické.
— 29. prosinec 2005, 16:33
Dostáváme se k jádru: proč
[footer]...[/footer]je sémantické a[div class="footer"]...[/div]není? Jak se obojí liší? Druhé řešení jePři hlubším zamyšlení zjistíš, že rozšiřování rodiny značek je v současné situaci slepá cesta – kvůli zmíněným nevýhodám a díky existenci pružnějšího class. Není lepší tedy značkami postihnout obecné kategorie a pro atributy nechat tu obrovskou variabilitu? Tedy mít značku [div] pro tzv. rámec a class=„footer“ pro sémantické vysvětlení?
Dejme tomu, že by se dokonce určité hodnoty atributu class (případně id) standarizovaly. Potom by to bylo sémantické? Nic takového se však neděje, nejspíš po tom není skutečná poptávka. Ale sémantika nespočívá v tom, že je něco standardizované, ale ve správném popisu významu. Tedy
[div class="footer"]obalující patičku mi připadá naprosto korektní.Mimochodem, dobrý blog!
— 29. prosinec 2005, 16:48
11. To Timy:
‚Protože se některé elementy vykreslí bez stylů stejně, ač mají naprosto odlišný význam, nemůžeme zobrazení bez stylů brát jako důležité kritérium sémantičnosti.‘
Tak mě jenom napadá: sémantický web (a značkování textů vůbec) se pokouším dělat především pro čtenáře, jaký potom mají význam „neviditelné“ značky? Napadají pouze dva (tři) důvody:
Toto není provokace, ale spíš dotaz neznalého.
— 29. prosinec 2005, 16:53
DGX má pravdu a já se připojuji: Dobrý blog!
— 30. prosinec 2005, 00:02
dgx: Nepřijde mi to jako dobré řešení, to už bych pomalu ten význam rovnou mohl psát třeba do komentářů ;-). Význam mají určovat HTML značky, ne atributy, takže použití class by bylo takové řešení neřešení. Navíc snad všechny sémantické značky mají i nějaké výchozí nastylování (strong se vykresluje tučně, em kurzívou apod.), které se snaží jejich význam i nějak vizuálně vyjádřit a napodobit, aby se i s vypnutými styly dalo přibližně poznat, o co jde. Tudíž i zápis
[div class="footer"]by měl mít nějaké to výchozí nastavení (jinak by to podle mě trochu ztratilo svůj smysl).A tady je kámen úrazu, neboť toto řešení by nebylo zrovna férové vůči starším stránkám, které toto označení používají, ale nepočítají s nějakým výchozím nastavením. Mohlo by to udělat docela dobrou paseku v layoutu. Proto si myslím, že by to nebylo dobré řešení. Sice do budoucna asi praktické a snadno implementovatelné, ale vzhledem ke starším stránkám nešetrné.
Ale to už se bavíme spíše o Star Treku a sci-fi než o HTML ;-). Pokud by nyní (bez standardizace – problémy se standardizací jsem popsal výše) jednotlivé třídy a identifikátory vyznačovaly význam, jak řešit nesmyslné názvy, které je někdy nutno dát? Třeba když se dělají kulaté rohy. Přijde mi to jako ještě více zmatené, neboť by některé divy měly význam a některé zase ne.
Aleš Dobrovolný: Souhlasil bych hlavně s třetím bodem, částečně pak s druhým a prvnímu nerozumím, to už jde mimo mě :-/. Jako další důvod bych třeba uvedl přístupnost a hlasové čtečky apod. Sám sice žádnou nemám, ale předpokládám, že nějaký pozitivní účinek to mít bude. Například tento můj článek. Určitě jsi schopný poměrně jednoznačně oddělit citace od okolního textu. Nějaký postižený, který používá hlasovou čtečku to ale nevidí, ale protože je citace správně ve značce
blockquote, tak by mu měla čtečka nahlásit (doufám v to :-)), že se jedná o citaci. Klidně to ale mohu vztáhnout i na něco, co už se dá lehce vyzkoušet a to textové prohlížeče.Jinak obecně se objektivní výhody extrémní sémantiky, o které se tady bavíme, hledají jen těžko. Osobně spíše ostatním „hraju na city“ (je to přece moderní). Další má oblíbená věta je „když už tady ty značky máme, tak je používejme“. Nakonec asi bych třeba nenašel jediný vyloženě objektivní důvod k tomu, aby se používalo méně divů, když je zbytek kódu sémantický. Jedině tak velikost výsledného souboru, což není zase tak silný argument…
Děkuji mockrát a stejně tak oboum děkuji za odkaz :-)
— 30. prosinec 2005, 21:56
K tématu doporučuji příspěvek Plaváčkův, viz http://weblog.plavacek.net/2005–02.html#… ;-)
— 31. prosinec 2005, 10:18
Timy: Téma, které jsi otevřel, způsobilo rozsáhlou diskuzi na Yhůůově blogu, nebo třeba na Filově blogu. Po tolika fundovaných názorech, jsem nechtěl už nic dodávat. Nicméně mě napadl ještě jeden argument pro účelné použití divů (a spanů) a to je formátování tiskové podoby webu. Mám na mysli to, že mohu celému divu obalujícímu menu, nebo sloupec s reklamními banery, nebo třeba patičku, zakázat výstup na tisk (přiřazením display=none). Pak už je formátování pro tisk extrémně jednoduché :-)).
Vilém Málek: ten článek znám, znova jsem si pročetl diskuzi pod ním. S většinou příspěvků tam uvedených souhlasím, konkrétně třeba (7) od Jana Tichého.
Všem: všechno nejlepší do Nového roku, hodně zdraví a pevné nervy i při diskuzích s amatérskými ďáblovi advokáty, jako jsem třeba já.
— 31. prosinec 2005, 11:56
Aleš Dobrovolný: Ano, to je skutečně zajímavý důvod, proč používat divy. I když i toto by někdy šlo vyřešit. Pokud mám menu ve značce
menu(neboul, to už jedno), staší „nechat zmizet“ právěmenu. Ale uznávám, že ne vždy to bude takto jednoduché.Děkuji všem komentujícím za názory a těším se na další reakce v novém roce ;-)