Znaczniki HTML – kategorie
HTML (HyperText Markup Language) to język ustandaryzowany; każdy znacznik pełni w nim określoną funkcję. Możemy wyróżnić 4 główne kategorie tagów HTML:
- Znaczniki w sekcjach <head> oraz <body>
- Tagi zawarte w sekcji <head> definiują nagłówek strony. Należą do nich np. <title>, <meta>, <style>, <link>, <script>, <noscript>, <base>.
- <Body> to widoczna dla użytkowników treść dokumentu. Kategoria ta obejmuje tagi służące do formatowania tekstu (nagłówki od <h1> do <h6>, <p>, <strong>) i zamieszczania multimediów (<img>, <video>, <audio>).
- Znaczniki semantyczne i niesemantyczne
- Tagi semantyczne są powiązane z warstwą znaczeniową treści (<article>, <header>, <footer>, <section>, <aside>, <summary>, <nav> itd.).
- Znaczniki niesemantyczne służą przede wszystkim organizowaniu i formatowaniu treści, ale nie informują o jej charakterze, np. <div>, <span>, <br>.
- Znaczniki podwójne i pojedyncze
- Znaczniki podwójne otaczają treść i z tego względu wymagają otwarcia: <em> i zamknięcia: </em>.
- Tagi pojedyncze dotyczą samodzielnych elementów i występują pojedynczo, bez tagu zamykającego, np. <img>, <hr>.
- Znaczniki blokowe i liniowe
- Tagi blokowe zgodnie z nazwą służą wyodrębnieniu bloków treści, takich jak nagłówki, paragrafy <p> czy listy uporządkowane <ol> i nieuporządkowane <ul>.
- Znaczniki liniowe nie oddzielają zawartej w nich treści od reszty i zajmują tylko tyle miejsca, ile potrzeba, jak <a>, <i>, <b>, <q>, <label>, <button> itd.
W zależności od kontekstu jeden znacznik HTML możesz należeć do różnych kategorii, np. tag <h2> należy do sekcji <body>, jest znacznikiem podwójnym i blokowym.
Tagi HTML a SEO
Niektóre znaczniki HTML mają istotne znaczenie dla optymalizacji treści na stronie internetowej, a co za tym idzie – ich prawidłowa implementacja wspiera pozycjonowanie. Które z tagów są szczególnie ważne pod kątem SEO?
- Tag robots meta – służy do udzielania instrukcji botom wyszukiwarek. Może np. informować, czy strona lub zamieszczone na niej grafiki mają zostać zaindeksowane (atrybuty noindex, noimageindex), czy roboty powinny podążać za znajdującymi się na niej linkami (nofollow) lub jak ma się wyświetlać w wynikach wyszukiwania (nosnippet, max-snippet).
- Tagi meta – meta title oraz meta description to elementy wyświetlające się w wynikach wyszukiwania, które mogą zachęcić lub zniechęcić użytkownika do odwiedzenia witryny. Pozwalają też algorytmom lepiej zrozumieć, co strona zawiera.
- Nagłówki <h1> do <h6> – porządkują tekst i nadają mu logiczną strukturę, która poprawia czytelność z perspektywy zarówno ludzi, jak i robotów.
Z perspektywy pozycjonowania dużo zmienić mogą też atrybuty takie jak <alt> w znaczniku <img>, pozwalający na wyszukiwanie obrazów w Google Grafika, <nofollow> czy <sponsored> w <a>, które blokują przekazywanie link juice do strony docelowej, lub <canonical> używany przy tagu <link>, umożliwiający określenie „kanonicznego” adresu URL w celu zapobiegania duplikacji treści.
Znacznik HTML – najczęściej zadawane pytania
Czym różnią się znaczniki HTML od atrybutów?
Znacznik HTML jest głównym elementem języka HTML, a atrybuty to dodatkowe informacje opisujące znaczniki. Niektóre znaczniki mogą funkcjonować samodzielnie, inne bez atrybutów są bezużyteczne, np. linkowanie musi zostać uzupełnione poprzez wskazanie adresu odsyłającego. Atrybuty zamieszcza się w tagu otwierającym.
Jak pokazać kod HTML na stronie?
Kod HTML, choć obecny na każdej stronie internetowej, jest niewidoczny dla użytkownika. Możesz go jednak podejrzeć, klikając prawym przyciskiem myszy i wybierając opcję „Wyświetl źródło strony” (skrót klawiaturowy Ctrl+U) lub „Zbadaj” (przycisk F12).
