Semantyczny kod (semantic markup). Co to takiego?

Szukając ostatnio materiałów dla swojego kolegi na temat tego pojęcia, zauważyłem że polski internet ma w tym sporę braki, nawet wikipedia na ten temat milczy. Ba! Jeden z moich poprzednich postów, który dotyczył czegoś trochę innego pokazał się w TOP 3 wynikach google. Zatem postanowiłem wypełnić lukę dla tych wszystkich którzy szukają wyjaśnienia tego “czegoś”.

Pojęcie semantycznego kodu wiąże się z technologią xHTML (co za tym idzie też HTML), czyli z chlebem powszednim wszystkich webmasterów.

Zostało ono “wypromowane” wraz z erą standardów sieciowych i boomu na bez tabelkowe layouty, czyli w momencie wejścia xHTMLa w powszechny obieg, całkiem nie dawno (jakieś 2 lata wstecz).

Dla lepszego wyjaśnienia pozwolę sobie w tej chwili znaleźć fragment kodu strony z przed tej rewolucji, sekundka…

W między czasie zapraszam na reklamy ;-)

O proszę, rachu ciachu i mamy, oto jeden przykładowy (i skrócony) news z jednego z wielu portali o grach:

WoW Patch 2.0.10

Autor: Nazin
Opublikowano: sobota, 24 lutego 2007

Na oficjalnej stronie World of Warcraft pojawiły się informacje o kolejnym patchu: 2.0.10. Nowości jakie on wprowadza to między innymi: kilka ogólnych poprawek związanych z zadaniami oraz przedmiotami,[...]

 

Komentarz?

Kolejne szkice

Autor: Strażnik
Opublikowano: sobota, 24 lutego 2007

Tak kiedyś kodowaliśmy, w tym wypadku i tak mamy do czynienia z xHTMLem, a nie starym HTMLem, ale po kolei. Co można zauważyć w tym kodzie?

  • Ogromny stosunek kodu do samej treści.
  • Znaczniki nic nie mówią nam o treści (prawie nic ;-).
  • Są dość nie czytelne.
  • Większość znaczników to div i br.
  • “Opasły kod”.
  • Wiele zbędnych klas CSS.

Gdybyśmy chcieli przedstawić ten kod w semantyczny sposób wyglądało by to mniej więcej tak:

WoW Patch 2.0.10

Autor: Nazin
Opublikowano: sobota, 24 lutego 2007

Na oficjalnej stronie World of Warcraft pojawiły się informacje o kolejnym patchu: 2.0.10. Nowości jakie on wprowadza to między innymi: kilka ogólnych poprawek związanych z zadaniami oraz przedmiotami,[...]

Kolejne szkice
Autor: Strażnik
Opublikowano: sobota, 24 lutego 2007

Jest to przykładowa propozycja, ale można zauważyć wiele rzeczy:

  • O wiele mniej kodu, przy 10 newsach, strona staje się znacząco lżejsza.
  • Poszczególne znaczniki mówią nam czym jest treść w ich “środku”, i tak:
    • h1 – nagłówek newsa,
    • em – coś wyróżnionego, adnotacja,
    • p – paragraf,
    • atrybut title w linku mówi co zobaczymy po wejściu w dany link,
  • Kod staje się o wiele czytelniejszy, nie tylko dla nas, ale co ważniejsze, dla robotów wyszukiwarek!
  • Takim kodem o wiele łatwiej zarządzać z poziomu CSS.

Definicja?
Pozwolę sobie sformułować dość kolokwialną definicje “semantyczności kodu”:


“Semantyczność kodu to podejście do kodowania dokumentów xHTML/HTML. Nakazuje ona używania dostępnych znaczników (tagów) danego języka zgodnie z ich przeznaczeniem.”

Tak! Na tym polega semantyczność. Po prostu używamy tagów zgodnie z ich przeznaczeniem, a nie z tym co chcemy zobaczyć na ekranie.

Inny przykład. Wyobraźcie sobie że chcecie zrobić menu poziome na stronie (np. pod nagłówkiem), cześć z Was teraz lub nie dawno zrobiła by to za pomocą tabelki o tak:

Lorem Lorem Lorem Lorem


I tu jest problem, tabela służy do przedstawiania danych tabelarycznych (np. z exela), a nie do prezentowania menu.

Doskonałym semantycznym zamiennikiem jest lista nie uporządkowana (ul).

Część z Was może krzyknąć “ej! ale to menu będzie pionowe, a nie poziome!“. Pewnie, na początku, ale nic nie stoi na przeszkodzie aby je odpowiednio wystylować w CSSie. A dzięki temu, zmniejszyliśmy objętość kodu i uczyniliśmy do bardziej przyjaznym dla wyszukiwarek i urządzeń czytających kod (np. dla ślepych) czy nawet komórek. Pamiętajmy, żadne urządzenie nie domyśli się że w tabelce trzymacie menu, o wiele prędzej zrobi to z listą.

Nie przekonałem? Inny, prostszy przykład.

Nagłówek

z punkty widzenia semantyki to dokładnie to samo co:

Nagłówek

Wracając do znaczników…
Przez ostatnie parę lat utarło się że język HTML ma tylko parę znaczników które wszyscy stylują za pomocą CSSa. Nic bardziej błędnego. HTML ma wiele znaczników na różne okazje, z ciekawszych mogę wymienić:

code, abbr, cite, dfn, samp, dl, dd, dt

Jest ich dużo więcej, wystarczy przejrzeć dokumentację. Należy się spodziewać wzrostu ich liczby z kolejnymi wersjami HTMLa i xHTMLa 2 (tak, oba standardy mają doczekać się następnych wersji całkiem nie długo).

Do tego dochodzą takie nowinki jak mikroformaty (microformats).

Ok, nie rozpisuję się już więcej. Mam nadzieje że udało mi się wyjaśnić pojęcie “semantyczności kodu” tym którzy go jeszcze nie znają, a starych wyjadaczy proszę o łaskawość jeżeli zgrzeszyłem gdzieś w tej publikacji ;-)

Na koniec chciałbym dodać, że nie starałem się wyjaśniać pojęcia “standardów sieciowych” i walidacji kodu xHTML, starałem się skupić jedynie na pojęciu semantyczności.”

About this entry

You’re currently reading “Semantyczny kod (semantic markup). Co to takiego?,” an entry on BartoszRychlicki.com

Published:
03.02.07 / 7pm
Category:
web design