HTML – Znaczniki semantyczne – Co to i po co mi to ?

Damian Grabowski

Znaczniki semantyczne – określają charakter (znaczenie) tekstu, który obejmują. Zwykle niosą ze sobą również odpowiednie formatowanie, ale nie jest to wymagane. Są to np.:

  • Hn (tytuł),
  •  STRONG (mocne wyróżnienie),
  •  EM (emfaza),
  •  CODE (kod komputerowy),
  •  KBD (klawiatura),
  • SAMP (przykład),
  •  VAR (zmienna),
  •  Q (cytat),
  •  CITE (odniesienie do źródła),
  • BLOCKQUOTE (blok cytowany),
  •  ADDRESS (adres),
  • INS i DEL (zmiany),
  •  ABBR (skrót),
  •  ACRONYM (akronim),
  •  DFN(definicja).

 

Nie ma żadnej pewności, w jaki sposób zostaną wyświetlone na ekranie te elementy. Co prawda zwykle np. znacznik <strong>…</strong> jest pogrubiony, ale nic nie stoi na przeszkodzie, aby jakaś specjalna przeglądarka wyświetliła go normalnie, a jedynie ze zmienionym na czerwono kolorem.

W przypadku znaczników semantycznych to nie sposób formatowania jest najważniejszy, ale informacje jakie ze sobą niosą. Element <strong>...</strong> wskazuje, że objęty nimi tekst jest bardzo ważny. <code>...</code> daje do zrozumienia, że jest to fragment kodu komputerowego – np. jakiegoś programu. <acronym>...</acronym> i <abbr>...</abbr> to wspólnie z <q>...</q> i <cite>...</cite> jedne z najbardziej „niedocenianych” znaczników. Tymczasem niosą ze sobą niezwykle ważne informacje.

Komu to jest potrzebne?

Z informacji niesionej przez znaczniki semantyczne korzystają zwykłe przeglądarki internetowe, wyróżniając je w specjalny, właściwy sobie sposób.

Znaczniki semantyczne mają ogromne znaczenie dla syntezatorów mowy, czyli specjalnych przeglądarek, które odczytują treść stron WWW na głos. Używane są najczęściej przez osoby niewidome. Taka osoba nie zobaczy koloru czcionki i nie będzie wiedzieć, że gdzieś tekst został wytłuszczony w tradycyjny sposób. Natomiast używany syntezator mowy, kiedy natrafi na znacznik <strong>...</strong>, może specjalnie podkreślić tonem głosu zawarty w nim tekst. Wprost nieocenioną pomocą dla syntezatorów mowy są znaczniki akronimów i skrótów. Aplikacje takie mają zwykle wbudowaną bazę najpopularniejszych skrótów i akronimów, a więc kiedy na nie natrafią, mogą odczytać ich pełną nazwę, a nie literować.

Dla robotów wyszukiwarek sieciowych nie jest obojętne, czy do oznaczania tytułów rozdziałów użyjesz znaczników <h1>...</h1> - <h6>...</h6>, czy może <font size="7">...</font> - <font size="1">...</font>. Nikt rozsądny nie wpisuje w znacznikach tytułu tekstu, który nie ma nic wspólnego z zawartością rozdziału, co może mieć miejsce dla elementu FONT. Tak na marginesie: wiele osób próbuje oszukać wyszukiwarki, umieszczając na stronie tytuły w taki sposób: <h1><font size="1">...</font></h1>. Powoduje to wstawienie tytułu pierwszego rzędu (czyli najważniejszego dla wyszukiwarek) miniaturową czcionką. W tym przypadku efekt jednak może być odwrotny, ponieważ wyszukiwarki już dawno uodporniły się na takie sztuczki. W skrajnym przypadku taka strona może zostać zupełnie usunięta z wyszukiwarki!

Nowe znaczniki semantyczne w HTML5

Znacznik semantyczny to taki znacznik, którego nazwa opisuje jego zawartość i nie posiada szczególnych atrybutów. Elementy semantyczne umożliwiają intuicyjny podział dokumentu i mogą być szczególnie pomocne dla wyszukiwarek.

Znaczniki dziedziczą po HTMLElement i mogą być dekorowane z użyciem stylów CSS. Obsługiwane są następujące elementy semantyczne:

  • header – pełni rolę nagłówka jakiegoś strony lub sekcji, powinniśmy stosować go jako kontener dla treści wprowadzającej, możesz użyć kilku headerów na stronie. Przeglądarka sprawdza rodzica headera, dzięki temu wie, jaka jest rola nagłówka na stronie – czy jest to nagłówek całej podstrony czy może sekcji. Możemy w nim umieścić np. nawigację strony(nav) lub tytuł naszej strony.
  • nav – tworzy nawigację – nie tylko nawigację strony, ale również do innych elementów. Z tego powodu możliwe jest użycie tego elementu kilka razy na stronie. Nav nie musi być w headerze np. kiedy mamy do czynienia z przyciskami poprzedni/następny wtedy możemy użyć tagu nav i nie wymaga on używania headera jako rodzica
  • article – w nim umieszczamy kompletną, autonomiczną treść. Najlepiej tłumaczy się to w ten sposób – kiedy wyciągniemy taki article z naszej strony i umieścimy samotnie, to on wciąż będzie sensowny, zrozumiały i logiczny. Ten element przyjmuje często powtarzalną formę np. jako post na blogu, post na forum, komentarz. Możemy te tagi swobodnie zagnieżdżać – np. jeśli mamy do czynienia z innym (odrębnym) artykułem.
  • section – to inaczej sekcja, czyli zgrupowana tematycznie zawartość. Należy pamiętać, że jej tytuł powinien być umieszczony w sekcji nagłówkowej (header). Pamiętajmy, że section stanowi część większej całości – zawsze jest coś wyżej, co łączy nasze sekcje.
  • aside – znacznik przeznaczony na treści tylko marginalnie związane z danym tematem, zawartością. Przykładem mogą być polecane źródła, reklamy, okienko tweetera, podział na kategorie, powiązane wpisy.
  • footer – w nim umieszczamy szersze informacje. Tag jest bardzo podobny do headera z taką różnicą, że w headerze podajemy informacje, które chcemy wiedzieć przed czytaniem danej treści, a w footerze już po przeczytaniu np. informacje o autorze, informacje o innych wpisach, publikacjach autora, social media itd. Pamiętajmy, że footer nie musi być jedynym takim tagiem – możemy użyć go więcej razy np. podając w sekcji komentarzy informacje na temat komentowania – jakieś zasady. Główny footer znajduje się poza tagiem main.
  • figure – znacznik, który doskonale nadaje się do dodawania grafik w głównej treści
  • figcaption – to nic innego jak etykieta tekstowa do naszego figure np. obrazka.
  • details – tag, który umożliwia dodanie rozwijalnych i zwijalnych szczegółów na stronie. Dzięki niemu możemy udzielić użytkownikowi dodatkowe informacje.
  • summary – to widoczny nagłówek dla naszych szczegółów. Zanim szczegóły będą rozwinięte poprzez kliknięcie, wyświetlony zostanie ten oto nagłówek.
  • time – znacznik, który umożliwia maszynowe odczytywanie daty i godziny. Przyjmuje atrybut datetime.

HTML5 wprowadza też użyteczne nowości w formularzach. Nowe semantyczne typy znacznika <input> to: color, date, datetime, email, month, number, range, search, tel, time, url, week.