Semantyka a tworzenie stron WWW

Przyjmijmy, że wiesz co to html, słyszałeś nawet o xhtml i gdzieś szukasz w głowie informacji o css.
Nie będzie długo, chciałbym abyś się nie zmęczył a zrozumiał. Znaczenie słowa semantyka, omówię w kontekście języków hipertekstowych.

Co to jest semantyka?

Semantyka - używanie danego znacznika zgodnie z jego zastosowaniem.

Niby proste, ale czemu takie trudne? Bo nikomu się nie chce. Spójrzmy na notoryczny błąd, który występuje na 80% stronach jakie przeglądam.
Robimy menu strony:

<a href=''>link</a><br>
<a href=''>link</a><br>
<a href=''>link</a><br>
<a href=''>link</a><br>
<a href=''>link</a><br>
<a href=''>link</a><br>

Taki zapis jest niepoprawny, bo linki na naszej stronie są czym? Są listą nieuporządkowaną, więc należy objąć je w specjalny znacznik takiej listy ul

Przykład, miejmy nadzieję, rozjaśnił ci trochę o co chodzi.

Po co mi semantyczny kod html

Zejdźmy na płaszczyznę życia codziennego. Weź w dłoń siekierkę i pokrój nią chleb - da się? No jasne, że się da! Ale teraz się zastanów, po co używać siekierki skoro jest nóż? W odniesieniu do naszego przykładu, po co używać znacznika nowej lini, skoro jest znacznik listy nieuporządkowanej?

W3c opracowało wiele znaczników html, które są nieużywane wśród webmasterów. Dlaczego? Z lenistwa. Być może jesteś jedną z ofiar starej szkoły - budujesz stronę na tabelkach. Jeszcze nie wiesz, że to ogromny błąd, błąd semantyczny.

Idąc naszą definicją semantyki, znacznik <table> ma swoje określone zastosowanie - przedstawianie danych tabelarycznych. A czy nasza strona to zbiór danych tabelarycznych… NIE!

Do budowania szkieletów strony, służy znacznik <div> i tylko div.
Jest to element blokowy, który nie ma z góry narzuconej struktury. Można go dowolnie formatować CSS’em. Pakowanie strony w tabelki, jest błędem. Ale zaraz, zaraz… przecież większosć stron jest pisana na tabelkach, ba! Nawet kursy html są pisane na tabelkach. Chwalisz kurs logeena, a tam ramki, tabelki etc… Rozumiem o co ci chodzi, jednak kiedyś były inne czasy:

Kurs HTML powstawał w czasach, kiedy świadomość poprawności kodu, dostępności itp. była wśród społeczności internetowej raczej marna. Mało kto w ogóle widział problem. Poza tym nie ukrywam, że w tym czasie sam uczyłęm się HTMLa i CSS, więc o pewnych sprawach po prostu nie wiedziałem. Szacuję, że obecnie przerobienie Kursu na zgodny z XHTML i przechodzący walidację, zajmie nawet ok. roku.

Poza tym, kurs jest dostępny w wersji offline, a utrzymanie takiej ilości informacji bez ramek, jest sporym wyczynem. (Nie można zastosować np funkcji include().)

Semantyka znaczników html, a walidacja kodu

Walidator w3c nie wykryje twoich błędów semantycznych, nawet nie zwróci na nie uwagi. Przejście przez walidacje strony na tabelkach jest dość częstym procederem. Nie będę mówił zbyt ostro, co sądzę o takich „webmasterach”, bo sądzę nie najlepiej (zapewne nie tylko jak). Taka walidacja, jest zaspokojeniem własnego ego, nielogicznym występkiem w psełdo-służbie użytkownikowi.
Wszystko da się zrobić inaczej. Pewnie wiesz, jak ciekawy efekt daje znacznik <fieldset> i <legend>, jednak nie wiesz jednej ważnej rzeczy - one służą tylko i wyłącznie do grupowania elementów formularzy. Zapis:

<fieldset>
<legend>Menu strony </legend>
<ul>
<li><a href=''>link</a></li>
<li><a href=''>link</a></li>
<li><a href=''>link</a></li>
<li><a href=''>link</a></li>
<li><a href=''>link</a></li>
</ul>
</fieldset>

mimo użycia listy nieuporządkowanej, jest błędny semantycznie. Błędny, bo znacznik <fieldset> został użyty wbrew z jego zastosowaniem.

Korzyści z semantycznego kodu html

Dla odbiorcy stron, są prawie żadne(?!). Można wspomnieć, że tabelkowe zupki znaczników, pochłaniają swoim ogromem kodów masę transferu www (a co za nim idzie - pieniędzy). Tabelki uniemożliwiają nawigację osobą niepełnosprawnym, źle wyświetlają się niekiedy na urządzeniach innych niż komputery, utrudniają szybką modyfikację serwisu. Ale to przecież nieważne… Tak na prawdę, twój klient zapewne nie zrozumie, jak ważny jest semantyczny kod i jakie niesie możliwości.

Jeśli jesteś hobbystą, to zastanów się, czy tworzenie stron cię kręci. Jeśli tak, to może pora na porządek na twoich stronach i zdobycie uznania w środowiskach webmasterskich? Pewnie chciałbyś pochwalić się dobrą stroną, nie tylko „wizualnym laikom” (jakimi są np twoi koledzy i koleżanki, ponieważ zwracają uwagę wyłącznie na prezentację strony, a nie na kod) ale i specjalistą w dziedzinie webmasterstwa. Na prawdę warto!

Lektury do poduszki

• Zapomniane znaczniki
• Dlaczego układ na tabelkach jest głupi?
• Z serii dla twardzieli - dyskusja #1
• Z serii dla twardzieli - dyskusja #2
• Semantyka znaczników HTML
• Dlaczego ramki są złe?

To tyle, Pamietaj: Na semantycznym kodzie nic nie stacisz :]

„Oprócz tabel istnieje jeszcze jedna dalece ograniczająca struktura, składająca się z rzędów i komórek - więzienie. Dla projektantów nadszedł czas, aby sie uwolnić…” - Eric A. Meyer

 

Źródło: reod

Licencja: Creative Commons - bez utworów zależnych