Standardy i semantyczny kod!

Jakiś czas temu przeczytałem książkę Jeffrey’a Zeldmana i zachłysnąłem się standardami. Przyznaję się, że sam stwrzyłem kiedyś stronę opartą na tabelach i wydawało mi się to całkiem dobrym rozwiązaniem. Spory wpływ na moje obecne podeście miała również prezentacja „Dlaczego układ na tabelkach jest głupi” i strona css Zen Garden. Przy okazji tego tematu polecam też opis, jak można poprawić niestandardową stronę: Wyrzucanie tabel przez okno i „Semantyczny XHTML, część 2„. Zobacz również mój wpis dotyczący zmiejszenia ilości tagów w dokumencie HTML po przjściu na stronę opartą o standardy i semantyczny kod: Różnica między TABLE a DIV w konstrukcji strony.

Standardowe strony

Różnica między TABLE a DIV w konstrukcji strony

Na przykładzie przebudowy strony EIC widać, jak wpływa na objętość strony semantyczny kod.Pierwsza strona oparta na tabelkach ma znacznie więcej znaczników i jest cięższa: 23,5kB.

EIC - stara strona

Druga wersja strony (oparta o semantyczny kod) zajmuje 5,8kB. To nie wiele, ale w ramach całego serwisu zawierającego dziesiątki lub setki srton to już ma znaczenie.

EIC - nowa strona

Obrazki prezuntują graficzne zobrazowanie stronyktury strony. Taki wykres dla dowolnej strony można wygenerować na www.aharef.info/static/htmlgraph.

Znaczenie kolorów:blue: odnośniki (A)red: tabele (TABLE, TR, TD)green: DIVviolet: obrazki (IMG)yellow: formularze (FORM, INPUT, TEXTAREA, SELECT, OPTION)orange: tekst (BR, P, BLOCKQUOTE)black: HTMLgray: pozostałe (m.in. META, SCRIPT)Więcej na temat wyższości div’ów nad tabelkami na stronie osiolki.net/tabelki.