Sprawdź, jak wypozycjonowaliśmy naszą stronę do TOP1
Na skróty
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).
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.
Znacznik HTML jest zapisywany w ostrych nawiasach < > i zwykle występuje w parze składającej się z:
Znacznika otwierającego — rozpoczyna dany element, np. <p>.
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.
Znaczniki HTML 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.
Znaczniki HTML można podzielić na:
Znaczniki strukturalne – np. <html>, <head>, <body>, które tworzą ogólny szkielet dokumentu.
Znaczniki tekstowe – np. <h1>, <p>, <span>, służące do formatowania i organizacji treści.
Znaczniki multimedialne – np. <img>, <audio>, <video>, które pozwalają osadzać obrazy, dźwięki i filmy.
Znaczniki tabel i formularzy – np. <table>, <form>, <input>, umożliwiające tworzenie interaktywnych i tabelarycznych elementów.
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:
<!DOCTYPE html> – definiuje wersję HTML, z którą pracujemy.
<html> – otwiera i zamyka całą stronę internetową.
<head> – definiuje sekcję zawierającą informacje o stronie, takie jak tytuł, meta tagi, styl i skrypty.
<title> – definiuje tytuł strony, który wyświetla się w pasku tytułowym przeglądarki.
<meta name=”description”> – definiuje opis strony, który jest często wykorzystywany przez wyszukiwarki do wyświetlania fragmentu tekstu w wynikach wyszukiwania.
<body> – definiuje główną zawartość strony internetowej.
<caption> – definiuje podpis tabeli lub jej opis. Powinien być używany bezpośrednio po otwarciu znacznika <table>.
<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.
<p> – definiuje akapity tekstu.
<a> – definiuje hiperłącza, które można kliknąć, aby przejść do innej strony internetowej lub do innej części tej samej strony.
<img> – definiuje obrazy i inne elementy graficzne.
<ul> – definiuje listę nieuporządkowaną. Lista nieuporządkowana to lista, w której nie każdy element jest numerowany.
<ol> – definiuje listę uporządkowaną. Lista uporządkowana to lista, w której każdy element jest numerowany.
<li> – definiuje element listy, który znajduje się w <ul> lub <ol>.
<div> – definiuje blok zawierający elementy HTML i może być używany do tworzenia sekcji na stronie.
<span> – definiuje mały blok tekstu lub element. Służy do stylowania fragmentu tekstu.
<table> – definiuje tabelę, która składa się z wierszy i kolumn.
<tr> – definiuje wiersz tabeli.
<td> – definiuje komórkę tabeli – określa się ją również jako kolumna tabeli.
<form> – definiuje formularz HTML. Między znacznikami umieszcza się pola tekstowe (checkboxy, etykiety). Dzięki temu użytkownicy mogą wprowadzać dane na stronie internetowej.
<input> – definiuje pole do wprowadzania danych, takie jak pole tekstowe lub przycisk.
<button> – definiuje przycisk, który może być używany do wykonywania akcji na stronie.
<select> – definiuje pole wyboru, które umożliwia użytkownikom wybór jednej lub wielu opcji z listy.
<option> – definiuje opcję w polu wyboru.
<label> – definiuje etykietę dla elementu formularza, co ułatwia użytkownikom wypełnianie formularza.
<header> – definiuje nagłówek strony internetowej, który zwykle zawiera logo, menu nawigacyjne i inne informacje o stronie.
<footer> – definiuje stopkę strony internetowej, która zwykle zawiera informacje o autorze, prawach autorskich, linki do mediów społecznościowych i inne informacje.
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.
Zobacz: Jak połączyć PayPal z WooCommerce?
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.
Poniżej przedstawiamy wskazówki dotyczące wykorzystywania znaczników HTML pod kątem SEO:
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.
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.
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>.
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.
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.
Zobacz: Checklista SEO – 5 najważniejszych punktów
Pamiętaj…
…aby kod HTML był zgodny ze standardami pozycjonowania (SEO), czyli zminifikowany, bez zbędnych dodatków i znaków.
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.
Absolwent zarządzania. Łączy SEO i content marketing w jednolitą całość. Pozycjonowanie stron traktuje w kategorii strategii marketingowej, która ma znaczenie na każdym etapie ścieżki zakupowej użytkownika. Prywatnie fascynuje się psychologią zachowań konsumenckich.
