Standardy Sieciowe - semantyka kodu HTML

Semantyka Kodu HTML

Tym razem nietypowo, zaczniemy od konkretnego przykładu. Wyobraźmy sobie sytuacje, w której chcemy wyróżnić jakiś fragment tekstu jako cytat, stosując kursywę. Osoba, dla której semantyka kodu nic nie znaczy, być może pomyśli sobie: "Hmm... chcę zastosować, kursywę, zaraz pomyślę jak to zrobić... Wiem! Przecież tekst objęty znacznikiem em jest wyświetlany na ekranie jako kursywa! Napiszę więc tak:

<p><em>Lorem ipsum dolor sit amet,
consectetur adipisicing elit...</em></p>

Udało mi się, wszystko działa!". Efekt takiego postępowania widać poniżej:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Jak widać, udało nam się uzyskać porządany efekt, jednak gdy przyjrzymy się temu bliżej, już nie jest tak kolorowo... Użyliśmy w tym przykładzie znacznika em, dzięki któremu cytat jest widoczny jako kursywa, jednak nie służy on do formatowania tekstu! Jest to tak zwana emfaza, czyli podkreślenie ważności słowa lub frazy, dlatego nie możemy jej używać do formatowania tekstu. Przykłąd użycia emfazy jest powyżej - "nie możemy" jest właśnie objęte znacznikami em. Być może dalej nasza wyimaginowana postać pomyśli sobie: "Święta racja.. Przejrzałem na oczy - powiniennem zastosować CSS, aby odpowiednio sformatować akapit. Nie będzie to trudne:

<p style="font-style:italic">Lorem ipsum dolor sit amet,
consectetur adipisicing elit...</p>

No, teraz już chyba wiem, co to jest semantyka". A oto efekt:

Właściwie nie mógłbym się przyczepić do tego zapisu, gdyby nie to, że w HTML'u istnieje specjalny znacznik, którym wprowadzamy blok tekstu, będący cytatem. Jest to znacznik blockquote. Dlatego moja wersja rozwiązania problemu będzie wyglądać tak:

<blockquote style="font-style:italic; margin:5px">
<p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit...</p></blockquote>

Wynik jest następujący:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Oczywiście możemy modyfikować wygląd cytatu, ustalając reguły w pliku CSS dla elementu blockquote (możemy np. dodać obramowanie, usunąć kursywę, zminić kolor itd).

I to jest właśnie semantyka! Powinniśmy stosować znaczniki zgodnie z ich przeznaczeniem, a nie tylko dlatego, chcemy wykorzystać jakieś ich szczególne właściwiści (takie jak kursywa w przypadku em), które z resztą i tak można w większości przypadków modyfikować za pomocą arkuszy stylów. Dla przeciętnego odbiorcy nie ma to większego znaczenia, jednak np. dla osoby niewidomej ma, i to duże - syntezator może wypowiedzieć głośniej frazę objętą znacznikiem em, co nie będzie miało nic wspólnego z cytatem. Ponadto wyświetlanie tektu w emfazie kursywą jest tylko umowne, a w przyszłości może się to zmienić. Idąc dalej, można powiedzieć, że jeśli obecność jakiegoś znacznika w kodzie wydaje się być z semantycznego punktu widzenia potrzebna - umieśmy go tam. Jednak jeśli nie jesteśmy pewni, czy zastosowaliśmy znacznik zgodnie z jego przeznaczeniem, lepiej zastosujmy CSS.

Jeśli nie jest to zrozumiałe lub nie wyjaśniłem wszystkiego co jest Wam potrzebne, piszcie śmiało - na pewno uwzględnię Wasze opinie :)