Semantyczny kod

Semantyczny kod oznacza:

1. stosowanie znaczników adekwatnych do treści
2. logiczną organizację treści
3. rozdzielność warstwy prezentacyjnej od treści

Właściwe, adekwatne do treści znaczniki

Każdy ze znaczników HTML ma swoje określone przeznaczenie. Który znacznik do czego służy określają specyfikacje W3C.

Sztuka sementycznego pisania kodu polega na użyciu właściwych w danym przypadku znaczników.

Teoretycznie, pożądany efekt można uzyskać na różne sposoby. Najlepiej zobrazuje to przykład. Stworzymy dokument złożony z nagłówka, jednego akapitu tekstu i wypunktowanej listy.

Przykład kodu niesemantycznego

            <font font size="6"><b>Nagłowek stopnia 1</b></font><br />
            <br />
            Tekst<br /><br />
                1. element listy<br />
                2. element listy<br />
                3. element listy<br />
                4. element listy<br />
            

Powyższy, niesemantyczny kod został stworzony przez nadanie zwykłemu tekstowi wyglądu nagłówka i ukształtowanie reszty tekstu przez użycie znaczników przejścia do następnej linii. Tym samym treść składa się wyłącznie z tekstu, który nie zawiera informacji o logicznej funkcji elementów, czyli gdzie zaczyna się nagłówek, gdzie akapit, a gdzie lista.

W niesemantycznym kodzie zosała zapisana wyłącznie informacja o tym, jak tekst ma wyglądać na ekranie, a brakuje w nim informacji jaką logiczną funkcję pełnią poszczególne elementy.

Przykład kodu semantycznego

            <h1>Nagłowek stopnia 1</h1>
            <p>Tekst</p>
                <ol>
                    <li>element listy</li>
                    <li>element listy</li>
                    <li>element listy</li>
                    <li>element listy</li>
                </ol>
                
                

Ten semantyczny kod jasno pokazuje gdzie zaczyna i kończy się nagłówek (znacznik <h1>), gdzie zaczyna się i kończy akapit (znacznik <p>), gdzie zaczyna się i kończy lista numerowana (<ol>) i w którym miejscu są elementy składowe tej listy (znaczniki <li>). Oprócz treści, w dokumencie zaszyta jest ważna informacja o logicznej strukturze dokumentu.

Logiczna organizacja treści

Każdy znacznik ma swoje określone przeznaczenie. Sprawdź dokładnie, który znacznik do czego służy i w zależności od treści wybierz ten, który w danym przypadku jest właściwy.

Typowe elementy

Treść należy podzielić na logiczne elementy. W stronie można wyróżnić nagłówek (head), treść (body), poszczególne bloki (div), akapity (p), listy (ul, ol), cytaty (blockquoute, q), łącza (a) itp.

Informacja w sieci przebiega następująco:

impuls elektryczny → liczby → [kodowanie znaków] → znaki → słowa → zdania → akapity → sekcje (z nagłówkami) → rozdziały (podsekcje) → strona www

HTML dysponuje wystarczająco dużą ilością znaczników aby właściwie oddać taką strukturalną budowę. Jeśli zamiast właściwego danej strukturze użyjesz innego, do struktury logicznej dokumentu wkradnie się przekłamanie.

Najczęściej używane struktury to:

• Menu (nawigacja)

  Z logicznego punktu widzenia, menu jest listą linków. Menu zagnieżdzone (rozwijalne, w postaci drzewiastej) jest listą złożoną z list linków (zagnieżdżone listy linków).

• nagłówki rozdziałów (h1–h6)
• akapity (p)

Zapomniane tagi

Warto również pamiętać, że oprócz tych najczęściej używanych znaczników są też te mniej popularne, nie mniej ważne:

• abbr
• acronym
• dfn
• kbd
• address
• ins
• del
• code
• samp
• var

Więcej informacji:

• http://grabun.com/teksty/zapomniane-znaczniki/
• http://www.justsayhi.com/bb/html_quiz

Rozdzielność warstwy prezentacyjnej od treści

Na stronę składają się trzy połączone w całość rzeczy:

1. treść
2. struktura
3. wygląd

W jaki sposób są ze sobą powiązane, obrazuje poniższy przykład.

Treść + struktura + wygląd = strona www

Poniższy przykład pokazuję praktykę rozdzielania treści, struktury i wyglądu.

Sama treść

Treść jest esencją strony, tym co ma trafić o końcowego odbiorcy. Na przykład, gdy chcemy zaprezentować użytkownikowi listę produktów które mamy w ofercie, powiemy:

jabłka grusze jagody

Sama struktura

Ale skąd użytkownik ma wiedzieć, że wyliczamy produkty, że to nie jest jedno zdanie? Z pomocą przychodzi struktura, którą obrazują właściwe w tym przypadku znaczniki:

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

struktura z treścią

Po wypełnieniu połączeniu struktury i treści otrzymujemy semantyczny kod HTML:

<ul>
    <li>jabłka</li>
    <li>grusze</li>
    <li>jagody</li>
</ul>

Struktura, treść i wygląd

Do znaczników za pomocą atrybutu style i wyłaściwości CSS dodaje się informacje o wyglądzie, położeniu i zachowaniu elementu. Na przykład:

<ul style="list-style: none;">
    <li style="width: 10em; background: red; display: inline;";>jabłka</li>
    <li style="width: 10em; background: green; display: inline;">grusze</li>
    <li style="width: 10em; background: violet; display: inline;">jagody</li>
</ul>
        

W rezultacie otrzymamy coś takiego:

• jabłka
• grusze
• jagody

Jak widać, informacji o wyglądzie jest sporo. Do tego znacznie utrudniają czytanie, a wartości poszczególnych reguł się powtarzają. Ten problem rozwiązuje się poprzez przeniesienie wszystkich informacji o wyglądzie do zewnętrznego arkusza z regułami CSS.

Zawartość pliku z regułami CSS będzie wyglądała następująco:

ul {
    list-style: none;
    color: white;
}

li {
    width: 10em;
    display: inline;
    padding: 1em;
    background: red;
}

Kod HTML pozostaje bez zmian. A wygląd elementów możemy teraz zmieniać modyfikując reguły CSS, bez ingerencji w treść i strukturę.

Zasada separacji treści i wyglądu

Strukturę (logiczny szkielet) dokumentu tworzą właściwe znaczniki HTML. To, który znacznik jest właściwy w danym miejscu zależy od treści, którą zawiera. Jak widać, trudno rozdzielić strukturę od treści. Struktura bez treści jest pusta i nic nie znaczy, tak samo jak treść bez struktury.

Struktura jest potrzebna aby nadać wygląd. Odpowiednią prezencję przypisuje się do znaczników HTML, a nie do treści. Zależność wyglądu od struktury jest oczywista. Nie ma odpowiedniej struktury – nie może mieć wyglądu. Jest struktura – można łatwo zmienić jej wygląd.

Jedną z najważniejszych reguł przyświecających tworzeniu wysokiej jakości stron jest zasada separacji, czyli rozdzielania treści od wyglądu. Chodzi o to, aby przygotować stronę tak, aby jej wygląd można było w każdej chwili zmienić nie ingerując w treść, a jeszcze lepiej, nie ingerując ani w treść, ani w szczegóły struktury.

Dzięki rozdzielności treści od wyglądu internauta może narzucić swój własny styl wyświetlania treści strony (tzw. user stylesheet). Ta sama treść może zostać inaczej zaprezentowana użytkownikowi z wadą wzroku lub korzystającego z nietypowego urządzenia do jej wyświetlenia.

Rozdzielność treści i wyglądu pozwala urządzeniom przetwarzającym stronę (np. roboty wyszukiwarek lub syntezatory mowy) skupić się na najważniejszej rzeczy, czyli treści strony.

Znaczniki <em>, <strong>, <b>, <i>, <u>

Stare znaczniki, które odpowiedzialne są za wygląd (<b>, <i>, <u> w większości przypadków należy zastąpić ich właściwszymi odpowiednikami (<em>, <strong>) oraz określeniem wyglądu za pomocą CSS.

Nazewnictwo CSS

Nazwy klas i identyfikatorów używane w CSS także powinny mieć charakter semantyczny. Nie mogą mieć nazw powiązanych z wyglądem.

Na przykład, zamiast:

powinieneś zastosować: