16 sierpnia 2016

Semantyka kodu

FrazyTekst semantycznie poprawny jest przyjazny użytkownikom… kluczowe w samej treści strony internetowej należy wyróżniać semantycznie, co oznacza, że dajemy wyszukiwarkom sygnał, że dany wyraz ma szczególne znaczenie dla naszej strony internetowej. Nim przejdziemy do właściwego rozdziału, dotyczącego umieszczania fraz w treści strony napisze o semantyce kodu.

Przykładami znaczników, służących do wyróżniania semantycznego, są:

  • STRONG,
  • EM,
  • Nagłówki H1 – H6,
  • KBD, CODE, SAMP – tekst wprowadzoany z klawiatury, kod i przykład,
  • Q, BLOCKQUOTE, CITE – krótki cytat, cytat blokowy, źródło cytowania,
  • ABBR, ACRONYM, VAR – skrótowiec, akronim (skrót), zmienna.

Najczęściej stosuje się tytuły nagłówków, wyróżnienia strong oraz em. Znaczniki te dają podobne wizualnie efekty jak znaczniki B, I czy ostylowanie przy użyciu CSS odpowiednie cech wyglądu nagłówków. Jednak dla wyszukiwarek liczy się efekt semantyczny, nie wizualny.

Treści objęte zwykłymi znacznikami, odpowiedzialnymi za aspektami wizualnymi, są jak zwykły tekst. Dlatego tak ważne są różnice pomiędzy stosowanie znaczników semantycznych a wizualnych.

Treść ujęta w znaczniki wizualne, może mieć taki sam wygląd jak ta objęta znacznikami semantycznymi. Jednak znaczenie jakie przekazują robotom wyszukiwarek jest znacząco różne. Aby ułatwić zrozumienie semantyki znaczników, zapoznaj się z poniższym punktem.

Mapa akcentów

By łatwiej zobrazować Wam znaczenie wyróżnień semantycznych powstała mapa akcentów. Jest to wykres przedstawiający, jak widzi podany poniżej kod użytkownik, a jak wyszukiwarka.

<b>Jan Kowalski</b> jest <strong>programistą PHP</strong>

Na wykresie przedstawiono jak rozkłada się na poszczególne fragmenty kodu akcent wizualny(niebieski) i znaczeniowy (czerwony). Ten pierwszy jest dostrzegany przez użytkowników, drugi przez roboty wyszukiwarek:

Mapa akcentów. Semantyka Kodu

Jak widać, wyszukiwarki widzą tekst objęty <B> ‚płasko’.

Więcej o tych, dwóch rodzajach znaczników przeczytasz w kursach HTML i innych materiałach: