Język HTML, a dokładniej jego znaczniki, to podstawowy budulec stron internetowych. Czym one dokładnie są? Jakie znaczenie mają w kontekście SEO? Z których z nich najczęściej się korzysta? Odpowiedzi na te pytania znajdziesz w naszym artykule.
Czym jest język HTML?
Zanim omówimy bliżej podstawowe znaczniki języka HTML, przybliżymy pokrótce, czym jest sam HTML.
HTML, czyli HyperText Markup Language, to podstawa wszystkich stron internetowych. Powstanie tego języka sięga początku lat 90., czyli wczesnych lat internetu. Hipertekstowy język znaczników używany jest do strukturyzacji treści w sieci. Kod HTML wykorzystuje system znaczników umieszczanych w nawiasach kątowych (< >) do definiowania różnych części strony internetowej, takich jak nagłówek, akapit, link, obraz, element listy itp.
Każdy znacznik HTML ma przypisane znaczenie i funkcję. Przeglądarki internetowe korzystają z nich, aby prawidłowo wyświetlać zawartość strony. Z racji tak bardzo istotnej funkcji owego systemu często synonimem dla pojedynczej podstrony jest właśnie „dokument HTML”.
Czym są podstawowe znaczniki HTML?
Znacznik HTML (lub „tag”) to specjalne słowo, znak lub litera zamknięte we wspomnianych nawiasach kątowych, które spełnia określoną funkcję.
Oto przykładowe, podstawowe znaczniki HTML:
| Kategoria | Przykładowe tagi | Opis |
|---|---|---|
| Struktura dokumentu | <html>, <head>, <body> | Znaczniki te definiują podstawową strukturę dokumentu HTML. |
| Formatowanie | <b>, <i>, <small>, <em, <ol>, <ul> | Te tagi wykorzystywane są do stylowania fragmentu tekstu (np. pogrubienie, kursywa). Za ich pomocą tworzona jest także lista uporządkowana lub lista nieuporządkowana. |
| Formularze i dane wejściowe | <from>, <input>, <textarea>, <button> | Tagi te są używane do tworzenia formularzy na stronie internetowej. |
| Multimedia | <img>, <wideo>, <audio> | Te elementy HTML pozwalają zagnieżdżać materiały multimedialne jak zdjęcia, video i audio. |
| Linki | <a>, <link> | Tego typu znaczniki HTML wykorzystuje się do tworzenia hiperłączy. Wewnątrz nich można określić adres strony internetowej i to, jak ma być traktowany (np. jako link sponsorowany). |
| Tabela | <table>, <tr>, <td>, <th> | Za pomocą tych oznaczeń można sformatować tabelę. |
4 główne kategorie oznaczeń HTML
Wszystkie znaczniki HTML można także przydzielić do 4 głównych grup (w zależności od kontekstu i zastosowania niektóre z nich mogą przynależeć do kilku grup jednocześnie):
Znaczniki w sekcjach <head> i <body>
Podstawowe znaczniki sekcji HTML to tag <head>, czyli nagłówek strony oraz <body>, który definiuje główną treść dokumentu.
- <head> - kategoria ta obejmuje takie znaczniki jak <title>, <meta>, <link> i <style>;
- <body> - dzięki tagom zawartym w tej sekcji opisywana jest główna zawartość strony internetowe widoczna dla użytkowników. Zaliczają się do nich tagi formatujące tekst, takie jak <p>, <h1>...<h6>, a także tagi multimedialne, takie jak <img>, <audio>, <wideo>.
Znaczniki semantyczne i niesemantyczne
- Znaczniki semantyczne – przekazują one znaczenie opisywanego typu treści zarówno przeglądarce, jak i programiście. Przykładowe tagi to <article>, <section>, <header>, <footer> i <nav>;
- Znaczniki niesemantyczne – nie nadają żadnego specjalnego znaczenia treściom, które zawierają. Zazwyczaj wykorzystywane są w celach stylistycznych lub organizacyjnych np. <div>, <span>, <b>.
Znaczniki blokowe i liniowe
Ten typ podziału odnosi się do oznaczeń formatujących treść dokumentu.
- Znaczniki blokowe – tworzą one „bloki” treści, które obejmują pełną dostępną szerokość, dodając także linię przed i po treści. Przykładowe tagi to <p>, <div>, <h1>...<h6> oraz <ol>;
- Znaczniki liniowe – nie zaczynają się one od nowej linii i zajmują tylko tyle szerokości, ile to konieczne. Przykładowe tagi to <span>, <a>, <img> i <strong>.
Znaczniki pojedyncze i podwójne
Podział ten rozróżnia, jak poszczególne tagi są wprowadzane i zamykane.
- Znaczniki pojedyncze – tego typu tagi nie otaczają żadnej treści i dlatego nie potrzebują tagu zamykającego. Zazwyczaj reprezentują elementy samodzielne, takie jak obrazek lub przejście do nowej linii. Przykłady to <img>, <br> i <hr>;
- Znaczniki podwójne – tego typu tagi wymagają zarówno tagu otwierającego, jak i zamykającego, a służą do otaczania treści. Przykłady to <p>, <h1>, <body> i <title>.
Język HTML i SEO
HTML jest fundamentem tworzenia stron internetowych. Z tego względu ma oczywiście duże znaczenie w kontekście SEO. Google wykorzystuje strukturę i znaczniki HTML, aby zrozumieć i indeksować zawartość witryny. Dobrze skonstruowany kod HTML może znacznie poprawić pozycjonowanie.
Na przestrzeni lat Google opublikowało wiele porad dotyczących tego, jak umiejętnie stosować omawiany język znaczników.
- Sprawdzone metody dotyczące SEO w Grafice Google – ten przewodnik zawiera porady dotyczące korzystania ze znacznika
i jego atrybutów w celu lepszego pozycjonowania obrazów.
- Sprawdzone metody dotyczące witryn mobilnych i indeksowania zoptymalizowanego pod kątem urządzeń mobilnych – jako że dostosowanie do urządzeń mobilnych jest kluczową częścią SEO, niniejszy przewodnik omawia, jak zoptymalizować witrynę (i kod HTML) pod tym kątem (najwięcej tego typu informacji znajduje się w sekcji „Utwórz witrynę dostosowaną do komórek”).
- Specyfikacje tagu meta Robots, data-nosnippet i X-Robots-Tag – ten przewodnik zawiera szczegółowe informacje o tym, jak za pomocą oznaczeń HTML kontrolować sposób, w jaki wyszukiwarka Google widzi i indeksuje Twoją stronę.
5 znaczników HTML ważnych w kontekście pozycjonowania stron
Pewne tagi mają szczególnie duże znaczenie w kontekście SEO. Omówmy je bliżej.
-
<title>
W przypadku każdej podstrony warto zadbać o odpowiedni tag tytułowy. Wpływa on bowiem na to, jak będzie prezentować się w wynikach wyszukiwania. Odpowiednio skonstruowany, pomaga Google zrozumieć, czego dotyczy zawartość strony internetowej, jak i jest w stanie przykuć uwagę użytkowników.
-
<meta name="description">
Ważny jest nie tylko tytuł, ale także i opis strony. Warto zawrzeć w nim odpowiednie frazy kluczowe i przygotować go tak, aby przykuł uwagę odbiorcy.
-
<h1> do <h6>
Formatowanie treści za pomocą odpowiednich nagłówków to jeden z najlepszych i najłatwiejszych sposobów na poprawę oceny strony z punktu widzenia Google oraz użytkowników.
Przykład oznaczenia nagłówka drugiego rzędu
Przeczytaj także:
Nagłówki H1, H2 i H3 dla SEO. Poprawna optymalizacja w pigułce -
<img alt="description">
Atrybut <alt> w znaczniku <img> służy do opisu obrazu. Google nie jest w stanie zobaczyć zawartości plików graficznych, dlatego czyta ich tekst alternatywny, aby ustalić, czego dotyczą.
Przykład tekstu alternatywnego w Drupalu
-
<canonical>
Nie jest to samodzielny tag, a raczej atrybut używany w tagu <link> w celu zapobiegania powielaniu treści w SEO. Pozwala określić „kanoniczny adres URL”, czyli preferowaną wersję strony internetowej.
Podsumowanie
Wszystkie strony internetowe wykorzystują HTML. Warto dlatego wiedzieć, jakie oznaczenia są w jego przypadku wykorzystywane oraz jak wpływają na SEO.
