Semantyka, czyli jak poprawnie stosować znaczniki HTML

W Internecie aż roi się od poradników HTML, specyfikacji i mniej lub bardziej udanych tutoriali. Dlatego uznaliśmy, że interesujące będzie zaprezentowanie wpisu z Google Webmaster Central Blog na temat semantyki znaczników HTML. Google wielokrotnie deklarowało, że walidacja (zgodność ze standardami W3C) nie ma bezpośredniego wpływu na ocenę strony w rankingu wyników wyszukiwania, a algorytmy radzą sobie z indeksowaniem nie do końca prawidłowej struktury dokumentów HTML. Jednak stosowanie znaczników HTML zgodnie z ich przeznaczeniem to trochę inna bajka, ponieważ pozwala wyszukiwarkom na zrozumienie znaczenia poszczególnych elementów na stronie.

Semantyka HTML

W kontekście tworzenia stron internetowych, semantyka odnosi się do wykorzystania znaczników semantycznych zgodnie z ich przeznaczeniem. Wykorzystanie znaczników zgodnie z przeznaczeniem oznacza używanie znaczników nagłówków (h1–h6) do oznaczania nagłówków, znaczników paragrafu (p) do paragrafów, znaczników list (ul, ol, dl, datalist i menu) do list, znaczników tabel do tabel, i tak dalej. Poprawna semantyka jest jedną ze złotych zasad SEO.

Dawniej Internet składał się z tylko z nielicznych stron internetowych i autorów budujących je w całości na tabelach, szukających twórczych sposobów, aby urzeczywistnić zaprojektowany layout. Co prawda mieli oni do dyspozycji mniej możliwości niż webmasterzy mają obecnie. Były czasy, kiedy stworzenie 3-kolumnowego układu strony było praktycznie niemożliwe bez wykorzystania tabel czy obrazków.

Do dziś autorzy stron nie zawsze są pewni jaki znacznik HTML zastosować do danego elementu strony HTML. Dodatkowo powstające specyfikacje, jak HTML 5, wymagają obserwowania, jakie elementy i do czego mają być stosowane w przyszłości.

Aby dowiedzieć się jakie elementy oferuje HTML i jakie posiadają one znaczenie, najlepiej sięgnąć bezpośrednio do specyfikacji języka HTML. Są dostępne zestawienia obejmujące wszystkie specyfikacje i elementy HTML, które ułatwiają wyszukanie i sprawdzenie znaczenia elementu. Czasem konieczne będzie sprawdzenie co mówi pełna specyfikacja HTML.

Znaczenie nadawane przez autora

Elementy HTML niosą ze sobą znaczenie zdefiniowane w specyfikacji HTML, ale nazwy identyfikatorów (id) i klas (class) mogą również coś oznaczać. Nazwy identyfikatorów i klas, podobnie jak mikrodane, są zwykle pod kontrolą autora. Jedynym wyjątkiem jest stosowanie mikroformatów, w których ściśle określone nazwy klas są wykorzystywane do oznaczania elementów.

Nazwy klas i identyfikatorów dają twórcom stron dużo swobody w pracy z elementami HTML. Istnieje kilka niepisanych zasad, których przestrzeganie daje pewność, że ta dowolność nie stanie się źródłem problemów:

• ogranicz stosowanie identyfikatorów i klas do minimum
• używaj funkcjonalnych nazw klas i identyfikatorów, a jeśli to niemożliwe, stosuj nazwy ogólne
  
/* Niezalecane: pozbawione znaczenia */
#abc-1234 {}


/* Niezalecane: prezentacyjne */
.button-green {}
.clear {}


/* Zalecane: funkcjonalne */
#gallery {}
#login {}
.video {}


/* Zalecane: ogólne */
.alt {}

• wykorzystuj nazwy, które są tak krótkie, jak to możliwe, ale wystarczająco długie – celem jest zachowanie czytelności kodu a zarazem jego wydajności
  
/* Niezalecane */
#navigation {}


/* Zalecane */
#nav {}
.author {}


Powyższe zalecenia są fragmentem Google HTML/CSS Style Guide.

Zalety stosowania semantycznych znaczników

Wykorzystywanie znaczników zgodnie z ich przeznaczeniem, a także umiarkowane stosowanie funkcjonalnych nazw identyfikatorów i klas, ma kilka zalet. Taki kod HTML jest:

• profesjonalny
• bardziej dostępny
• łatwiejszy w utrzymaniu.

Szczególne przypadki

Szczególnymi przypadkami są elementy „neutralne”, elementy dwuznaczne oraz elementy prezentacyjne.

<div> i <span>

Znaczniki div i span oferują ogólny mechanizm nadawania struktury dokumentom HTML. Mogą być stosowane, gdy nie ma innego elementu, który byłby poprawnie dopasowany do zawartości.

<b>, <i>, <strong>, <em>

W przeszłości sporo zamieszania było wywołane wokół znaczników b, strong, i i em. Twórcy stron wyklęli elementy b i i jako prezentacyjne, zazwyczaj sugerując ich zastąpienie 1:1 elementami strong i em. Nie wracając do przeszłości, HTML 5 daje wszystkim czterem elementom rację bytu.

⇒ <em>

Według specyfikacji HTML 5 zaakcentowany tekst powinien być oznaczany znacznikiem em (nie ma na celu przekazywania dodatkowej wagi).

⇒ <strong>

Ważny tekst powinien być oznaczany znacznikiem strong.

⇒ <i>

Znacznik i powinien być stosowany do oznaczania tekstu o innym charakterze – terminu technicznego, idiomu w innym języku, myśli, itp. – o ile znaczniki takie jak em lub dfn nie są bardziej stosowne.

⇒ <b>

Znacznik b powinien być stosowany w ostateczności, gdy żaden inny znacznik nie jest bardziej odpowiedni. W znaczniku b powinien znaleźć się fragment tekstu, do którego uwaga przyciągana jest ze względów praktycznych bez przekazywania dodatkowej wagi, np. wiodące zdanie lub paragraf tekstu.

Elementy odchodzące w zapomnienie

Występują również elementy typowo prezentacyjne, które będą nadal wykorzystywane przez przeglądarki internetowe, ale nie powinny być już używane przez autorów stron, ponieważ warstwę prezentacji obsługują arkusze styli. Należą do nich:

• center
• font
• s
• u

Jak sprawdzić, czy jesteś na dobrej drodze

Semantykę i sposób rozumienia strony przez czytnik ekranu można z grubsza sprawdzić wyłączając w przeglądarce obsługę CSS (np. za pomocą wtyczki Web Developer Toolbar).

Dobre i złe praktyki

<p class="heading">Lorem</p>

<h1>Lorem</h1>

<p><font size="2">ipsum</font></p>

<p>ipsum</p>

p {font-size: 1em}

<table>
  <tr>
    <td class="heading">dolor</td>
  </tr>
  <tr>
    <td>sit</td>
  </tr>
</table>

<h1>dolor</h1>
<p>sit</p>

<div class="row">amet</div>
<div>1</div>
<div class="row">elit</div>
<div>2</div>

<table>
  <tr>
    <th>amet</th>
    <td>1</td>
  </tr>
  <tr>
    <th>elit</th>
    <td>2</td>
  </tr>
</table>

at ante.<br><br>in vel.

<p>at ante.</p>
<p>in vel.</p>