XHTML i CSS

Patryk Zawadzki


Zbudowanie poprawnej struktury dokumentu wymaga nie tylko znajomości wszystkich elementów udostępnianych przez język HTML, ale także zrozumienia działania kaskady dla warstwy prezentacji CSS.

Numer 15 (1/2006) • 25 stycznia 2006


Jinyoung Shin : Minigaleria

Patryk Zawadzki. Validate your brain.

Ilustracja: Jinyoung Shin


Validate your brain


(X)HTML to nie tylko poprawnie pozamykane tagi


Razem z przejściem "wielkich" świata webdesignu (i nie mamy tu na myśli prawdziwych sieciowych osobistości, rynek ma tendencję do dostrzegania jedynie ruchów wykonywanych przez duże firmy) na język XHTML, rozpoczęła się swego rodzaju rewolucja wśród tworzących dla sieci.

Ludzie, którzy kiedyś byli skłonni sprzedać zupę z niedbale porozrzucanych tagów, byle efekt graficznie był spójny z zatwierdzonym przez klienta projektem, nagle spostrzegli, że tak nie powinno się robić. Nie zadali sobie trudu poznania głębszych przesłanek, zauważyli za to istnienie walidatora kodu, udostępnianego przez W3 Consortium.

To dało początek nowemu pokoleniu, wyznawcom walidacji. Bezpowrotnie odeszły w niepamięć niepozamykane tagi, zniknęły znaczniki <font>, pojawiły się za to rozwiązania równie niewłaściwe. Ludzie poczuli wewnętrzną misję dostosowania starego modelu myślenia do nowych wymagań rynku, podczas gdy to właśnie stereotyp patrzenia na HTML jak na język prezentacji leży u podstaw większości błędów. HTML jest językiem opisu struktury.

Pojawiło się też wiele legend dotyczących "nowych" standardów (przypomnijmy, że specyfikacja HTML 4.01 ma już przeszło sześć lat na karku). Czytamy oto na przeróżnych forach dyskusyjnych, jak to nie da się poprawnie zagnieździć na stronie apletów Javy czy prezentacji Flash, na szczęście ich autorzy wymyślili wiele przebiegłych rozwiązań, które pozwalają za pomocą skryptów ECMA oszukać walidator i dopiąć swego.

Równie często spotkać można strony, których cała struktura opiera się właściwie na jednym elemencie – <div/>, którego ranga zbliżona jest już do noża szwajcarskiego. Wszak odpowiednio ostylowany, posłusznie udawać będzie każdy niemal element. Wyjątkiem jest znacznik definiujący łącze hipertekstowe, ale i te coraz rzadziej z odnośnikami mają cokolwiek wspólnego. Zwykłe podanie adresu przestało wystarczać, teraz odnośniki definiuje się za pomocą skryptów, które lepiej – od niewykwalifikowanego w dziedzinie budowania serwisów internauty – wiedzą, czy odnośnik ten powinien znaleźć się w osobnym oknie, karcie przeglądarki, czy może powinien zastąpić treść obecnie oglądaną.

Jeden z dużych portali przeprowadził nawet badania nad dostępnością i w kodzie swojej ankiety zastosował zupełnie nowatorskie rozwiązanie. Posługując się skryptami JavaScript i stylami CSS, zmienili zwykły akapit tekstu w klikalne pole, którego wybranie powodowało zaznaczenie znajdującego się tuż obok przycisku radiowego. W ten sposób z pozoru przeciętny fragment tekstu zaczął zachowywać się jak klikalna etykieta, dla której HTML ma nawet specjalny element, jednakże koszt przeszkolenia webmastera w posługiwaniu się takimi nowinkami widocznie przekraczał koszt zatrudnienia sztukmistrza sprawnie operującego skryptami.

Dla wielu osób budowa dokumentu czy szablonu polega na wyklikaniu potrzebnego wyglądu w edytorze WYSIWYG pokroju Microsft FrontPage lub Macromedia Dreamweaver. W przypadku tego drugiego wystarczy wybrać odpowiedni rodzaj dokumentu. Pierwszy wymaga jeszcze ręcznych poprawek w notatniku i już można spokojnie umieścić w widocznym miejscu znacznik "Valid (X)HTML".

Walidator jest jednak tylko narzędziem. Narzędziem potężnym i znacznie ułatwiającym pracę kodera, jednak, gdy stosowany jako wyłączna metoda oceny serwisu, jest pomocą ułomną, gdyż sprawdza tylko to, o co poprosili go autorzy – czy dokument nie zawiera błędów składniowych.

Dla walidatora nie ma znaczenia, czy na swojej drodze spotyka <p>lorem<br />ipsum</p>, <p>lorem</p><p>ipsum</p>, czy <div>lorem</div><div>ipsum</div> – to wszystko jest "valid", choć niekoniecznie ma znaczenie semantyczne.

Bo tu właśnie pojawia się dysonans – HTML to nie pościg za znaczkiem "valid". Wielu autorów o tym wspominało, lecz "webmasterzy" zdają się specjalnie przeoczać tego typu informacje. Tym czasem walidacja to nawet nie połowa sukcesu, bo trzeba pamiętać, że kod nie jest celem samym w sobie, ma on służyć nie nam lecz człowiekowi, który naszą stronę odwiedzi. Często nawet założenie, że jest to człowiek okazuje się na wyrost. Każdego dnia pająki serwisów wyszukiwawczych przeczesują miliardy dokumentów w sieci. Ich nie interesują ciekawe tła, czy płynne gradienty.

Podobnie jak niektóre urządzenia przenośne i systemy syntezy mowy używane przez niedowidzących i niewidomych, roboty wyszukiwawcze całkowicie ignorują te elementy witryny, które odnoszą się wyłącznie do jej wyglądu. Oznacza to nie tylko style zdefiniowane bezpośrednio w kodzie i w CSS, ale także wszystkie elementy bez znaczenia semantycznego (jak <div/> czy <span/>), elementy czysto prezentacyjne (jak <b/> czy <i/>) i elementy reprezentujące zagnieżdżone obiekty bez alternatywnej wersji tekstowej (jak obrazki z pustym atrybutem alt – ulubiona metoda na walidację – czy zagnieżdżone multimedia bez tekstowego opisu).

Ważna jest też prawidłowa konstrukcja tabel, zwłaszcza tych, które nie pełnią roli zestawienia danych typowo tabelarycznych, a odpowiedzialne są za wygląd w układach hybrydowych. Przeglądarki głosowe i serwisy wyszukiwawcze traktują tabele tak, jakby nie istniały elementy wierszy i komórek, dane odczytywane są z lewa na prawo i z góry na dół, w takiej kolejności, w jakiej pojawiają się w źródle dokumentu. Dla tych, którzy – z różnych powodów – muszą pozostać przy układzie hybrydowym, a chcieliby zamienić miejscami treść i menu na swojej stronie, istnieje całkiem interesująca sztuczka, pozwalająca na tego typu zabieg.

Z tego powodu bardzo łatwo skonstruować poprawny na poziomie składni XML dokument oparty o XHTML, którego dostępność będzie znacznie niższa niż w przypadku dobrze przemyślanego dokumentu HTML 4.01, do którego wkradło się kilka błędów. Mit o doskonałej dostępności XHTML jest niczym więcej niż tylko bajką dla dużych dzieci. W warstwie semantyki XHTML nie różni się wcale od HTML 4.01. To struktura dokumentu i dobór właściwych znaczników stanowi o efekcie, a nie wybrany wariant języka. Dopisanie kilku znaków ukośnika za obrazkami i elementami łamiącymi wiersze nie spowoduje, że strona nabierze nowej jakości.

W idealnym świecie proces budowy strony dzieliłby się na dwa niezależne etapy. Pierwszy polegałby tylko na zbudowaniu struktury dokumentu, drugi na napisaniu arkusza stylów i podłączeniu ewentualnych skryptów ułatwiających nawigację (ułatwiających jest tu ważnym słowem, możliwość nawigacji wielu serwisów w sporej części zależy od skryptów, co jest dopuszczalne tylko w bardzo wąskim gronie zastosowań).

Niestety, podział taki nie jest jeszcze możliwy z powodu wad dostępnych obecnie przeglądarek, w szczególności podzbiór selektorów CSS obsługiwany przez przeglądarkę Internet Explorer 6 nie pozwala na zupełne odseparowanie wyglądu od struktury, stąd pojawia się konieczność stosowania podziału na sekcje. Do tego ostatniego używa się właśnie elementów pozbawionych znaczenia semantycznego – <div/> – i jest to jedno z nielicznych jego poprawnych zastosowań.

Zbudowanie poprawnej struktury dokumentu wymaga nie tylko znajomości wszystkich elementów udostępnianych przez język HTML, ale także zrozumienia działania kaskady dla warstwy prezentacji CSS. Wielu ludzi zapomina o tym ostatnim, co owocuje dokumentami naszpikowanymi zbędnymi odwołaniami do klas i stylami aplikowanymi inline tam, gdzie wystarczyłaby prosta reguła dziedziczenia CSS.

Przykłady błędnego użycia HTML i powiązanych z nim technologii można dwoić i troić. Są wśród nich poważne, jak używanie paragrafów do wstawiania nagłówków, bo "elementy <h1/><h6/> mają za dużą/zbyt małą czcionkę". Są i błahe, jak wstawianie atrybutu alt na siłę – wszak Internet Explorer wyświetla go w formie podpowiedzi, bądź ustawianie tego atrybutu dla elementów czysto dekoracyjnych (odwiedzający serwis marzą wprost o czytaniu "to jest lewy górny półokrągły narożnik", a są też serwisy, które dla tych elementów ustawiają alternatywny tekst na kropkę lub gwiazdkę). W przypadku alternatywnego tekstu, walidator całkiem prawidłowo informuje, że atrybut jest wymagany, standard natomiast wyraźnie mówi, że dla elementów nie będących częścią treści, powinien być ustawiony na pusty ciąg znaków, stąd jedynym prawidłowym zapisem jest alt="".

Wszystkie te błędy wynikają z niedbałości bądź lenistwa. Najczęstszym argumentem, jakim posługują się "webmasterzy", jest "robiłem tak od czasów Netscape 4 i do dzisiaj to działa." Prawda jest jednak taka, że świat nie zatrzymał się w miejscu w połowie lat dziewięćdziesiątych i rynek, choć nie śledzi na bieżąco wszelkich nowinek technologicznych, prędzej czy później zacznie domagać się rozwiązań "nowoczesnych," choćby nawet nie z powodu zrozumienia potrzeb poszczególnych grup internautów, ale za sprawą działu reklamy, który sprawnie obraca coraz to nowsze technologie w hasła marketingowe i produkt sam w sobie. Warto wtedy być na czasie i mieć etap wdrażania za sobą, w przeciwnym wypadku można obudzić się bez pracy i, co gorsza, bez kwalifikacji.

Patryk Zawadzki


O autorze

Patryk Zawadzki

Patryk Zawadzki

W sieci szerzej znany jako Patrys, z komputerami pracuje od dziecka. Początkowo jako programista, od sześciu lat związany jest z siecią. Obecnie pracuje jako webdeveloper dla Internet Center Polska i prowadzi poświęconego standardom bloga.