26. 12. 2005 v sekci webdesign:

Divy a spany

Pročetl jsem si web o sémantice Lukáše Havrlanta. Používání správných značek na webu schvaluji a podporuji, nechápu ovšem, proč se autor obouvá do značek DIV a SPAN.

Vždyť právě DIVy a SPANy umožňují vytvářet komplikovanější layouty bez použití tabulek či rámců. Snížení jejich počtu v kódu je sice důležité (není třeba obalovat vše do DIVu či SPANu), ale pro naprosté oddělení designu od kódu jsou tyto dvě značky dle mého názoru nezbytné.

Navíc DIVSPAN nenesou žádný význam, takže výslednému kódu škodí tak maximálně z hlediska výsledné velikosti. Vím, že Plaváček dokáže vytvořit layout s použitím právě jednoho DIVu a SPANu, ale v praxi se weby liší případ od případu a tento postup nelze uplatnit všude.

Kam se poděla ta čistota, s jakou byl web kdysi tvořen?

Kam se poděla čistota netuším, ale pokud jde o komplikovanější grafické návrhy, tak mi přijde poměrně lepší použít hafo divů než jedinou velkou tabulku…

Související odkazy

Komentáře

1. Leo
26. 12. 05, 12.36

Cistota? Mozna v dobach, kdy stranky tvorilo par programatoru na univerzitach a vedeckych ustavech a nemeli potrebu do nich cpat grafiku. S komercializaci internetu a prichodem udelatek na tvorbu stranek pro kazdeho (jako je Frontpage) se uz o zadne cistote kodu nedalo mluvit. Leo

2. Maňas
26. 12. 05, 12.37

samozřejmě je lepší hafo divů než tabulka. ale myslím že to bylo hlavně myšleno na jednoduché weby, kde se ZBYTEČNĚ používají divy a spany. Někteří skutečně obalují „kde co“

pravdou je, že třeba z důvodu chybného box-modelu ie5 se v „matrjošce“ užívá více divů. Tyto divy ale mají své opodstatnění a nepovažoval bych to za prohřešek vůči sémantice…

3. Ošklivý sup
26. 12. 05, 12.47

Nojo, kdyz ten Plavackuv web ale predpoklada treba jen jeden nadpis nahrazeny obrazkem :-) Taky udelam web dokonce bez jedineho spanu, jen holt uz bude trosku jiny :-)

26. 12. 05, 13.00

nesuhlasim, zlozity web je zlo :-)

26. 12. 05, 13.32

Dnes jsem konečně pročetl inkriminovaný web celý. Jinde i onde jsem již něco málo o sémantice četl a snažím se udržovat web v rozumných mezích, ale…

Nepoužívat divy a spany? Co bez nich uděláme? Je pravda, že Plaváček to umí, ale Plaváček je už nějaký guru. Složitější struktury si bez nich opravdu nedovedu představit. Možná jde jen o mou omezenost, ale myslím, že zde jde autor do extrému.

6. Tomik
26. 12. 05, 13.50

Naprosto souhlasím, zároveň ale obdivuji autora zmíněného webu, když si dal takovou práci aby měl web bez ů a ů a aby mohl kritizovat přespanované a předivované weby.
Ale jinak k tématu, znakčy a  byly vytvořeny právě proto, aby se na ně dal vázat vzhled, tak proč je tak nepoužívat, ano jde to, jednak ještě pohodlněji (pomocí tabulke), nebo se u toho člověk docela zapotí (IMHO by mohl autor výše zmíněného webu vyprávět) a udělá web bez divů, spanů, tabulek, framů… Ale proč?
Proč dělat něco jednoduše, když to jde sožitě, proč používat kalkulačku, když můžu počítat složité mocniny jen v hlavě?

7. Tomik
26. 12. 05, 13.52

Ehm.. tak místo těch „ů“ má být “ ů a  ů“. Jinak se omlouvám za ty překlepy, ještě spím… ;)

26. 12. 05, 14.20

V případě DIVů a SPANů měl Lukáš na mysli podle všeho tzv. divovitost. Tj. přemíru používání obou zmíněných neutrálních značek. Problém není v samotném používání těchto neutrálních značek, ale v jejich přílišném používání. Jedná se o to, aby byl zdroják co nejjednodušší. Aby autor popřemýšlel nad konstrukcemi, které vytváří.
Jednoduchý zdroják samozřejmě není cíl, ale jen prostředek k tomu, aby byla stránka dobře zobrazena prohlížečem, a aby byla stránka dobře spravovatelná autorem atd.

26. 12. 05, 17.48

Máš uplnou pravdu. Myslim ale, že takto plamený komentář si web o semantice nezaslouzi.

Kritika divu a spanu je namiste prave pro ty webdesignery, kteri je zneuzivaji na veci, pro ktere jsou urcene semanticke znacky. Webdesigner, ktery vi o cem je rec a umi tyto znacky pouzivat by mel poznat komu je tato kritika urcena.

10. Béďa
26. 12. 05, 18.08

IMHO je určitě lepší používat hafo divů, než tabulky, ale množství divů se dá často dost výrazně zredukovat, nebo div nahradit nějakou jinou, sémanticky správnější značkou.

I když kód, který sám produkuji není zrovna sémantický, snažím se alespoň zredukovat počet divů na minimum.

26. 12. 05, 19.02

Ahoj,
no nevím, ale nepřipadá mi, že bych se nějak obouval do těchto značek. Jenom nemám rád nadměrné používání těchto značek, které vede k menší sémantičnosti kódu. To je všechno.

>“pokud jde o komplikovanější grafické návrhy, tak mi přijde poměrně lepší použít hafo divů než jedinou velkou tabulku…“

Zde bych rád odpověděl citací ze svého webu:

>“některé věci prostě bez těchto značek udělat nelze a je přeci jenom lepší použít značku bez sémantického významu než někde vrazit značku, která je na daném místě sémanticky zcela mimo mísu“

Takže nevím, kde je problém? Za ideálních podmínek by se tyto značky neměly používat vůbec, ale bohužel ideální podmínky nemáme, tudíž nám nezbývá nic jiného, než prostě občas (v závislosti na složitosti stránky) div či span použít. To je celé.

12. quinux
26. 12. 05, 19.33

Přesně tak, pan Havrlant odkazuje na jednu stránku, kterou vytvořil plaváček (neviděl jsem jestli byl dokončen celý web), jedná se pouze o jednu stránku možná rozsáhlého webu, a na těch dalších stránkách již nemusí být možnost zůstat právě u konstrukce jednoho divu a jednoho spanu, ale tím nechci říct, že to možné není. Jsou však weby, kde prostě nemůžete použít jen jeden div, ale musíte jich vytvořit mnohem více a přesto souhlasím s tím, že výsledný kód bude mnohem sémantičtější, než kdyby jste onu stránku dělali pomocí tabulek.

13. Tomik
26. 12. 05, 20.33

Hm… zase :)

span>ůdiv>ů… tak snad… :D

26. 12. 05, 23.46

Podle mého skromného názoru by se a  neměly přestat používat.

Samozřejmě, nesmí to být v „prasáckých“ případech, kdy je z  uvařen celý design a člověk v kódu pomalu nenajde jinou značku (a upřímně přiznávám, že donedávna jsem k takovým též patřil…), ale někdy se jim vyhnout nejde, či je to alespoň mnohokrát složitější.

Přijde mi logičtější, abych třeba menu měl „obaleno“ divem s unikátním ID, které mi jej bude v kódu jednoznačně určovat, než tam mít nadpis a seznam a těm jednotlivě přiřazovat styly.

Ale jak dokazují oba příspěvky (míněn zde a na webu o sémantice), je to věc názoru :o)

27. 12. 05, 02.00

Souhlasím, já vidím použití DIVů jednoduše a řekl bych, že v tomto způsobu lze nalézt i jejich „sémantičnost“: když potřebujeme nastylovat levý blok stránky (např. menu) jinak, než pravý (např. obsah), obalíme levý blok DIVem => troufám si tvrdit, že na tomhle způsobu není nic špatného, jelikož tím strukturovaně oddělíme menu od obsahu. Nicméně pokud kodéři používají místo značek P, BLOCKQUOTE atp. značky DIV, je to prasečina.

16. Daniel Srb ben Abraham
28. 12. 05, 09.39

Má to ale někdo starosti, nadbytečným značkám všeho druhu se samozřejmě vyhýbám, ale za každou cenu to valný smysl prostě nemá.

Tvrzení „… čím méně je na stránce divů, tím je stránka sémantičtější…“ je opravdu povedené, ale Silvestr je až za pár dní.

Nebo je snad myšleno vážně, že počet značek bez sémantického (a zároveň jiného) významu ovlivňuje sémantiku? Jsem ale rád, že toto nutné zlo můžeme použit pro ten layout tedy, i když to není správné. Už jsem se bál, že mi to zakážou. : O To bych totiž asi umřel hlady.

29. 12. 05, 13.17

Obávám se, že tu někteří komentující míchají několik pojmů dohromady. Za prvé, ukázka webu s jedním DIVem je jenom ilustrace skutečnosti, jak silnou technologií CSS je, ale v běžné praxi se pochopitelně použít nedá. Za druhé – elementy DIV a SPAN jsou prvky sémanticky NEUTRÁLNÍ, čímž je myslím řečeno vše. Jejich, třeba i nadmérné použití, nijak sémantiku dokumentu nenarušuje. Jejich posláním je především udržet logickou STRUKTURU dokumentu, to jest zajistit rozložení základních prvků stránky tak, aby nebyla narušena logická posloupnost podávaných informací. Shrnuto a podtrženo – použijete-li dva DIVy nebo padesát DIVů, sémantiku dokumentu nenarušíte. Dokazuje to pouze, že jste dosud nepronikli dostatečně do tajů CSS pozicování. Ale to se poddá časem :)

29. 12. 05, 14.27

Mingan:

Složitější struktury si bez nich opravdu nedovedu představit.

Já také ne.

Možná jde jen o mou omezenost, ale myslím, že zde jde autor do extrému

Nejdu do takového extrému, jak si myslíš, ale částečně se ho asi přeci jen dotýkám;-).

Tomik:

nebo se u toho člověk docela zapotí (IMHO by mohl autor výše zmíněného webu vyprávět)

mohl :-). Ale taky je to tím, že autor nezná základy CSS a neví, jak se dají přebíjet různé CSS vlastnosti.

Jiří Bureš:
Ano, tak nějak jsem to myslel.

Lukoko:

Webdesigner, ktery vi o cem je rec a umi tyto znacky pouzivat by mel poznat komu je tato kritika urcena.

Ano, s tímto bych také souhlasil, to je hezká věta.

Béďa:

množství divů se dá často dost výrazně zredukovat, nebo div nahradit nějakou jinou, sémanticky správnější značkou.

Do třetice ano, přesně tak.

quinux:

Jsou však weby, kde prostě nemůžete použít jen jeden div, ale musíte jich vytvořit mnohem více a přesto souhlasím s tím, že výsledný kód bude mnohem sémantičtější, než kdyby jste onu stránku dělali pomocí tabulek.

Je zajímavé, že jsem nikdy nikde neřekl, že by se místo divů měly používat tabulky a přesto je to již několikátá zmínka o tabulkách. Opravdu si myslíte, že jako zastánce sémantiky bych doporučoval používat na layout stránky taubulky? Pokud jen ten <div> použit správně, nemám proti němu výhrady.

Daniel Srb ben Abraham

Tvrzení “… čím méně je na stránce divů, tím je stránka sémantičtější…” je opravdu povedené, ale Silvestr je až za pár dní.

Pokud bych to přepsal na čím méně je na stránce zbytečných divů, vyhovovalo by vám to více?

Plaváček

ukázka webu s jedním DIVem je jenom ilustrace skutečnosti, jak silnou technologií CSS je

V podstatě ze stejného důvodu jsem tu stránku odkázal. Jestli si třeba nepřeješ, abych na ni odkazoval, stačí říci a já ten odkaz zruším:-)

Jejich, třeba i nadmérné použití, nijak sémantiku dokumentu nenarušuje.

Jestliže mají HTML značky vyznačovat nějaký význam, tak podle mě sémantiku narušují. Nepřekousnu představu, že každá druhá HTML značka ve zdrojáku nemá význam.

Filosof
Mohl bych poprosit, zda by bylo možné tady udělat náhled komentářů?

29. 12. 05, 15.12

V první řadě bych se pokusil izolovat problém, kvůli kterému je nezbytné DIVy a SPANy (a nejen je) používat – je jím nedostatečná podpora CSS v prohlížečích. Nemluvím o chybách v zobrazení, ani o nepodporovaných parametrech, ale o podpoře selektorů. Právě s jejich pomocí lze dosáhnout velmi úsporného kódu, který lze s minimem nadbytečných berliček externě formátovat.
Jelikož nelze selektory v praxi naplno využívat, nic nenutí vývojáře studovat a zažít si jejich principy. Kvůli neefektivní práci se selektory poté vznikají a zažívají se špatné postupy, díky kterým poté vznikají tyto články, které se nezabývají příčinami a jejich řešením, ale pouze důsledky bez důležitého kontextu.

30. 12. 05, 01.17

Jsem rád, že alespoň Sigy uhodil hřebíčkem do hlavičky :) Jediný důvod, proč dokument vycpávat neutrálními prvky je ten, že se na ně navěšuje nějaká _prezentační_ záležitost, neboť současné CSS ve své šíři použitelné kompatibility na to nemá síly.

30. 12. 05, 18.47

Tak takhle dlouhou diskusi jsem skutečně nečekal.

[18] ad Náhled komentářů – šlo, ale zatím ho tu nemám.. popřemýšlím pro další verzi blogu..

[18] ad tabulky – ano, použil jsem toto přirovnání schválně. Především kvůli stránce Fekální styl, kde píšeš, že se Ti předivované stránky líbí ještě méně než tabulkový layout.. :-)

30. 12. 05, 19.21

Filosof:

ano, použil jsem toto přirovnání schválně. Především kvůli stránce Fekální styl, kde píšeš, že se Ti předivované stránky líbí ještě méně než tabulkový layout.. :-)

Tak tady je zakopaný pes! Ano, ale to se týká výhradně těch stránek, kde skutečně není nic jiného, než div a span (no dobře, ještě odkaz a možná obrázek :-)). Pokud vezmu v úvahu, nějakou starší stránku v tabulkovém layotu, kde ale budou všechny části stránek sémanticky správně vyznačeny (nadpisy, odstavce apod.), přijde mi to celkově sémantičtější, než pouhá hromádka divů.

V podstatě Plaváček má asi pravdu, trochu to rozvedu, i když si asi trochu podřežu pod sebou větev, ale možná se nakonec přeci jen dohrabeme k nějakému závěru. Sémantika tedy určuje smysl jednotlivých částí kódu. Vyznačím-li tedy nadpis značkou <h1>, tak i když ho obalím třeba dvaceti divy, pořád bude text v <h1> a pořád to tedy bude nadpis, tudíž sémanticky je to vlastně vyznačené správně. Z tohoto úhlu pohledu tedy divy nevadí. Samozřejmě něco jiného je, kdyby ten nadpis byl v divu, ale nebyl v <h1>, to už je pak pochopitelně špatně.

30. 12. 05, 22.43

[22] v tom případě jsme se vzájemně nepochopili :-) což ovšem nevadí, protože tu alespoň vznikla zajímavá webově semantická diskuse, ze které jsou jistě některé části použitelné i pro Tvůj web..

24. DJ.Maca
30. 12. 05, 22.46

Jen pro nektere diskutujici: Zamyslete pro koho vubec delate web.Jestli je delate pro normalni lidi nebo roboty.

Diskutovat nad tim, ze je tam 2 3 divy navic, je myslim opravdu zabomysi vlaka. Bohuzel XHTML neni az tam semanticky jazyk. Ponekud tam chyb takove veci, ktere by definovalo paticku, menu (existoval drive tento tag, ale uz jaksi neni), logo, box a co ja vim.

Take se zamysltere nad tim, kdo Vam to mluvi do prace, jak slozitou delate a pro jakou cilovou skupinu delate. Grafik vam rekne, ze tam gradient chce. Tam bude nasledovat jiny gradient. Pripada se k tomu i nadrizeny clovek, ktery se stara o tu o uvedeni te prezentace. A vy to ted mate resit. DIV SPAN jsou podpurne prostredky, ktere vam to dovoli obejit.

V dnesni dobe se klade docela velky duraz na slozitost podoby stranek. Uz nestaci jen jednoduche prezentaci.

Az bude v praxi pouzitelne SVG, da se do vinku CSS silnejsi vlastnosti, tak se bude vyvijet snaze i toho nelogickeho a preobalovaneho kodu ubyde. Ale kdy ta doba nastane?

25. Ji31
31. 12. 05, 00.45

No v podstatě co tu napsal Filosof je pravda, ale dá se na to dívat i takhle:
http://wordstudio.xf.cz/article/i-semanticky-nespravny-web-muze-byt-pekny

26. mila
31. 12. 05, 16.06

Vždycky jsem si myslel, že div a span nějaký semantícký význam mají.
Vysvětloval jsem si je, že označují něco jako část, oddíl, sekci, …

Jelikož tu několik lidí napsalo, že div nemá sématntický význam, tak jsem se podival sem: http://www.w3.org/TR/html401/struct/global.html#h-7.5.4

The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents.“

Těžko bych se o tom nějak hádal, ale cit mi říká, že „adding structure“ je docela sémantická záležitost a tyto tagy jsou od toho, aby dávali dokumentu jistou logickou strukturu.

Neboli použití div id=“footer“ mi přijde jako správné použití, ale prázdné spany jen za účelem imagereplacementu jsou proti sémantice. Nijak dokument nestrukturují, jen se tam strčí, aby se daly ostylovat.
V praxi je to ale samozřejmě výborný nástroj, ale to je jiná věc.

01. 01. 06, 20.28

[25] moje IP nemůže komentovat u Tebe na blogu, tak svůj komentář postnu aspoň tady:

Ona především vůbec nesouvisí „krása webu“ a jeho kód.. graficky propracovaný web může být nepřístupný a naopak semanticky správně napsaný web může být totálně nepoužitelný. Úkolem dobrého webdesignera je umět (nejen) tyto dvě vlastnosti webu spojit.. :-)

02. 01. 06, 17.12

Ji31:
Myslím, že není nutné tento odkaz dávat všude. Stačí, že je u Yuhůa na weblogu a že jste mi ho poslal mailem.

mila:
V tom případě, pokud použiješ divy třeba na kulaté rohy, bude to dost zvláštní. Neboli – jednou ten div význam má (id=“footer“) a jednou ne (id=“pravy-horni-roh“). To je také trochu zvláštní a nesémantické.

Filosof

Úkolem dobrého webdesignera je umět (nejen) tyto dvě vlastnosti webu spojit.. :-)

Přesně tak ;-)

04. 01. 06, 00.51

[26] Struktura nemusí implikovat význam alias sémantiku.

30. Miloš
05. 01. 06, 19.35

[25] „Neboli použití div id=”footer” mi přijde jako správné použití…

Mně ne, pokud mohu zapsat p id=“footer“; ten div by tam měl smysl leda ten, že by obaloval odstavec s obrázkem, víc odstavců a tak podobně.
Text pouze v DIVu považuju za čuňačinu.

31. Miloš
05. 01. 06, 19.37

Oprava, týká se to [26] – nevšim jsem si, že je jméno až pod komentářem.

32. savalo
19. 09. 06, 01.09

Zdravim,
pouzivat desitky divu neni dobre pro seo, google muze strankam s hodne divy ubrat na kvalite.