Podstawy#

Semantyka#

Ostatnio dużo mówi się na temat semantyki # (semantics) w kontekście używania języka (X)HTML. Jestem pewien, że nawet osoby nie znające dokładnego znaczenia tego pojęcia spotkały się ze stwierdzeniami, że należy dbać o semantykę kodu. Nic bardziej mylnego, pod warunkiem zrozumienia idei.

Rysunek. W3C standaryzuje semantykę Sieci

Definicja ogólna#

W encyklopedycznym ujęciu, semantyka to dyscyplina badająca relacje pomiędzy znakami a przedmiotami, do których się one odnoszą. Semantyka zajmuje się badaniem znaczenia słów, czyli interpretacją znaków oraz interpretacją zdań i wyrażeń języka. Semantykę nazywa się również teorią znaczenia lub teorią oznaczania zależnie od określenia pojęcia znaczenia (tak przynajmniej podaje Wikipedia). Odnieśmy definicję do tworzenia stron internetowych operując językiem (X)HTML.

Semantyka kodu (X)HTML#

Semantyka - najprościej ujmując, polega na używaniu znaczników zgodnie z ich przeznaczeniem. Znaczniki stosowane zgodnie ze swoją semantyką przekazują dodatkowe informacje na temat swojej zawartości. Semantyka dotyczy wyłącznie znaczenia elementów, a nie ich wyglądu!

Aby dokładnie zrozumieć zagadnienie należy uświadomić sobie z jakich warstw zbudowana jest strona internetowa. Przede wszystkim zwracam uwagę na takie pojęcia jak struktura i prezentacja. Język (X)HTML służy nam do opisu struktury (nie wyglądu!) strony za pomocą odpowiednich znaczników. Za całą prezentację (wygląd) odpowiedzialny jest CSS. Trzymajmy się tych reguł przez całą naszą przygodę z webmasterstwem.

Zgłębiając składnię języka (X)HTML poznajemy wiele znaczników służących do opisu struktury dokumentu. Niektóre z nich wprowadzają dodatkowo odpowiednie formatowanie. Zdarza się, że na pierwszy rzut oka część z nich powiela funkcjonalność kolejnych np. <strong>...</strong> (mocne wyróżnienie) i <b>...</b> (pogrubienie). Efekt wizualny wprowadzany przez znacznik <h1>...</h1> równie dobrze uzyskać można poprzez odpowiednią czcionkę za pomocą znacznika <font>...</font> lub stosując CSS. Pozory mylą.

W języku (X)HTML wyróżniamy dwa podstawowe typy elementów określających atrybuty tekstu:

Elementy prezentacyjne - ich jedynym zadaniem jest nadanie określonego wyglądu dla tekstu, który obejmują, bez żadnego odniesienia do znaczenia tekstu. Przykładami są np.: CENTER (wyśrodkowanie), B (pogrubienie), I (pochylenie), U (podkreślenie), S i STRIKE (przekreślenie), FONT (czcionka), BASEFONT (czcionka bazowa), BIG (czcionka powiększona) SMALL (czcionka pomniejszona). Stosowanie tych znaczników nie mówi nic o znaczeniu treści, które znajdują się wewnątrz nich.
Wszystkie wyżej wymienione elementy odpowiadają za warstwę prezentacyjną dlatego odradzam ich stosowanie. W zamian należy odpowiednio wykorzystywać arkusze stylów. Część przestarzałych poleceni została już wycofana (CENTER, U, STRIKE, FONT, BASEFONT, BIG, SMALL), prawdopodobnie pozostałe podzielą ich los w przyszłości.
Elementy semantyczne - określają charakter (znaczenie) tekstu, który obejmują. Zwykle niosą ze sobą również odpowiednie formatowanie (prezentację), ale nie jest to wymagane. Są to np.: Hx (tytuł), STRONG (mocne wyróżnienie), EM (emfaza), CODE (kod komputerowy), KBD (klawiatura), SAMP (przykład), VAR (zmienna), Q (cytat), CITE (odniesienie do źródła), BLOCKQUOTE (blok cytowany), ADDRESS (adres), INS i DEL (zmiany), ABBR (skrót), ACRONYM (akronim), DFN (definicja). Za pomocą CSS możemy bezproblemowo zmieniać wygląd elementów.

Znacznik <strong>...</strong> wskazuje, że objęty nimi tekst jest bardzo ważny. <code>...</code> daje do zrozumienia, że jest to fragment kodu komputerowego - np. jakiegoś programu. <acronym>...</acronym> i <abbr>...</abbr> to wspólnie z <q>...</q> i <cite>...</cite> jedne z najbardziej "niedocenianych" znaczników. Tymczasem niosą ze sobą niezwykle ważne informacje. Nie wygląd znacznika jest istotny a jakie informację sobą reprezentuje.

Istnieją tagi, które z punktu widzenia semantyki nie mają żadnego znaczenia. Są niejako przezroczyste, nie mają z góry narzuconej struktury. Pudełko <div> pozwala podzielić kod strony na fragmenty, ale nie ma realnego znaczenia. Nie wezmą go pod uwagę wyszukiwarki internetowe, ani przeglądarki tekstowe. Tak samo znacznik <span> - możemy go używać wtedy, gdy nie istnieje żaden tag, który możnaby zastosować w danej sytuacji.

Pozostałości z przeszłości#

Jak widzisz wiele znaczników w języku (X)HTML służy tylko i wyłącznie do formatowania wyglądu. W czasach powstania HTML-a nie było wówczas osobnego języka do opisywania wyglądu dokumentu, stąd taka mnogość tagów. Nie bez winy pozostawali także twórcy oprogramowania, w szczególności przeglądarek internetowych.

Język HTML w ciągu ostatnich 20 lat zatoczył pełne koło. Pierwsze specyfikacje HTML-a podane przez Tima Bernersa-Lee określały HTML jako język opisu struktury dokumentu. W okresie wojny przeglądarek, czyli w drugiej połowie lat 90. ubiegłego stulecia, wypaczenie początkowej idei HTML-a sięgnęło apogeum. Witryny z tego okresu przeładowane były wszelkiego rodzaju rozwiązaniami, których jedynym celem było modyfikowanie wyglądu. W ten sposób prezentacyjne cechy witryn z okresu 1995-2000 przesunęły na dalszy plan strukturę dokumentu, nie wspominając o semantyce.

Wraz z pojawieniem się przeglądarek, które dość spójnie implementowały CSS, nastąpił nawrót do początkowych koncepcji. Cechy wizualne witryny zostały w znacznym stopniu oddzielone od struktury dokumentu. Obecnie strony WWW ponownie stały się krótkimi zwięzłymi dokumentami, w których główny nacisk jest kładziony na strukturę. Wygląd dokumentów jest opisany przez arkusze stylów.

Semantyka dla ludzi czy semantyka dla maszyn?#

Odpowiedź jest bardzo prosta: I dla ludzi i dla maszyn. Wszystkie informacje cyfrowe - nim trafią do odbiorcy - przetwarzane są przez wyspecjalizowane urządzenia. Sterowanie urządzeniem, jego efektywna eksploatacja zazwyczaj odbywa się za pomocą oprogramowania (software). Prostota, czytelność, porządek w kodzie znacząco przyspiesza cały proces i ułatwia dalszy jego rozwój.

Z informacji niesionej przez znaczniki semantyczne korzystają zwykłe przeglądarki internetowe, wyróżniając je w specjalny, właściwy sobie sposób.

Semantyka - ważna sprawa Znaczniki semantyczne mają ogromne znaczenie dla syntezatorów mowy, czyli specjalnych przeglądarek, które odczytują treść stron WWW na głos. Używane są najczęściej przez osoby niewidome. Taka osoba nie zobaczy koloru czcionki i nie będzie wiedzieć, że gdzieś tekst został wytłuszczony w tradycyjny sposób. Natomiast używany syntezator mowy, kiedy natrafi na znacznik <strong>...</strong>, może specjalnie podkreślić tonem głosu zawarty w nim tekst. Wprost nieocenioną pomocą dla syntezatorów mowy są znaczniki akronimów i skrótów. Aplikacje takie mają zwykle wbudowaną bazę najpopularniejszych skrótów i akronimów, a więc kiedy na nie natrafią, mogą odczytać ich pełną nazwę, a nie literować. Oczywiście najpierw trzeba poinformować syntezator, że dany wyraz jest skrótem lub akronimem, a nie jakąś specjalną nazwą, którą używasz w swoim tekście. Jeżeli używasz skrótów lub akronimów, które są dość mało znane, zalecane jest dodanie atrybutu title="...", w którym można umieścić pełne rozwinięcie nazwy. Wyeliminuje to konieczność domyślania się rozwinięcia przez syntezator i ewentualnych pomyłek (jeden akronim może mieć zupełnie różne rozwinięcia w różnych dziedzinach wiedzy).

Semantyczne tworzenie dokumentów ma niebagatelne znaczenie dla osób z pewnymi upośledzeniami (osoby niewidome, niepełnosprawne, o ograniczonych możliwościach manualnych). Wykorzystują oni specjalne oprogramowania umożliwiające korzystanie z dobrodziejstwa technologicznego jakim jest Internet. Mimo, że osoby te stanowią niewielki procent odwiedzających witryny, także o nich powinniśmy pamiętać. Dzięki temu uczynimy ten świat lepszym, wygodniejszym dla wszystkich.

Właściwe oznaczanie tekstu za pomocą znaczników semantycznych ma ogromne znaczenie dla robotów wyszukiwarek sieciowych. Są to aplikacje, które przez cały czas szukają nowych stron w Internecie i sprawdzają, czy stare się nie zmieniły. Za pomocą specjalnego algorytmu informatycznego przetwarzającego treść odwiedzanych stron, zapisują linki do nich w bazie danych przyporządkowując je do odpowiednich słów kluczowych (haseł). Z tej bazy danych korzystają następnie wyszukiwarki sieciowe, takie jak Google, kiedy użytkownicy przeszukują Internet za ich pośrednictwem. Aby serwis WWW mógł być popularny, konieczne jest takie zbudowanie treści, aby była ona przyjazna dla robotów wyszukiwarek, ponieważ inaczej trudno go będzie komukolwiek odszukać. Może to zabrzmi dziwnie, ale można powiedzieć, że roboty wyszukiwarek są "niewidome"! Dlatego na pewno docenią, że chcesz im pomóc w prawidłowym zaindeksowaniu (zapisaniu informacji o stronie w bazie danych) swojej strony. Mogą się odwdzięczyć oczywiście wyższą pozycją na liście wyszukiwania, co bezpośrednio wpłynie na popularność serwisu WWW.

Dla programu semantyczna ma być struktura, a nie treść strony wespół z prezentacją. Przykładowo dla <X>Ala ma kota</X> automat przetwarzający ma wiedzieć, czym jest zdanie "Ala ma kota", a nie rozumieć co ono znaczy i jak się prezentuje na ekranie monitora. W kodzie semantycznym nie wygląd znacznika jest istotny a jakie informację sobą reprezentuje.

Dla robotów wyszukiwarek sieciowych nie jest obojętne, czy do oznaczania tytułów rozdziałów użyjesz znaczników <h1>...</h1> - <h6>...</h6>, czy może <font size="7">...</font> - <font size="1">...</font> (ewentualnie korzystając z CSS i elementów niesemantycznych). Nikt rozsądny nie wpisuje w znacznikach tytułu tekstu, który nie ma nic wspólnego z zawartością rozdziału, co może mieć miejsce dla elementu FONT.

Przykładów można wymieniać wiele:

telefony komórkowe, palmtopy, PDA
screenreadery czytające to, co najważniejsze, zamiast elementów menu, reklam itp.
przeglądarki z możliwością wyłączenia innych niż tekst elementów strony
programy umożliwiające ściągnięcie ze strony konkretnych, interesujących nas zawartości (artykuły, listy, multimedia itd.)

Wraz z rozwojem Internetu i nowoczesnej techniki ilosć ta będzie systematycznie wzrastać. Dlatego temat semantyki jest aktualny i z pewnością taki pozostanie przez najbliższe lata.

Semantyka a praktyka, czyli precz z po`<b>`a`<br>`anym kodem#

Do tej pory próbowałem wyjaśnić Wam ideę poprawnego kodu semantycznego przy budowie stron WWW. Były to raczej rozważania czysto teoretyczne, przejdźmy zatem do praktyki.

W czasie pisania poprawnego kodu strukturalnego nadającego dokumentowi semantykę kieruj się prostą zasadą: "Koduj, co masz na myśli, myśl, co kodujesz". Zamiast myśleć w ramach "to postawimy tu, a to tam", pomyśl o rodzajach informacji na stronie i jej strukturze.

Prawdę powiedziawszy semantyka kodu (X)HTML nie jest unormowana przez żadną specyfikację, poza opisem samego języka. O ile w odniesieniu do składni HTML oraz XHTML specyfikacje W3C są zwięzłe, jasne i dokładne, to opis semantyki poszczególnych elementów sprowadza się do ich podstawowego użycia. Nie są wymienione żadne złożone konstrukcje, np. akapity umieszczone wewnątrz listy wypunktowanej. Z jednej strony pozwala to na dużą dowolność w użyciu elementów, z drugiej - wprowadza ryzyko błędnego (tj. niesemantycznego) użycia. Brak jest punktu odniesienia, który służyłby weryfikacji czy podany kod jest, czy nie jest semantyczny.

Nie ma również oficjalnych dokumentów, na podstawie których moglibyśmy klasyfikować różne rozwiązania jako mniej lub bardziej semantyczne. Głównymi kryteriami oceny są zdrowy rozsądek, własne doświadczenia i przyzwyczajenia oraz ewentualne dodatkowe wymagania dotyczące konkretnej witryny WWW. O tym jak różne zdania na temat rozwiązań powszechnych problemów mają osoby zawodowo związane z webmasteringiem można się przekonać śledząc dyskusje Simple Quiz na witrynie Dana Cederholma.

Spór o użycie terminu semantyczny w odniesieniu do niedostatecznie semantycznego języka (X)HTML Dan podsumowuje następująco:

Call it semantics, call it preferred methods, call it advantages and disadvantages etc. The bottom line is that talking about this stuff can be beneficial

W istocie chodzi o znalezienie takich konstrukcji (czyli zagnieżdżenia znaczników), które mają - w sensie semantyki lub w dowolnym innym kontekście - przewagę nad innymi rozwiązaniami.

Oto kilka podstawowych prawidłowości, które warto przestrzegać:

Język (X)HTML nie umożliwia tworzenia w pełni semantycznych dokumentów. Obecnie jedynie możemy ułatwić programom analizę tekstową dokumentu, przez umiejętne jego konstruowanie. Najważniejszą kwestią jest więc dostarczanie wszystkich danych w postaci tekstowej. Jeśli na stronie pojawia się jakakolwiek informacja w postaci graficznej i nie ma swojego odpowiednika tekstowego, to witryna taka nie jest semantyczna.
Podziel stronę na logiczne sekcje wykorzystując znacznik <div>, nadaj im odpowiednie klasy (class) lub konkretyzujące id. Miej na uwadze przede wszystkim takie obszary jak: logo witryny, menu nawigacyjne (głowne, dodatkowe), treść właściwą, stopkę, informacje dodatkowe, miejsce na reklamy itp. Nie jest to idealne rozwiązanie layautu, jednakże w tej chwili wydaje się najrozsądniejsze.
Z divami jest jak z każdą używką - wszystko jest dla ludzi - pod warunkiem, że stosujemy je z umiarem. Pojemnik utworzony w celu nadania wizualnych cech witrynie jest błędem. Uwagi na temat tego, że każdy zbędny element div psuje semantykę kodu znajdziecie m.in. w artykule Matthew Levine'a pt. "In Search of the Holy Grail".
Pozbądź się diva łapiącego całą stronę. Przeważnie ludzie nadają mu nazwy #all, #top, #wrap - jakkolwiek Ty go nazwałeś jest on zbędny. W zamian użyj <body>, ustaw odpowiednie tło, marginesy, długości, wycentruj i po kłopocie. Tło dla całej strony bezproblemowo ustawisz w <html>. Jednego elementu mniej w kodzie.
Wszystkie nazwy dla identyfikatorów i klas odnoś do funkcji jakie spełniają, a nie do wyglądu. Stosowanie nazw typu: lewy, czerwony, gruby, nasrodek itd. powoduje, że kod nie jest semantyczny. Pomyśl o tym, dlaczego chcesz coś wyróżnić w pewien sposób, a nie o tym, jak powinno to wyglądać. Wygląd zawsze można zmienić, ale przyczyny nadania odmiennego formatowania pozostaną takie same. Uwagi o identyfikatorach semantycznych znajdziesz na stronie organizacji W3C.
Menu nawigacyjne wrzuć do listy nieuporządkowanej <ul>, uporządkowanej <ol> lub definicji <dl>. Znaczniki te bardzo mocno i dokładnie odzwierciedlają relację, jaka łączy opcje menu. Zdaniem Molly Holzschlag (por. "Integrated Web Design. The Meaning of Semantics") lista ol najlepiej oddaje semantykę menu, ponieważ opcje menu są w istocie uporządkowane.
Divy grupujące tylko jeden element są zbędne. Przykładowo, jeśli posiadasz menu jako listę, nie ma potrzeby by umieszczać ją dodatkowo w divie (to samo tyczy się prostych tytułów czy stopki dokumentu). Elementy <ul>, <ol>, <dl> są elementami blokowymi i możemy z nimi robić to samo co z divami, nie ma konieczności stosowania dodatkowego elementu. W przypadku elementów wyświetlanych w sposób liniowy możemy ustawić im wyświetlanie blokowe.
Leciwych "portalowych" layautów opartych na tabelach unikaj jak ognia. O ramkach zapomnij, świat idzie do przodu.
Ozdobniki layautów wstawiaj jako tło przez CSS. Wystrzegaj się wykorzystywania do tego celu znacznika <img>, który służy do wstawiania konkretnej grafiki (zdjęcia, logo, banery itp.) a nie ozdobników wizualnych (kawałka przycisku czy graficzki koło nagłówka).
Dla każdego elementu graficznego, stanowiącego treść strony stosuj atrybut alt. Umieść w nim tekst alternatywny dla obrazka, nie każdy przeczesuje Internet z włączoną grafiką. Jeżeli z jakiś powodów stosujesz znacznik <img> jako ozdobnik atrybut ten pozostaw pusty alt="".
Twórz przyjazne odnośniki <a> z jasno precyzującą treścią. Wystrzegaj się zwrotów w stylu Klinij tu, Wejdź itp. Tekst tworzonego odsyłacza powinien mieć odpowiednią długość, by osoba przeglądająca stronę nie miała problemów w jego kliknięcie. Kolejną ważną kwestią jest odpowiednie wyszczególnienie linków poprzez zastosowanie innej własności niż tylko kolor (np. podkreślenie).
Koniecznie definiuj dodatkowo kolor tła jeśli dajesz tło obrazkowe. Wczytanie grafiki może trochę trwać, nie wykluczone, że czytelnik pracuje w trybie tekstowym. Pomyśl o tym.
Najważniejsze nagłówki strony zamykaj w tagu <h1>, te niższego poziomu oznaczaj <h2>, itd., a akapity (paragrafy) to po prostu <p>.
Kiedy piszesz coś kursywą, rób to dla podkreślenia ważności (<em>) lub wyszczególnienia tytułu książki (<cite>).
Bardzo ważne fragmenty tekstu zamykaj w tagu <strong>.
Jeśli jakiś element występuje w osobnej linii, najprawdopodobniej jest nagłówkiem. Jeśli to nie jest nagłówek, a powtarzający się element mający zawsze być w osobnej linii, nadaj mu klasę i użyj CSS (deklaracja stylu display: block) zamiast systematycznie dodawać <br />.
Znacznik <br /> służy tylko i wyłącznie do łamania linii. Najczęściej stosowany jest do umieszczania wierszy (utworów lirycznych), gdzie każdy wers musi być złamany w odpowiednim miejscu (ewentualnie przy podawaniu adresów, innych pomysłów nie mam). Wielu osobom wydaje się, że można go używać do tworzenia odstępów, co jest wielkim błędem. Odstępy można tworzyć przez użycie wartości padding i margin w arkuszach stylów.
Podobnie sprawa wygląda w przypadku twardej spacji ( ). Nie wykorzystuj jej do robienia odstępów w poziomie (głównie wcięcia w akapitach). W tym celu wystarczy zastosować odpowiednie polecenia CSS.
Nie obejmuj znacznikiem <a> elementów blokowych (np. h1). Większość przeglądarek nie wskaże błędu, jednak takie zagnieżdżenie jest niepoprawne. Linki są elementami liniowymi, dlatego też należy umieszczać je wewnątrz elementów blokowych.
Nie krzycz bezpośrednio w kodzie, napisy HELLO, PAGE HOME itp. są niepraktyczne. Jeśli chcesz coś wyszczególnić w ten sposób zastosuj odpowiednie reguły CSS (text-transform: uppercase).
Zrezygnuj z atrybutu target. Uwierz mi, czytelnik nie jest głupi, doskonale wie jak chce otworzyć odnośnik (w nowym oknie, tym samym oknie czy nowej kracie). Daj mu wolny wybór a z pewnością z niego skorzysta.
Całą prezentację przenieś do CSS, począwszy od czcionek, poprzez kolory, obramowania, a skończywszy na układzie całości. Ułatwi to kompleksową modyfikację witryny i znacznie zmniejszy wielkość pobieranego kodu. Każdy znacznik stosowany wyłącznie do osiągnięcia układu graficznego psuje semantykę kodu.
Definicję stylów i skryptów umieszczaj w zewnętrznych plikach. Dzięki temu ten sam kod wykorzystasz w dowolnej liczbie podstron bez zbędnego powielania poleceń.
Jeżeli istnieje znacznik, którym możesz się w danej sytuacji posłużyć, to nie powinieneś tworzyć nowej klasy, która ma go naśladować.
Wybierz odpowiednią wersję języka i trzymaj się jej (Strict nie ~~Transitional~~). Pamiętaj, że sama znajomość składni danego języka, nawet tak prostego, jak (X)HTML, nie jest gwarancją jego poprawnego używania.
Zwracaj uwagę na poprawność syntaktyczną tworzonych dokumentów. Dyskusja na temat semantyki ma sens jedynie w odniesieniu do dokumentów poprawnych składniowo. Jeśli zatem myślisz o tworzeniu stron semantycznych, to najpierw zbadaj poprawność składniową kodu (X)HTML oraz CSS. Moje trzy ulubione metody to: wtyczka HTML Validator do Firefoksa, walidator W3C, wymuszenie typu application/xhtml+xml.
Dobry kod to taki, który zawiera minimum elementów, zachowując przy tym maksimum semantyki. Nie faszeruj strony zbędnymi tagami (zrezygnuj z divitis, spanitis, classitis oraz iditis).
JavaScript jest tylko dodatkiem. Strona ma być w pierwszej kolejności dostępna przy wyłączonej obsłudze JS. Wszelkie wstawki w postaci skryptów mają udogodnić przeglądanie strony a nie ją uniemożliwić.
Ucz się, pogłębiaj wiedzę. Niektóre polecane przeze mnie rozwiązania są prawidłowe w chwili, kiedy o nich piszę, jednak za rok czy dwa mogą być przestarzałe lub wręcz niepoprawne. Internet rozwija się nieustanie, podobnie ewoluują języki znacznikowe, należy być na bieżąco z najnowszymi trendami.

To chyba wszystko co miałem do napisania, aczkolwiek temat w żaden sposób nie został wyczerpany. Pamiętaj, że na semantycznym kodzie nic nie stracisz a dużo więcej możesz zyskać, ludziom ułatwisz życie a maszynom pracę.

Na zakończenie polecam miłą lekturę (753 KB) do poczytania. Jest to praca magisterska Kazimierza Pogody pt. "Zastosowanie semantyki w kontekście współczesnych sieci informacyjnych".

Pasek społecznościowy

WebRef - kursy webowe