Semantyczny HTML

Nie istnieje oficjalna specyfikacja nazwana „Semantyczny HTML”, jednak poniżej zawarte wskazówki związane są właśnie z tworzeniem poprawnego, semantycznego kodu HTML. Semantyczny HTML jest swego rodzaju celem i praktyką tworzenia dokumentów za pomocą kodu zawierającego tylko znaczenie, które autor chciał nadać poszczególnym częściom tekstu, bez informacji na temat prezentacji. Klasycznym przykładem jest różnica pomiędzy elementem <em> i elementem <i>. Zwykle element wzmacniający znaczenie jest renderowany w postaci pochylonej czcionki, dlatego wizualnie jeden i drugi wyglądają tak samo. Jednak wzmocnienie znaczenia tekstu różni się od wyświetlenia np. tytułu książki, który także może zostać wyświetlony za pomocą czcionki pochyłej. W czystym semantycznym kodzie HTML, tytuł książki używałby innego znacznika niż <em> (np. <span>), ponieważ znaczeniowo są to dwie różne rzeczy.

Tworzenie semantycznego kodu wymaga od autorów:

unikania znaczników prezentacyjnych
używanie dostępnych znaczników do wyodrębnienia znaczeń poszczególnych fraz i struktury w dokumencie. Np. tytuł książki będzie potrzebował własnego znacznika i klasy: <cite class="booktitle">Lamy świata</cite>. Tutaj został użyty znacznik <cite> dlatego, że najbardziej pasuje do znaczenia tej frazy w tekście. Element <cite> nie jest jednak na tyle precyzyjny, aby dokładnie określić rodzaj przytaczanego tytułu. Tutaj został użyty w celu przytoczenia tytułu książki, a nie np. tytułu artykułu w gazecie lub czasopiśmie. Pomimo tego, znaczenie na pewnym ogólnym poziomie zostało uchwycone i zapisane.

Semantyczny HTML wymaga także kompletnej specyfikacji oraz oprogramowania przestrzegającego zasady w niej zawarte. Głównie rozwój i wzrost popularności kaskadowych arkuszy stylów CSS zachęcił autorów stron do używania semantycznego HTML-a. CSS pozwala całkowicie oddzielić warstwę semantyczną od warstwy prezentacji poprzez trzymanie kodu odpowiedzialnego za wygląd w osobnym pliku CSS. Semantyczny HTML posiada wiele zalet:

Zapewnia zgodność stylów elementów posiadających to samo znaczenie. Każdy nagłówek, cytat, czy inne podobne do siebie elementy otrzymają ten sam wizualny styl.
Uwalnia autorów od potrzeby myślenia na temat sposobu prezentacji dokumentu. Gdy autor zapisuje liczbę dwa, nie musi się martwić, czy ma ją zapisać w postaci słowa ("dwa"), czy w postaci numerycznej (2). Semantyczny znacznik może wyglądać następująco <number>2</number>, pozostawiając szczegóły jego prezentacji autorowi arkusza stylów.
Sprawia, że dokument staje się niezależny i może być formatowany na wiele sposobów. Semantyczny dokument może być parowany z nielimitowaną liczbą arkuszy stylów, dostosowujących wygląd do ekranu komputera, wysokorozdzielczych drukarek, urządzeń mobilnych, przeglądarek wykorzystujących syntezatory mowy lub urządzeń dostosowanych dla osób posługujących się alfabetem Braille’a itd. Aby tego dokonać, nie są potrzebne żadne zmiany w semantycznym kodzie HTML.

Niektóre aspekty oddzielenia warstwy znaczeniowej od warstwy prezentacji są trudne i problematyczne. Niektóre elementy są hybrydami, które swoim znaczeniem warunkują sposób prezentacji, np. tabela wyświetla dane w formie tabelarycznej. Zaprezentowanie tabeli przez syntezator mowy wymaga zamiany typowo wizualnego tworu na formę dźwiękową. Z drugiej strony piosenki – twory prezentowane za pomocą dźwięków – bardzo często prezentowane są w formie tekstowej. Dla tego typu elementów rozdzielenie znaczenia od formy prezentacji nie jest łatwe, jednak nie są one często spotykane.