Podstawowe znaczniki HTML

HTML to język znaczników, który służy do tworzenia stron internetowych. Za pomocą HTML możemy określić strukturę i treść dokumentu, czyli m.in. nagłówki, paragrafy, listy, linki i wiele innych.

Podstawowymi znacznikami HTML nazywamy te, które są najczęściej używane do tworzenia prostych stron internetowych oraz pozycjonowania (SEO).

HTML dla początkujących – co warto wiedzieć na ten temat?

Zanim poznasz podstawowe kody HTML, powinieneś dokładnie wiedzieć czym jest język HTML oraz dlaczego się go stosuje. Chociaż technologia projektowania stron przez lata poszła znacznie do przodu, to nadal wykorzystuje się znaczniki HyperText Markup Language, by projektować strony internetowe.

W praktyce HTML stanowi dziś stelaż witryny. Dzięki językowi HTML przeglądarka jest w stanie odszyfrować określone komendy i może wyświetlać obrazki czy znaki w odpowiednim miejscu, a także – czego nie widzisz – wyszukiwarka wie, jakie meta tagi powinny być użyte w wynikach wyszukiwania lub jakie informacje udostępnić algorytmom w celu poprawy parametrów SEO.

Każdy znacznik HTML to tak naprawdę „słowo” odczytywane przez odpowiednie oprogramowanie. Słowa te wpływają na parametry wyświetlanych elementów i ich układ.

Co to jest znacznik HTML?

Powtórzmy – znacznik HTML (ang. HTML tag) to podstawowy element składni języka HTML (HyperText Markup Language – hipertekstowy język znaczników).

Język HTML to standardowy język znaczników używany do tworzenia i strukturyzowania zawartości stron www. Określa strukturę dokumentu poprzez zestaw znaczników, które definiują nagłówki, akapity, obrazy, linki i inne elementy wyświetlane przez przeglądarki internetowe.

Każdy znacznik jest więc częścią kodu otaczającego główną treść dokumentu lub definiującego określone funkcje w dokumencie HTML, pomagając przeglądarkom internetowym zrozumieć, jak wyświetlać i interpretować różne elementy na stronie.

Język HTML – znaczniki i ich struktura

Aby zapisać komendę w HTML, należy ją odpowiednio oznaczyć. Kody HTML zwykle występują w ostrych nawiasach < > i zwykle występuje w parze składającej się z:

1. Znacznika otwierającego — rozpoczyna dany element, np. <p>.

2. Znacznika zamykającego — kończy element i zawiera ukośnik, np. </p>.

Między tymi znacznikami umieszcza się zawartość lub dodatkowe znaczniki HTML, co pozwala na zagnieżdżanie różnych struktur. Jednak znaczniki HTML nie muszą być oznaczane wyłącznie ostrymi zawiasami. Mogą występować również jako:

• nazwa=”wartość”;

• znaki specjalne (np. &nbsp);

• zwykły tekst.

Wartości i znaki specjalne mogą stanowić strukturę osobą lub mogą być częścią struktury ostrych nawiasów. Z kolei zwykły tekst może być zawarty w dokumencie HTML, ale nie będzie on analizowany przez przeglądarkę. Może jednak stanowić element notatki na temat strony lub jest niekiedy uwagą w jakim kierunku należy przebudować kod, aby witryna była zgodna z zasadami pozycjonowania.

Atrybuty znaczników

Wyżej wskazane znaczniki HTML (głównie ostre zawiasy) mogą również zawierać atrybuty, które dodają szczegółowe informacje lub modyfikują sposób wyświetlania elementu. Atrybuty umieszczane są w znaczniku otwierającym, np.:

<a href=”https://xyz.com”>Link do strony</a>

Gdzie:

• <a> – to znacznik hiperłącza.

• href=”https://xyz.com” – to atrybut definiujący docelowy adres strony internetowej.

• „Link do strony” – to tekst, który jest klikalnym linkiem.

Jakie są jeszcze podstawowe komendy HTML, które określają atrybuty znaczników?

• znacznik id – stosuje się go, aby nadać numer identyfikacyjny jednego z elementów na stronie internetowej;

• znacznik class – ułatwia on stylizowanie grupy znaczników w jednym momencie i pozwala np. na zmniejszenie fontu lub zmianę koloru znaków;

• znacznik style – CSS to zdefiniowany styl, który możesz wykorzystać w określonym elemencie lub grupie elementów. Do jego użycia wykorzystuje się znacznik style;

• znacznik title – znacznik, który pozwala wyświetlać dodatkowy tekst przy elemencie;

• znacznik src – podaje ścieżkę do pliku (najczęściej multimedialnego) w znacznikach np. <img>;

• znacznik alt – opisuje obrazek, nadając mu tzw. tekst alternatywny, wyświetlany, gdy obrazek nie będzie mógł zostać wczytany;

• znacznik width i height – określają one szerokość i wysokość elementu (np. widgetu mediów społecznościowych).

Po co stosuje się takie atrybuty? Aby rozszerzyć możliwości związane ze stroną internetową. Dzięki znacznikom możesz podlinkować tekst do innego źródła (np. strony internetowej, własnej podstrony z produktem lub tekstem na bloga, ale też do pliku PDF) albo wyświetlać obrazek.

Rodzaje znaczników HTML, które wykorzystywane są przez strony internetowe

Podstawowe znaczniki HTML dzielą się na różne rodzaje, które mają określoną funkcję. Część z nich odpowiada za wygląd strony, część za optymalizację pod kątem algorytmów wyszukiwarki, a jeszcze część wpływa na jej walory użytkowe. Znaczniki HTML można podzielić na:

• Znaczniki strukturalne – np. <html>, <head>, <body>, które tworzą ogólny szkielet dokumentu. Znaczniki te mają też wpływ na pozycjonowanie, bo stanowią drogowskaz dla algorytmów, które części strony są najbardziej istotne contentowo, gdzie są meta tagi i jak interpretować tematykę witryny.

• Znaczniki semantyczne – to m.in. <header>, <nav>, <section>, <article>, <footer>, znaczniki te wpływają na logiczne części strony. ich zadaniem jest podział strony na określone sekcje, ale niewidoczne dla użytkownika. Również mocno wpływają na SEO.

• Znaczniki tekstowe – np. <h1>, <p>, <span>, służące do formatowania i organizacji treści. Pozwalają na budowanie struktury łatwiejszej w odbiorze, sprawiają, że tekst nie jest jednolitą bryłą. Dodatkowo wpływają na pozycjonowanie. Istotną rolę grają tutaj zdefiniowane jako <h1> lub <h2> nagłówki.

• Znaczniki multimedialne – np. <img>, <audio>, <video>, które pozwalają osadzać obrazy, dźwięki i filmy. Co istotne, rolą tych znaczników jest również zdefiniowanie parametrów multimediów, poprzez stosowanie odpowiednich atrybutów.

• Znaczniki tabel i formularzy – np. <table>, <form>, <input>, umożliwiające tworzenie interaktywnych i tabelarycznych elementów. Dzięki nim strona jest bardziej przyjazna dla użytkownika.

Jakie są podstawowe znaczniki HTML?

Komendy HTML (kody HTML) wpisywane są w kodzie strony w odpowiednich miejscach np. pod znacznikami <head> lub <body>. Jak już wspomnieliśmy – w języku HTML używa się specjalnych oznaczeń, aby zdefiniować strukturę i zawartość strony internetowej. Oto, jakie znaczniki może zawierać dokument HTML:

1. <!DOCTYPE html> – definiuje wersję HTML, z którą pracujemy.

2. <html> – otwiera i zamyka całą stronę internetową.

3. <head> – definiuje sekcję zawierającą informacje o stronie, takie jak tytuł, meta tagi, styl i skrypty.

4. <title> – definiuje tytuł strony, który wyświetla się w pasku tytułowym przeglądarki.

5. <meta name=”description”> – definiuje opis strony, który jest często wykorzystywany przez wyszukiwarki do wyświetlania fragmentu tekstu w wynikach wyszukiwania.

6. <body> – definiuje główną zawartość strony internetowej.

7. <caption> – definiuje podpis tabeli lub jej opis. Powinien być używany bezpośrednio po otwarciu znacznika <table>. 

8. <h1> – <h6> – definiują paragraf tekstu. To nagłówki różnego poziomu – <h1> to nagłówek pierwszego poziomu, a <h6> to nagłówek szóstego poziomu.

9. <p> – definiuje akapity tekstu.

10. <a> – definiuje hiperłącza, które można kliknąć, aby przejść do innej strony internetowej lub do innej części tej samej strony.

11. <img> – definiuje obrazy i inne elementy graficzne.

12. <ul> – definiuje listę nieuporządkowaną. Lista nieuporządkowana to lista, w której nie każdy element jest numerowany.

13. <ol> – definiuje listę uporządkowaną. Lista uporządkowana to lista, w której każdy element jest numerowany.

14. <li> – definiuje element listy, który znajduje się w <ul> lub <ol>.

15. <div> – definiuje blok zawierający elementy HTML i może być używany do tworzenia sekcji na stronie.

16. <span> – definiuje mały blok tekstu lub element. Służy do stylowania fragmentu tekstu.

17. <table> – definiuje tabelę, która składa się z wierszy i kolumn.

18. <tr> – definiuje wiersz tabeli.

19. <td> – definiuje komórkę tabeli – określa się ją również jako kolumna tabeli.

20. <form> – definiuje formularz HTML. Między znacznikami umieszcza się pola tekstowe (checkboxy, etykiety). Dzięki temu użytkownicy mogą wprowadzać dane na stronie internetowej.

21. <input> – definiuje pole do wprowadzania danych, takie jak pole tekstowe lub przycisk.

22. <button> – definiuje przycisk, który może być używany do wykonywania akcji na stronie.

23. <select> – definiuje pole wyboru, które umożliwia użytkownikom wybór jednej lub wielu opcji z listy.

24. <option> – definiuje opcję w polu wyboru.

25. <label> – definiuje etykietę dla elementu formularza, co ułatwia użytkownikom wypełnianie formularza.

26. <header> – definiuje nagłówek strony internetowej, który zwykle zawiera logo, menu nawigacyjne i inne informacje o stronie.

27. <footer> – definiuje stopkę strony internetowej, która zwykle zawiera informacje o autorze, prawach autorskich, linki do mediów społecznościowych i inne informacje.

    Jak wspomnieliśmy, znaczniki <header> i <footer> to tzw. znaczniki semantyczne, które określają funkcję i znaczenie zawartej w nich treści. To ułatwia przeglądarkom i narzędziom dostępności interpretację struktury strony.

Meta tagi – co warto o nich wiedzieć?

Jak wskazaliśmy wyżej, jednym z podstawowych komend HTML jest znacznik HTML tag seo. Po co są znaczniki typu meta? Elementy te są niewidoczne dla użytkownika, a informacje zawarte w nich nie grają wielkiej roli pod kątem użytkowym, ale za to mają ogromne znaczenie pod kątem pozycjonowania.

Meta tagi SEO przekazują informacje m.in. o tematyce witryny, słowach kluczowych, widoku witryny, przetwarzaniu danych, a także o indeksowaniu danej strony internetowej. Jakie są najpopularniejsze meta tagi?

Poza wspomnianymi <title> (definiującym nie tylko główny człon strony, ale też będącym głównym czynnikiem rankingowym) czy meta descriptions (wpływającym na współczynnik klikalności) do tych najpopularniejszych zaliczymy:

• <meta charset=”utf-8″> – określa standard, w jakim kodowane są znaki. Umożliwia poprawne wyświetlanie polskich liter. Dzięki temu optymalizacja pod kątem polskiego odbiorcy jest łatwiejsza.

• <meta name=”viewport”> – widok odpowiada za skalowanie strony pod kątem urządzeń mobilnych. Stanowi niebagatelne znaczenie dla SXO (połączenie SEO i user experience). Nie ma dziś możliwości skutecznej optymalizacji strony, jeżeli nie ma ona wersji na urządzenia mobilne.

• <meta name=”robots”> – to jeden z najważniejszych tagów SEO. Pozwala wskazać, czy dana strona ma być indeksowana czy nie. Wskazuje też, jakie linki śledzić i jakie są ich parametry (dofollow lub nofollow).

HTML a SEO – jak łączą się ze sobą te terminy?

Jednak nie tylko znaczniki meta mają wpływ na optymalizację strony internetowej. HTML i SEO (Search Engine Optimization) są ze sobą ściśle powiązane, ponieważ poprawne używanie znaczników HTML może pomóc w indeksowaniu i wyświetlaniu strony internetowej wysoko w darmowych wynikach wyszukiwania.

Co ważne, struktura HTML i jej prawidłowość może poprawić, ale też pogorszyć optymalizację witryny. Jeżeli HTML Twojej strony jest czysty, poprawny, nie zawiera błędów i niepotrzebnych komend, strona dużo lepiej funkcjonuje. Czysty HTML przekłada się na szybkie ładowanie kolejnych elementów, a to z kolei ma ogromne znaczenie przy SEO.

Odpowiednia struktura kodu wpływa też na szybkość i efektywność indeksowania treści. Brak błędów pozwala na łatwiejsze odczytanie kolejnych poleceń. Z kolei jeżeli na stronie internetowej jest wiele błędów, a kolejne elementy nie ładują się poprawnie, jakość optymalizacji może znacznie spaść.

5 wskazówek wykorzystywania znaczników HTML pod kątem SEO

Poniżej przedstawiamy wskazówki dotyczące wykorzystywania znaczników HTML pod kątem SEO:

1. Używaj znacznika tytułu <title> – znacznik ten definiuje tytuł strony i jest wyświetlany w wynikach wyszukiwania. Tytuł powinien być krótki, zwięzły i odzwierciedlać zawartość strony.

2. Zastosuj znaczniki nagłówków – znaczniki H1, H2 itd. definiują nagłówki strony. Wskazuje to wyszukiwarkom, jakie tematy są poruszane na stronie, a także pomaga w organizacji i formatowaniu treści dla użytkowników. 

3. Użyj odpowiednich słów kluczowych w nagłówkach – słowa kluczowe są ważne pod kątem SEO, ponieważ pomagają w identyfikacji treści strony przez wyszukiwarki. Używaj słów kluczowych związanych z tematem strony w treści i meta tagach oraz nagłówkach <h1> – <h6>.

4. Zastosuj odpowiednie znaczniki alt dla obrazów – znaczniki alt (tekst alternatywny) opisują treść obrazów na stronie. Pomagają one w identyfikacji obrazów przez wyszukiwarki i zwiększają szansę na wyświetlenie strony w wynikach wyszukiwania obrazów. Opis alternatywny to również wsparcie dla osób niedowidzących lub niewidomych, które posługują się specjalnymi programami do głosowego “odczytania” treści obrazków.

5. Optymalizuj szybkość ładowania strony – szybkość ładowania strony jest ważna pod kątem SEO, ponieważ wpływa na doświadczenie użytkownika (UX) i ranking strony w SERP-ach. Upewnij się, że kod HTML został prawidłowo zoptymalizowany.

Pamiętaj…

…aby kod HTML był zgodny ze standardami pozycjonowania (SEO), czyli zminifikowany, bez zbędnych dodatków i znaków.

HTML a SEO – jak zweryfikować poprawność wykorzystania znaczników HTML?

Weryfikacja znaczników HTML bazuje zazwyczaj na kompleksowym audycie SEO strony internetowej. Wówczas specjaliści wskazują wady oraz zalety Twojego serwisu pod kątem optymalizacji treści, oraz technicznego SEO, a dodatkowo udzielają rekomendacji w zakresie działań w wyszukiwarkach.

Analitycy dokładnie sprawdzą, jak wygląda struktura witryny. Przeanalizują zarówno kody HTML dotyczące SEO (np. meta tagi), jak i te, które wpływają na content. Poprawią też błędy i przygotują witrynę tak, aby można było rozpocząć właściwą optymalizację. Pamiętaj, że budowanie pozycji SEO dla strony, na której są błędy mija się z celem. Najpierw musisz naprawić to, co zostało uszkodzone.

Genialne firmy mnożą
swój potencjał z

Sprawdź nasze Case Studies

Ocena Clutch

5.0

Ocena Google

4.8

Bądź widoczny w Google i wyszukiwarkach przyszłości (ChatGPT, Gemini, Perplexity i inne)

Zostaw adres e-mail — porozmawiamy o widoczności Twojej strony w AI.

Dane przetwarzamy w celu kontaktu, zgodnie z naszą
polityką prywatności