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.

W3C standaryzuje semantykę Sieci

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:

  1. 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.

  2. 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 sprawaZnaczniki 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:

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ć:

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

SPIS TREŚCI AKTUALNEJ STRONY

Podstawy (H1) Semantyka (H2) Definicja ogólna (H3) Semantyka kodu (X)HTML (H3) Pozostałości z przeszłości (H3) Semantyka dla ludzi czy semantyka dla maszyn? (H3) Semantyka a praktyka, czyli precz z po<b>a<br>anym kodem (H3)