HTML (HyperText Markup Language) to język znaczników, w którym napisana jest każda strona internetowa – definiuje strukturę i treść: nagłówki, akapity, linki, obrazy, tabele, formularze. Gdy otwierasz dowolną stronę w przeglądarce, przeglądarka pobiera plik HTML z serwera i renderuje go wizualnie. HTML to szkielet strony, CSS to wygląd (kolory, układ, fonty), a JavaScript to interakcje (animacje, formularze, dynamiczne treści). Te trzy technologie razem tworzą każdą stronę w internecie.
Jak działa HTML
HTML to nie język programowania – to język znaczników (markup). Nie wykonuje logiki (pętli, warunków) – opisuje strukturę dokumentu za pomocą tagów (znaczników). Przeglądarka czyta HTML od góry do dołu, interpretuje tagi i wyświetla treść. Tag <h1> mówi: „to jest nagłówek główny”. Tag <p>: „to jest akapit”. Tag <a href="...">: „to jest link”. Tag <img src="...">: „tu wstaw obrazek”.
Każdy tag ma otwarcie i zamknięcie: <p>Tekst akapitu</p>. Wyjątki (tagi samozamykające): <img>, <br>, <hr>, <input>. Tagi mogą mieć atrybuty: <a href="https://seomantyczny.pl" target="_blank">Link</a> – atrybut href (adres URL) i target (otwórz w nowej karcie).
Podstawowa struktura dokumentu HTML
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tytuł strony</title>
<meta name="description" content="Opis strony dla Google">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Nagłówek strony</h1>
<nav>Menu nawigacyjne</nav>
</header>
<main>
<article>
<h2>Tytuł artykułu</h2>
<p>Treść artykułu...</p>
</article>
</main>
<footer>Stopka</footer>
</body>
</html><!DOCTYPE html> – deklaracja wersji HTML (HTML5). <html lang="pl"> – język strony (ważne dla SEO i czytników ekranu). <head> – metadane: tytuł, opis, linki do CSS, favicona. <body> – treść widoczna na stronie. Tagi semantyczne (header, main, article, footer) – opisują znaczenie sekcji, nie tylko wygląd.
Najważniejsze tagi HTML
| Tag | Znaczenie | Przykład |
|---|---|---|
<h1>–<h6> |
Nagłówki (od najważniejszego do najmniej) | <h1>Tytuł</h1> |
<p> |
Akapit tekstu | <p>Treść...</p> |
<a> |
Link (hiperłącze) | <a href="url">tekst</a> |
<img> |
Obrazek | <img src="foto.jpg" alt="opis"> |
<ul>/<ol> |
Lista (nienumerowana/numerowana) | <ul><li>Element</li></ul> |
<table> |
Tabela | <table><tr><td>...</td></tr></table> |
<div> |
Kontener blokowy (bez znaczenia semantycznego) | <div class="box">...</div> |
<span> |
Kontener inline | <span class="red">tekst</span> |
<form> |
Formularz | <form action="/submit">...</form> |
<input> |
Pole formularza | <input type="text" name="email"> |
HTML a SEO
Nagłówki H1–H6. Google czyta hierarchię nagłówków, żeby zrozumieć strukturę treści. H1: jeden na stronę (tytuł artykułu). H2: sekcje główne. H3: podsekcje. Frazy kluczowe w nagłówkach: naturalnie, nie na siłę.
Meta title i description. <title> to tytuł w wynikach Google (max ~60 znaków). <meta name="description"> to opis pod tytułem (max ~155 znaków). Oba wpływają na CTR (klikalność w Google).
Alt text na obrazkach. <img alt="opis obrazka"> – Google nie „widzi” obrazków, czyta alt text. Dobry alt: opisowy, z frazą kluczową jeśli pasuje. Ważny dla dostępności (czytniki ekranu).
Dane strukturalne. Schema.org / JSON-LD – dodatkowy HTML (script) opisujący treść maszynowo: FAQ, recenzje, przepisy, artykuły. Google wyświetla rich snippets (rozszerzone wyniki) na podstawie danych strukturalnych.
Tagi semantyczne. <article>, <nav>, <header>, <footer>, <section>, <aside> – pomagają Google (i czytnikom ekranu) zrozumieć strukturę strony. Lepsze niż <div> wszędzie.
HTML5 – co nowego
HTML5 (obecny standard) dodał: tagi semantyczne (article, section, nav, header, footer, aside, main), multimedia (<video>, <audio> – bez Flasha), formularze (nowe typy input: email, date, range, color), Canvas (rysowanie grafiki 2D w JavaScript), localStorage/sessionStorage (przechowywanie danych w przeglądarce), geolokalizacja (API do wykrywania lokalizacji użytkownika).
Jak nauczyć się HTML
Najlepsze źródła (darmowe): MDN Web Docs (developer.mozilla.org) – oficjalna dokumentacja, najlepsza referencja. freeCodeCamp – interaktywny kurs (pisz HTML w przeglądarce, natychmiastowy feedback). W3Schools – proste tutoriale z „Try it yourself” (edytor w przeglądarce).
Czas nauki: podstawy HTML (tagi, struktura, formularze): 1–2 tygodnie. HTML + CSS (budowanie prostych stron): 1–2 miesiące. HTML + CSS + JavaScript (interaktywne strony): 3–6 miesięcy. HTML to najłatwiejsza technologia webowa – idealny start nauki web development.
Najczęściej zadawane pytania
Czy HTML jest językiem programowania?
Nie – HTML to język znaczników (markup language). Nie ma zmiennych, pętli, warunków, funkcji – nie „programujesz” w HTML, tylko opisujesz strukturę dokumentu. Języki programowania webowe to JavaScript (frontend), PHP/Python (backend). Ale: znajomość HTML jest absolutną podstawą web development – bez HTML nie istnieją strony internetowe.
Czy muszę znać HTML, żeby mieć stronę?
Nie – CMS-y (WordPress, Shopify, Webflow) pozwalają tworzyć strony bez pisania HTML. Ale: podstawowa znajomość HTML (tagi, struktura) pozwala: edytować treść w widoku kodu, naprawiać problemy z formatowaniem, lepiej rozumieć SEO techniczne, komunikować się z developerem. Min. 2h nauki HTML = ogromna wartość.
Czym różni się HTML od CSS i JavaScript?
HTML = struktura i treść (co jest na stronie: nagłówki, tekst, obrazy). CSS = wygląd (jak to wygląda: kolory, układ, fonty, animacje). JavaScript = zachowanie (co się dzieje: kliknięcia, formularze, dynamiczne ładowanie treści). Analogia: HTML to dom (ściany, dach, okna), CSS to wystrój wnętrz (farba, meble, oświetlenie), JavaScript to instalacja elektryczna i automatyka (włączniki, alarm, inteligentny dom).
