Login lub e-mail Hasło   

Semantyka a tworzenie stron WWW

Odnośnik do oryginalnej publikacji: http://reod.ovh.org/home/index.php/artyk(...)ml-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łow...
Wyświetlenia: 5.063 Zamieszczono 22/06/2006
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="strona.php">link</a><br>
<a href="strona.php">link</a><br>
<a href="strona.php">link</a><br>
<a href="strona.php">link</a><br>
<a href="strona.php">link</a><br>
<a href="strona.php">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.html">link</a></li>
<li><a href="link.html">link</a></li>
<li><a href="link.html">link</a></li>
<li><a href="link.html">link</a></li>
<li><a href="link.html">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

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


O Autorze

reod - webmastero-programista-hobbysta z okolic Śląska. Nie posiada Windowsa, nie gra w gry i nie ma konta na epulsie, a zamiast chodzi na dyskoteki siedzi przed komputerem - idiota. Możesz mu co przekazać pisząc do niego - nie obiecuje, że odpowie.


Podobne artykuły


8
komentarze: 28 | wyświetlenia: 526
16
komentarze: 5 | wyświetlenia: 8988
9
komentarze: 0 | wyświetlenia: 2766
17
komentarze: 4 | wyświetlenia: 13956
49
komentarze: 18 | wyświetlenia: 64914
37
komentarze: 9 | wyświetlenia: 28467
15
komentarze: 5 | wyświetlenia: 32713
13
komentarze: 2 | wyświetlenia: 22941
12
komentarze: 3 | wyświetlenia: 29740
12
komentarze: 2 | wyświetlenia: 18491
11
komentarze: 2 | wyświetlenia: 33118
11
komentarze: 1 | wyświetlenia: 86339
11
komentarze: 1 | wyświetlenia: 10429
10
komentarze: 1 | wyświetlenia: 34950
 
Autor
Dodał do zasobów: derek
Artykuł

Powiązane tematy





Temat semantycznośći kodu strony jest bardzo rozległy i bardzo krzywdzące jest ograniczanie go do sposobu wyświetlania linków. Przecież są takie rzeczy jak uniezależnianie treści od wyglądu (o której to tutaj nie ani słowa), czy chociażby stosowanie <P> zamiast <br> - zupełnie nie wyczytałem niczego nowego, a szkoda, bo art zapowiadał się ciekawie :)

Podzielam Twoją opinię komrath, autor mógł się trochę bardziej wysilić.

Polecam tą dyskuję zainteresowanym szerzej tematem: http://php.nq.pl/Wracajmy-do-t(...)50.html

pozdrawiam

  oldml,  01/02/2008

Faktycznie, ten tekst to zajawka ważnego problemu.
Nie do końca prawdą jest też stwierdzenie, że "Korzyści z semantycznego kodu html
Dla odbiorcy stron, są prawie żadne(?!)."
Im bardziej kod będzie poprawny semantycznie, tym mniej czasu odbiorca straci na jego odczytanie.



Dodaj swoją opinię
W trosce o jakość komentarzy wymagamy od użytkowników, aby zalogowali się przed dodaniem komentarza. Jeżeli nie posiadasz jeszcze swojego konta, zarejestruj się. To tylko chwila, a uzyskasz dostęp do dodatkowych możliwości!
 

© 2005-2018 grupa EIOBA. Wrocław, Polska