Co to jest HTML?

HTML to język, w którym zapisana jest treść każdej strony internetowej: nagłówki, akapity, linki, obrazy i tabele. Przeglądarka czyta go, żeby pokazać stronę klientowi, a Google, żeby zrozumieć, o czym ona jest. Poniżej znajdziesz, jak działa HTML, czym różni się od CSS i JavaScriptu oraz które jego elementy mają znaczenie dla widoczności w wyszukiwarce.

Co to jest HTML?

HTML (HyperText Markup Language, po polsku hipertekstowy język znaczników) to język, którym opisuje się treść i strukturę strony internetowej. Mówi przeglądarce, który fragment jest nagłówkiem, który akapitem, a który linkiem lub obrazem.

Nazwa ma dwie części:

• Hipertekst to tekst z odnośnikami do innych dokumentów. Linki łączą strony w sieć, po której poruszają się ludzie i roboty wyszukiwarek.
• Język znaczników oznacza, że treść otacza się znacznikami (tagami), które nadają jej znaczenie. Zapis <h2>Cennik</h2> mówi przeglądarce: to nagłówek drugiego stopnia o treści „Cennik”.

HTML nie jest językiem programowania. Nie liczy, nie przetwarza danych i nie obsługuje interakcji. Opisuje, co jest na stronie i w jakim porządku. Każda strona, także zbudowana w kreatorze albo w systemie CMS, takim jak WordPress, trafia do przeglądarki jako HTML.

Z czego składa się kod HTML?

Kod HTML składa się z elementów. Według dokumentacji MDN element to zwykle znacznik otwierający, treść i znacznik zamykający, np. <p>Tekst akapitu</p>. Niektóre elementy nie mają treści ani znacznika zamykającego, np. <img> (obraz) albo <br> (nowy wiersz).

Atrybuty dopisuje się w znaczniku otwierającym w formie nazwa="wartość". Dodają elementowi informacje, których nie widać w treści: adres linku (href), adres pliku graficznego (src) albo opis obrazu (alt).

Encje pozwalają zapisać znaki, które w HTML mają specjalną funkcję. Nawias „<” otwiera znacznik, więc w tekście zapisuje się go jako &lt;, a znak „&” jako &amp;.

Najczęściej spotykane znaczniki:

Znacznik	Do czego służy
<html>	obejmuje cały dokument
<head>	informacje o stronie dla przeglądarki i wyszukiwarki
<title>	tytuł strony, widoczny m.in. na karcie przeglądarki
<meta>	metadane, np. opis strony albo instrukcje dla robotów
<body>	treść widoczna dla użytkownika
<h1> do <h6>	nagłówki, od najważniejszego do najmniej ważnego
<p>	akapit
<a>	link
<img>	obraz
<ul>, <ol>, <li>	listy i ich punkty
<table>	tabela
<form>	formularz

Jak wygląda szkielet dokumentu HTML?

Każdy dokument HTML ma ten sam szkielet: deklarację typu, element html, a w nim dwie części, head i body.

1. <!doctype html> na samym początku pliku mówi przeglądarce, że dokument jest napisany we współczesnym HTML (HTML5).
2. <html lang="pl"> obejmuje cały dokument. Atrybut lang podaje język strony.
3. <head> zawiera informacje o stronie: tytuł, kodowanie znaków (<meta charset="utf-8">), ustawienia widoku na telefonie (<meta name="viewport">), opis, style i skrypty. Użytkownik nie widzi tej części na stronie, ale tytuł i opis mogą trafić do wyników wyszukiwania.
4. <body> zawiera wszystko, co widać: nagłówki, tekst, obrazy, formularze.

W body współczesny HTML wyróżnia też obszary strony: <header> (górna część z logo i menu), <nav> (nawigacja), <main> (treść główna), <aside> (treści uzupełniające) i <footer> (stopka). Według poradnika W3C takie oznaczenie pozwala użytkownikom czytników ekranu przeskoczyć od razu do treści głównej. W3C dodaje, że czytelna struktura pomaga też wyszukiwarkom indeksować zawartość.

Google zastrzega jednak w przewodniku po SEO, że duża część sieci nie ma poprawnego HTML, więc wyszukiwarka rzadko może polegać na samym znaczeniu znaczników. Porządna struktura pracuje więc przede wszystkim dla ludzi, a Google korzysta z niej przy okazji.

Czym HTML różni się od CSS i JavaScriptu?

HTML odpowiada za treść i strukturę, CSS za wygląd, a JavaScript za działanie strony. Dopiero te trzy technologie razem tworzą stronę, którą widzi klient.

Technologia	Odpowiada za	Przykład
HTML	co jest na stronie i w jakiej kolejności	nagłówek, akapit, link, przycisk
CSS (kaskadowe arkusze stylów)	jak to wygląda	kolory, krój i wielkość pisma, układ na telefonie
JavaScript	co się dzieje po działaniu użytkownika	rozwijane menu, koszyk, filtrowanie produktów

Oddzielenie treści od wyglądu upraszcza pracę: zmiana koloru wszystkich przycisków to jedna reguła CSS, a nie poprawka w każdym pliku. Reguła CSS składa się z selektora (do czego się odnosi), właściwości i wartości, np. h2 { color: navy; }. CSS, tak jak HTML, nie jest językiem programowania.

Dla SEO ten podział ma praktyczny skutek. Treść, którą Google ma zrozumieć, powinna być w HTML zapisana tekstem. Wszystko, co pojawia się dopiero po wykonaniu skryptu, Google musi najpierw wyrenderować.

Które elementy HTML mają znaczenie dla SEO?

Najwięcej znaczą elementy, z których Google bierze tytuł i opis wyniku, instrukcje indeksowania oraz informacje o linkach i obrazach. Tabela zbiera, co mówi o nich dokumentacja Google.

Element	Co robi	Co mówi Google
<title>	tytuł strony	jedno ze źródeł, z których Google buduje link tytułowy w wynikach; oficjalnego limitu długości nie ma, za długi tytuł zostanie przycięty
<meta name="description">	krótki opis strony	Google pokazuje go tylko czasem, gdy lepiej opisuje stronę niż fragment treści; limitu długości też nie ma
<meta name="robots">	instrukcje dla robotów, np. noindex	noindex usuwa stronę z wyników, ale robot musi móc ją pobrać: na stronie zablokowanej w robots.txt Google tej instrukcji nie zobaczy
<h1> do <h6>	nagłówki	pomagają użytkownikom poruszać się po stronie; idealnej liczby nagłówków nie ma
<a href>	link	Google odkrywa tylko linki zapisane jako <a> z atrybutem href; tekst linku mówi, co jest pod adresem
alt w <img>	opis obrazu	Google używa go razem z analizą obrazu, żeby zrozumieć, co obraz przedstawia; upychanie fraz w alt grozi uznaniem za spam
<meta name="keywords">	lista słów kluczowych	Google go nie używa, nie wpływa na indeksowanie ani na pozycje

W projekcie dla camelcamp.pl porządkowaliśmy nagłówki, regułę noindex, mapę witryny i linkowanie między wpisami, czyli elementy kodu, z których Google odczytuje stronę.

Tytuł i opis Google traktuje jako wskazówkę, a nie polecenie. Gdy tytuł jest pusty albo nieaktualny, wyszukiwarka zbuduje własny z nagłówków, treści i tekstu linków prowadzących do strony. Opisy obrazów warto pisać dla człowieka: krótko, rzeczowo, bez upychania słów kluczowych. Więcej o tytułach i opisach znajdziesz we wpisie Czym są meta tagi i jaki mają wpływ na SEO?

Jak Google i asystenci AI czytają HTML?

Google czyta HTML w trzech krokach. Najpierw Googlebot pobiera stronę i zbiera z kodu linki. Potem renderuje ją w przeglądarce Chromium, czyli wykonuje JavaScript. Na końcu Google indeksuje wyrenderowany HTML.

Z tego wynikają trzy praktyczne zasady:

• Linki zapisuj jako <a href="adres">. Przycisku, który przenosi na inną stronę wyłącznie skryptem, Google może nie odkryć.
• Nie wstawiaj noindex do pierwotnego kodu strony, którą chcesz mieć w wynikach. Gdy Google widzi noindex, może pominąć renderowanie, więc usunięcie tagu skryptem może nie zadziałać.
• Ważne obrazy wstawiaj elementem <img>. Google nie indeksuje obrazów dodanych w CSS jako tło.

Te same podstawy dotyczą AI Overviews i trybu AI w Google. Google pisze, że funkcje AI nie wymagają dodatkowej optymalizacji, osobnych plików ani specjalnych znaczników: strona musi być zaindeksowana i móc pokazywać się w wynikach z fragmentem opisu. Google zaleca też, żeby ważne treści były dostępne w formie tekstu.

HTML, który podaje treść tekstem, a nie obrazkiem albo skryptem, ułatwia jej odczytanie w zwykłych wynikach i w odpowiedziach AI. Dlatego czysty kod to jedna z podstaw widoczności w Google Search, na której opierają się pozostałe kanały Search Ecosystem™.

Czy musisz znać HTML, żeby prowadzić stronę firmy?

Nie musisz pisać HTML, ale warto umieć go przeczytać. Systemy CMS i kreatory stron generują kod za Ciebie: wpisujesz tytuł, treść i opis w polach formularza, a system zamienia je na znaczniki.

Ograniczenia zaczynają się tam, gdzie szablon nie daje dostępu do kodu. Typowe przykłady to nagłówek H1 ustawiony na logo zamiast na tytuł strony, brak pola na opis obrazu albo menu zbudowane skryptem bez zwykłych linków. Kiedy kreator wystarcza, a kiedy przeszkadza, opisujemy we wpisie Czy strony stworzone w kreatorach faktycznie są gorsze?

Podstawy HTML przydają się też w rozmowie z programistą albo agencją. Wiesz, o co pytać przy tytułach, nagłówkach czy atrybutach alt. Możesz też sam sprawdzić, czy zmiana rzeczywiście trafiła do kodu.

Jak sprawdzić HTML swojej strony?

Podstawowe sprawdzenie zajmuje kilkanaście minut i wymaga tylko przeglądarki.

1. Otwórz stronę i naciśnij Ctrl+U (w Chrome na Macu Cmd+Option+U), żeby zobaczyć kod źródłowy.
2. Wyszukaj <title> i sprawdź, czy tytuł opisuje tę konkretną podstronę, a nie powtarza samej nazwy firmy.
3. Wyszukaj name="description" i przeczytaj opis tak, jak przeczyta go klient w wynikach Google.
4. Wyszukaj noindex. Na stronach, które mają być w Google, nie powinno go być.
5. Sprawdź, czy główny tytuł strony jest oznaczony jako H1 i czy kolejne nagłówki układają się w logiczny spis treści.
6. Wyszukaj <img i sprawdź, czy ważne obrazy mają atrybut alt z opisem.
7. Porównaj kod źródłowy z widokiem w narzędziach deweloperskich (F12). Jeśli treść albo linki są tylko w drugim widoku, Google musi je najpierw wyrenderować.

Najważniejsze wnioski.

HTML to fundament, na którym stoją wygląd, funkcje i widoczność strony. Nie musisz go pisać, ale warto wiedzieć, gdzie w kodzie są tytuł, opis, nagłówki, linki i opisy obrazów, bo z nich korzysta Google.

Problemy z widocznością rzadko wynikają z samej nieznajomości HTML. Częściej powodują je ustawienia szablonu i skrypty, które ukrywają treść albo linki przed robotem.

Co dalej: przejdź listę kontrolną na stronie głównej i na jednej stronie oferty. Jeśli na obu znajdziesz ten sam błąd, poprawka należy do szablonu, a nie do pojedynczej podstrony.

Najczęstsze pytania.

W jakim programie napisać stronę w HTML?

Wystarczy dowolny edytor tekstu: plik zapisuje się z rozszerzeniem .html i otwiera w przeglądarce. W praktyce programiści używają edytorów kodu, które podświetlają składnię i podpowiadają znaczniki.

Czym różni się HTML od HTML5?

HTML5 to nazwa współczesnej wersji języka, a nie osobny język. Deklaracja doctype html na początku pliku mówi przeglądarce, żeby czytała dokument według aktualnego standardu.

Czy błędy w kodzie HTML obniżają pozycje w Google?

Sama niezgodność ze standardem zwykle nie jest problemem, bo Google zakłada, że duża część sieci nie ma poprawnego HTML. Szkodzą błędy, przez które treść albo linki nie trafiają do wyrenderowanej strony.