<body>

Widoczna część dokumentu: wszystko, co użytkownik zobaczy na stronie i z czym może wejść w interakcję.

Wyświetlanie: block
Znacznik zamykający: Wymagany
Dozwolona zawartość: Treść przepływu (flow content)

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Atrybuty
Atrybuty w praktyce
Domyślny CSS
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

HTML

<body>
  <header>
    <strong>CodeWorlds</strong>
  </header>
  <main>
    <h1>Twoja pierwsza lekcja</h1>
    <p>Wszystko, co widzisz w tym podglądzie, znajduje się w elemencie body.</p>
  </main>
  <footer>
    <small>© 2026 CodeWorlds</small>
  </footer>
</body>

Podgląd

Definicja i zastosowanie

Element <body> zawiera całą treść, którą widać w oknie przeglądarki: nagłówki, akapity, obrazy, formularze, a także skrypty dołączane na końcu strony. W dokumencie jest dokładnie jeden <body> i zawsze stoi zaraz po <head>.

Przeglądarki dodają wokół treści domyślny margines 8 pikseli. Dzięki temu tekst nie przykleja się do krawędzi okna, ale właśnie dlatego wiele arkuszy CSS zaczyna się od body { margin: 0; }. Tło ustawione na <body> wypełnia całe okno, o ile sam element <html> nie ma własnego tła.

Wszystkie elementy w środku dziedziczą krój pisma, rozmiar i kolor tekstu ustawione na <body>. To dobre miejsce na podstawową typografię całej strony.

Dawniej wygląd strony ustawiało się atrybutami, takimi jak bgcolor czy text. Są przestarzałe i zastąpił je CSS. Na <body> wciąż działają za to atrybuty zdarzeń całego okna, na przykład onload czy onbeforeunload.

Składnia

<body>
  …
</body>

Atrybuty

onload
kod JavaScript
Kod uruchamiany, gdy strona wczyta się w całości, razem z obrazami, stylami i skryptami. Na <body> oznacza to samo co zdarzenie load obiektu window, więc w nowym kodzie zwykle wygodniej napisać w skrypcie window.addEventListener("load", …).
onbeforeunload
kod JavaScript
Uruchamia się, gdy użytkownik chce opuścić stronę: zamyka kartę, odświeża ją albo przechodzi pod inny adres. Pozwala zapytać, czy na pewno wyjść, na przykład gdy w formularzu zostały niezapisane zmiany. Treści pytania nie ustawisz, przeglądarka pokazuje własny komunikat.
onhashchange
kod JavaScript
Reaguje na zmianę części adresu po znaku #, np. po kliknięciu odnośnika do sekcji na tej samej stronie. Przydaje się w prostych zakładkach i przewodnikach krok po kroku.
ononline / onoffline
kod JavaScript
Informują, że przeglądarka odzyskała albo straciła połączenie z siecią. Możesz w nich pokazać komunikat „Jesteś offline” i schować go po powrocie połączenia.
bgcolor, text, link, vlink, alink, background
przestarzałe
Dawne atrybuty wyglądu: kolor tła, tekstu i odnośników oraz obrazek w tle. Nie należą już do standardu. Te same efekty uzyskasz w CSS właściwościami background-color, color i background-image oraz selektorami a:link, a:visited i a:active.

Atrybut	Wartości	Opis
onload	kod JavaScript	Kod uruchamiany, gdy strona wczyta się w całości, razem z obrazami, stylami i skryptami. Na `<body>` oznacza to samo co zdarzenie `load` obiektu `window`, więc w nowym kodzie zwykle wygodniej napisać w skrypcie `window.addEventListener("load", …)`.
onbeforeunload	kod JavaScript	Uruchamia się, gdy użytkownik chce opuścić stronę: zamyka kartę, odświeża ją albo przechodzi pod inny adres. Pozwala zapytać, czy na pewno wyjść, na przykład gdy w formularzu zostały niezapisane zmiany. Treści pytania nie ustawisz, przeglądarka pokazuje własny komunikat.
onhashchange	kod JavaScript	Reaguje na zmianę części adresu po znaku `#`, np. po kliknięciu odnośnika do sekcji na tej samej stronie. Przydaje się w prostych zakładkach i przewodnikach krok po kroku.
ononline / onoffline	kod JavaScript	Informują, że przeglądarka odzyskała albo straciła połączenie z siecią. Możesz w nich pokazać komunikat „Jesteś offline” i schować go po powrocie połączenia.
bgcolor, text, link, vlink, alink, background	przestarzałe	Dawne atrybuty wyglądu: kolor tła, tekstu i odnośników oraz obrazek w tle. Nie należą już do standardu. Te same efekty uzyskasz w CSS właściwościami `background-color`, `color` i `background-image` oraz selektorami `a:link`, `a:visited` i `a:active`.

Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.

Atrybuty w praktyce

onload

kod JavaScript

Kod uruchamiany, gdy strona wczyta się w całości, razem z obrazami, stylami i skryptami. Na <body> oznacza to samo co zdarzenie load obiektu window, więc w nowym kodzie zwykle wygodniej napisać w skrypcie window.addEventListener("load", …).

HTML

<body onload="document.getElementById('status').textContent = 'Strona gotowa'">
  <p id="status">Wczytywanie…</p>
</body>

Domyślny CSS

Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:

CSS

body {
  display: block;
  margin: 8px;
}

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Jeśli tło lub zdjęcie ma sięgać krawędzi okna, wyzeruj margines: body { margin: 0; }.
Podstawowy krój pisma, rozmiar i kolor tekstu ustaw raz na <body>. Reszta elementów je odziedziczy.
Zamiast atrybutów zdarzeń w HTML używaj w skryptach addEventListener. Cały kod jest wtedy w jednym miejscu i łatwiej go utrzymać.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz HTML w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs