Ważną zasadą w projektowaniu stron internetowych jest pomysł wykorzystania elementów HTML do wskazania, czym w rzeczywistości są, a nie jak mogą domyślnie wyglądać w przeglądarce. Nazywa się to używaniem semantycznego kodu HTML.

Co to jest semantyczny HTML?

Semantyczny HTML lub znaczniki semantyczne to HTML, który wprowadza znaczenie do strony internetowej, a nie tylko prezentację. Na przykład

 tag wskazuje, że załączony tekst jest akapitem. Jest to zarówno semantyczne, jak i prezentacyjne, ponieważ ludzie wiedzą, czym są akapity, a przeglądarki wiedzą, jak je wyświetlić.

Z drugiej strony tego równania znajdują się znaczniki takie jak  i  nie są semantyczne. Definiują one tylko wygląd tekstu (pogrubienie lub kursywa) i nie zapewniają dodatkowego znaczenia znacznikom.

Przykłady semantycznych znaczników HTML obejmują:

• Tagi nagłówka

   przez

Istnieje wiele innych semantycznych tagów HTML, których można użyć podczas tworzenia witryny zgodnej ze standardami.

Dlaczego powinieneś dbać o semantykę

Korzyści płynące z pisania semantycznego HTML wynikają z tego, co powinno być głównym celem każdej strony internetowej: chęcią komunikacji. Dodając do dokumentu znaczniki semantyczne, podajesz dodatkowe informacje o tym dokumencie, które ułatwiają komunikację. W szczególności tagi semantyczne wyjaśniają przeglądarce znaczenie strony i jej zawartości. Ta jasność jest również przekazywana wyszukiwarkom, zapewniając dostarczanie właściwych stron dla właściwych zapytań.

Semantyczne znaczniki HTML dostarczają informacji o zawartości tych znaczników, które wykraczają poza to, jak wyglądają na stronie. Tekst zawarty w enclosed  tag jest natychmiast rozpoznawany przez przeglądarkę jako pewien rodzaj języka kodowania. Zamiast próbować renderować ten kod, przeglądarka rozumie, że używasz tego tekstu jako przykładu kodu na potrzeby artykułu lub samouczka online.

Korzystanie z tagów semantycznych zapewnia również o wiele więcej haczyków do stylizowania treści. Być może dzisiaj wolisz wyświetlać próbki kodu w domyślnym stylu przeglądarki, ale jutro możesz chcieć je wywołać szarym kolorem tła; jeszcze później możesz chcieć zdefiniować dokładną rodzinę czcionek o stałej szerokości lub stos czcionek do wykorzystania na próbki. Wszystkie te rzeczy możesz łatwo zrobić, używając znaczników semantycznych i sprytnie zastosowanego CSS.

Poprawne używanie znaczników semantycznych

Używając znaczników semantycznych do przekazywania znaczenia, a nie do celów prezentacji, należy uważać, aby nie używać ich niepoprawnie tylko ze względu na ich typowe właściwości wyświetlania. Niektóre z najczęściej nadużywanych znaczników semantycznych obejmują:

• zablokować cytat — Niektórzy ludzie używają znacznik do wcięcia tekstu, który nie jest cytatem. Dzieje się tak, ponieważ cytaty blokowe są domyślnie wcięte. Jeśli chcesz po prostu wciąć tekst, który nie jest cytatem blokowym, zamiast tego użyj marginesów CSS.
• p — Niektórzy edytorzy stron internetowych używają (nierozdzielająca spacja zawarta w akapicie), aby dodać dodatkową przestrzeń między elementami strony, zamiast definiować rzeczywiste akapity dla tekstu tej strony. Podobnie jak w poprzednim przykładzie, należy użyć właściwości stylu margin lub padding, aby dodać przestrzeń.
• ul - Jak z

  , załączając tekst wewnątrz a

   w większości przeglądarek znaczniki mają wcięcia w tym tekście. Jest to zarówno semantycznie niepoprawny, jak i nieprawidłowy kod HTML, ponieważ tylko
  •  tagi są ważne w ciągu a
    etykietka. Ponownie użyj stylu marginesu lub dopełnienia do wcięcia tekstu.
  • h1, h2, h3, h4, h5 i h6 — Możesz użyć tagów nagłówka, aby zwiększyć i pogrubić czcionki, ale jeśli tekst nie jest nagłówkiem, zamiast tego użyj właściwości CSS font-weight i font-size.

  Używając znaczników HTML, które mają znaczenie, tworzysz strony, które przekazują więcej informacji niż te, które po prostu otaczają wszystko

   Tagi.

  Które tagi HTML są semantyczne?

  Chociaż prawie każdy tag HTML4 i wszystkie HTML5 tagi mają znaczenie semantyczne, niektóre tagi są głównie semantyczny.

  Na przykład HTML5 na nowo zdefiniował znaczenie  i  tagi mają być semantyczne.  tag nie przekazuje dodatkowego znaczenia; zamiast tego oznakowany tekst jest zazwyczaj pogrubiony. Podobnie  tag nie przekazuje dodatkowego znaczenia ani nacisku; raczej definiuje tekst, który jest zazwyczaj pisany kursywą.

  Semantyczne znaczniki HTML

  Skrót
  Akronim
  Długi cytat
  Definicja
  Adres dla autora (ów) dokumentu
  Cytat
  Odniesienie do kodu
  Tekst dalekopisowy
  Podział logiczny
  Ogólny kontener w stylu wbudowanym
  Tekst usunięty
  Wstawiony tekst
  Nacisk
  Silny nacisk
  Nagłówek pierwszego poziomu
  Nagłówek drugiego poziomu
  Nagłówek trzeciego poziomu
  Nagłówek czwartego poziomu
  Nagłówek piątego poziomu
  Nagłówek szóstego poziomu
  	Przerwa tematyczna
  Tekst do wprowadzenia przez użytkownika
  Tekst wstępnie sformatowany
  Krótka wycena inline
  Przykładowe wyjście
  Indeks
  Napisany u góry
  Tekst zmienny lub zdefiniowany przez użytkownika