← Wróć do bloga

Podstawy HTML — kompletny przewodnik dla początkujących

HTML (HyperText Markup Language) to język znaczników, na którym opiera się każda strona internetowa — to on nadaje treści strukturę, którą przeglądarka potrafi zrozumieć i wyświetlić. W tym przewodniku poznasz podstawy: strukturę dokumentu, najważniejsze znaczniki, semantykę HTML5 i dobre praktyki, które przydadzą się zarówno przy pierwszej stronie, jak i przy pracy z WordPressem czy Elementorem.

📑 Spis treści

Czym jest HTML i do czego służy?
Podstawowa struktura dokumentu HTML
Najważniejsze tagi i elementy
Semantyczny HTML5
Atrybuty HTML
Formularze — podstawy
Obrazy i linki
Dobre praktyki i najczęstsze błędy
Co dalej? CSS i JavaScript

1. Czym jest HTML i do czego służy?

HTML opisuje strukturę strony — czyli co jest nagłówkiem, co akapitem, co linkiem, a co przyciskiem. Nie odpowiada za wygląd (od tego jest CSS) ani za interakcje (od tego jest JavaScript), ale bez niego przeglądarka nie miałaby czego wyświetlić. Każda strona, którą odwiedzasz — w tym ta — zaczyna się od pliku HTML.

Dokument HTML składa się z elementów, które budowane są ze znaczników otwierających i zamykających, np. <p> i </p> dla akapitu. Między nimi umieszczamy treść.

2. Podstawowa struktura dokumentu HTML

Każdy dokument HTML ma stały szkielet. Oto minimalna, poprawna strona:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Moja pierwsza strona</title>
</head>
<body>
  <h1>Witaj, świecie!</h1>
  <p>To jest mój pierwszy akapit.</p>
</body>
</html>

<!DOCTYPE html> — informuje przeglądarkę, że to dokument HTML5.
<html> — główny element obejmujący całą stronę; atrybut lang określa język treści.
<head> — metadane strony: tytuł, kodowanie znaków, linki do CSS, ustawienia SEO. Nie jest widoczny na stronie.
<body> — cała widoczna zawartość strony: teksty, obrazy, przyciski, formularze.

3. Najważniejsze tagi i elementy

Kilkanaście znaczników pokrywa większość codziennych potrzeb. Oto te, które warto znać na pamięć:

Tag	Zastosowanie
`<h1>`–`<h6>`	Nagłówki, od najważniejszego (h1) do najmniej ważnego (h6)
`<p>`	Akapit tekstu
`<a href="...">`	Link do innej strony lub sekcji
`<img src="...">`	Obraz (znacznik samozamykający się)
`<ul>` / `<ol>` / `<li>`	Listy nieuporządkowane, uporządkowane i ich elementy
`<div>`	Uniwersalny kontener blokowy, bez własnego znaczenia semantycznego
`<span>`	Uniwersalny kontener liniowy — do stylowania fragmentu tekstu
`<button>`	Klikalny przycisk
`<strong>` / `<em>`	Wytłuszczenie / kursywa z semantycznym naciskiem

4. Semantyczny HTML5

Zamiast opakowywać wszystko w <div>, HTML5 wprowadził znaczniki, które od razu mówią przeglądarce (i czytnikom ekranu, i Google) czym jest dany fragment strony:

<header>
  <nav>...menu nawigacyjne...</nav>
</header>

<main>
  <article>
    <h1>Tytuł artykułu</h1>
    <p>Treść...</p>
  </article>

  <aside>
    <p>Treść poboczna, np. link do podobnych wpisów</p>
  </aside>
</main>

<footer>
  <p>&copy; 2026 Moja Firma</p>
</footer>

Dlaczego to ważne? Semantyczny HTML popraw ia dostępność (screen readery lepiej rozumieją stronę), SEO (Google łatwiej ocenia strukturę treści) i czytelność kodu dla innych deweloperów.

5. Atrybuty HTML

Atrybuty dodają elementom dodatkowe informacje lub zachowania. Zapisuje się je wewnątrz znacznika otwierającego, w formie nazwa="wartość":

<a href="https://mkrysiak.pl" target="_blank" rel="noopener">Odwiedź stronę</a>
<img src="zdjecie.jpg" alt="Opis zdjęcia dla czytników ekranu" width="600">
<div class="karta" id="karta-glowna">...</div>

class — przypisuje element do grupy stylowanej w CSS (można użyć wielokrotnie na stronie)
id — unikalny identyfikator elementu (tylko raz na stronę) — tak właśnie działają linki w spisie treści powyżej
alt — tekst alternatywny obrazu, kluczowy dla dostępności i SEO
href — adres docelowy linku

6. Formularze — podstawy

Formularze zbierają dane od użytkownika — od prostego pola wyszukiwania po formularz kontaktowy:

<form action="/wyslij" method="post">
  <label for="email">Twój e-mail</label>
  <input type="email" id="email" name="email" required>

  <label for="wiadomosc">Wiadomość</label>
  <textarea id="wiadomosc" name="wiadomosc"></textarea>

  <button type="submit">Wyślij</button>
</form>

Każde pole warto połączyć z etykietą przez <label for="..."> odpowiadające id pola — to nie tylko ułatwia klikanie w pole, ale też jest wymogiem dostępności.

7. Obrazy i linki

<img> to znacznik, który nie ma zamknięcia — nie potrzebuje </img>. Zawsze dodawaj atrybut alt, nawet jeśli obraz jest czysto dekoracyjny (wtedy zostaw pusty: alt="").

Linki (<a>) mogą prowadzić do innej strony, innej sekcji tej samej strony (przez #id, jak w spisie treści na górze tego artykułu), adresu e-mail (mailto:) czy numeru telefonu (tel:).

8. Dobre praktyki i najczęstsze błędy

Używaj tylko jednego <h1> na stronę — to główny tytuł, kolejne poziomy (h2, h3…) budują hierarchię pod nim.
Nie pomijaj poziomów nagłówków (np. z h2 od razu do h4) — psuje to strukturę dla czytników ekranu.
Zawsze zamykaj znaczniki, które tego wymagają, i zagnieżdżaj je poprawnie — <p><strong>tekst</strong></p>, nie na odwrót.
Nie używaj <div> tam, gdzie pasuje znacznik semantyczny (<nav>, <button>, <article>).
Waliduj kod — np. narzędziem W3C Markup Validator — to szybko wyłapuje literkówki i błędy składni.

9. Co dalej? CSS i JavaScript

HTML daje strukturę, ale to dopiero początek. Kolejny naturalny krok to CSS — język, który odpowiada za wygląd (kolory, układ, typografię), a później JavaScript, który dodaje interaktywność. Jeśli pracujesz w WordPressie, dobra znajomość HTML bardzo pomaga również przy pracy z Elementorem czy blokami Gutenberga — zawsze możesz doprecyzować strukturę własnym kodem tam, gdzie edytor wizualny ma ograniczenia.

Podsumowanie: HTML to szkielet każdej strony internetowej — opanowanie jego podstaw to fundament, na którym buduje się dalszą wiedzę o CSS, JavaScript i systemach takich jak WordPress. Jeśli potrzebujesz profesjonalnej strony internetowej i nie chcesz uczyć się tego wszystkiego samodzielnie — skontaktuj się, chętnie pomogę.

O autorze

Michał Krysiak

Projektuję strony internetowe, które realnie wspierają biznes — od pomysłu po wdrożenie. Na tym blogu dzielę się wiedzą z pracy przy prawdziwych projektach.

Porozmawiajmy o Twoim projekcie →

Potrzebujesz profesjonalnej strony internetowej?

Zajmuję się projektowaniem stron, które nie tylko dobrze wyglądają, ale realnie pracują na wyniki biznesowe.

Skontaktuj się →