Podstawy HTML: co warto wiedzieć

Co to są podstawy HTML?

Podstawy HTML to podstawowy zestaw tagów, atrybutów i reguł, którym podlega dokument internetowy. HTML (Hypertext Markup Language) opisuje strukturę strony — nagłówki, akapity, listy, linki, obrazy, formularze i metadane w sekcji head. HTML jest obecnie utrzymywany jako "living standard" przez WHATWG; to ramy, na których opierają się arkusze stylów (CSS) i skrypty (JavaScript).

Dlaczego podstawy HTML mają znaczenie dla SEO

HTML wpływa na odkrywalność, indeksację i użyteczność strony. Poprawna struktura (np. nagłówki h1–h6, semantyczne elementy) ułatwia robotom i narzędziom zrozumienie treści. Ważne: rozróżniaj crawling, indeksowanie i ranking. Poprawny HTML pomaga crawlingowi i indeksowaniu (Google używa mobilnej wersji strony jako podstawy do crawlowania i indeksowania; od lipca 2024 Google domyślnie crawluje witryny do Search z Googlebot Smartphone), ale sam HTML nie jest jedynym czynnikiem określającym pozycję w wynikach — ranking zależy od wielu sygnałów.

Jak działa HTML

Przeglądarka lub crawler pobiera dokument HTML, parsuje go i buduje DOM; CSS i JavaScript mogą modyfikować sposób prezentacji i treści, ale podstawowy dokument HTML jest pierwszym źródłem informacji. Sekcja head zawiera meta‑informacje (title, meta description, meta robots, link rel), body zawiera widoczną treść. Elementy semantyczne (header, nav, main, article, section, footer) przekazują kontekst, a atrybuty aria poprawiają dostępność.

Typy elementów w podstawach HTML

Klasyfikacja elementów HTML i krótkie uwagi:

- Elementy semantyczne — header, nav, main, article, section, footer: poprawiają zrozumiałość dokumentu.

- Elementy blokowe vs inline — np. div, p (blokowe) kontra span, a (inline): mają różne domyślne zachowania w modelu pudełkowym.

- Multimedia i obrazy — img, picture, video, audio: ważne są atrybuty alt, srcset i właściwe formaty dla wydajności.

- Formularze i interakcje — form, input, button, label: poprawna semantyka i atrybuty ułatwiają użyteczność i automatyczne testy.

- Metadane i linki — title, meta, link rel, canonical: decydują o tym, jak silnik wyszukiwarki interpretuje i grupuje treść.

Jak zacząć z podstawami HTML

Nauka HTML zaczyna się od praktyki: stwórz prosty plik .html, przeglądaj go w przeglądarce i sprawdzaj źródło. Ucz się semantyki zamiast używania wyłącznie divów. Kluczowe kroki: poznaj strukturę dokumentu (doctype, html, head, body), atrybuty obrazów i linków, formularze oraz podstawowe tagi tekstowe (h1–h6, p, ul/ol, table). Przegląd specyfikacji: https://html.spec.whatwg.org/.

Typowe błędy przy nauce HTML

- Brak semantyki: używanie divów zamiast elementów semantycznych utrudnia zrozumienie treści.

- Pomijanie atrybutu alt przy obrazach: szkodzi dostępności i może obniżyć wartość treści dla wyszukiwarek.

- Niewłaściwe użycie tagów nagłówków (wiele h1 na stronie bez uzasadnienia) — lepiej stosować logiczną hierarchię.

- Osadzanie kluczowych treści wyłącznie za pomocą JavaScript bez zabezpieczenia server‑side — może utrudnić crawlowanie i indeksację, szczególnie jeśli renderowanie klienta jest opóźnione.

Kontrola i weryfikacja: techniczna lista kontrolna

**Przegląd struktury HTML** — gdzie sprawdzić — passes when: podgląd źródła/DevTools pokazuje poprawne nagłówki, head i body bez błędów parsowania.

**Atrybuty obrazów (alt, srcset)** — gdzie sprawdzić — passes when: img ma sensowny alt i odpowiednie srcset/sizes dla responsywności.

**Meta i canonical** — gdzie sprawdzić — passes when: title, meta description i link rel="canonical" są poprawne i spójne dla istotnych stron.

**Indeksacja (publikacja)** — gdzie sprawdzić — passes when: dla własnych stron użyj Google Search Console URL Inspection; dla stron zewnętrznych użyj site: i sprawdź publiczne sygnały indeksacji (pamiętaj, że site: to wskazówka, nie dowód ostateczny).

Narzędzia i konkretne komendy do weryfikacji

Podstawowe narzędzia: Chrome DevTools (Elements, Network), curl, Google Search Console URL Inspection (dla własnych stron), Rich Results Test i Schema Markup Validator (schema.org) dla sprawdzenia struktury danych, Bing Webmaster Tools Site Explorer. Przykłady poleceń:

- Pobranie nagłówków HTTP: curl -I https://example.com — zwraca tylko nagłówki odpowiedzi.

- Pobranie HTML tak, jak zrobi to określony user‑agent: curl -A "Googlebot" https://example.com — ustawia nagłówek User‑Agent, co pozwala sprawdzić serwowanie treści w zależności od UA.

- Renderowany DOM: otwórz Chrome DevTools → Elements, aby zobaczyć, czy treść generowana przez JS jest widoczna w końcowym DOM.

- Structured data: wklej URL do Rich Results Test (https://search.google.com/test/rich-results) lub do Schema Markup Validator (https://validator.schema.org/) i sprawdź błędy.

Atrybuty linków i krótkie przypomnienie o polityce Google dotyczączej płatnych linków

W praktyce nie istnieje rel="dofollow" — zwykły link bez rel=nofollow/sponsored/ugc jest traktowany jako zwykły link. Dla linków opłaconych użyj rel="sponsored" lub rel="nofollow"; dla treści generowanej przez użytkowników użyj rel="ugc". Google traktuje rel=nofollow jako wskazówkę, a nie bezwzględną instrukcję. Google może uznać płatne linki za link spam, jeśli ich głównym celem jest manipulacja rankingiem; w takich przypadkach stosuje algorytmiczne działania lub działania ręczne.

Przykłady HTML: zwykły link: przykład. Link sponsorowany: przykład. Link UGC: przykład.

Dobre praktyki: ogranicz automatyczne wstawianie linków w treści, zadbaj o kontekst i wartość dla czytelnika — to ważniejsze niż sama metryka stron trzecich.

Przeczytaj przewodnik po Technical SEO

Najczęściej zadawane pytania

Czy poprawny HTML gwarantuje dobrą pozycję w Google? Nie — poprawny HTML pomaga crawlowaniu i indeksacji oraz wpływa na użyteczność, ale ranking zależy od wielu sygnałów (treść, autorytet, wydajność, doświadczenie użytkownika).

Jak sprawdzić, czy Google widzi moją stronę tak samo jak użytkownik mobilny? Dla własnych stron użyj Google Search Console → URL Inspection, a także testuj z Chrome DevTools w trybie urządzenia mobilnego oraz porównaj odpowiedzi przy pomocy curl -A "Googlebot".

Czy powinienem używać tylko najnowszych tagów semantycznych? Tak — semantyka ułatwia zrozumienie treści przez wyszukiwarki i czytniki ekranowe. Jeśli musisz wspierać bardzo stare przeglądarki, rozważ graceful degradation, ale priorytetem jest poprawna struktura semantyczna.