Poznaj Programowanie

Tagi HTML: body

Piotr Grochal 6 min. czytania

Znacznik <body> to fundamentalny element struktury HTML, który definiuje ciało dokumentu – miejsce, gdzie umieszczamy całą widoczną dla użytkownika treść strony.

Może występować tylko raz w poprawnym dokumencie i znajduje się bezpośrednio po sekcji <head> wewnątrz elementu <html>.

Podstawowa struktura dokumentu HTML z <body>

Każdy dokument HTML zaczyna się od deklaracji <!DOCTYPE html>, po której następują elementy <html>, <head> oraz <body>.

Oto podstawowy przykład pełnego dokumentu HTML:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="description" content="Przykładowa strona z użyciem znacznika body">
<title>Przykładowa strona HTML</title>
</head>
<body>
<h1>Witaj w moim pierwszym dokumencie HTML!</h1>
<p>To jest <strong>pierwszy akapit</strong> w sekcji body. Tutaj możesz umieścić tekst, obrazy i inne elementy.</p>
<img src="obrazek.jpg" alt="Przykładowy obrazek">
<a href="https://example.com">Link do innej strony</a>
</body>
</html>

Sekcja <body> zawiera elementy widoczne w przeglądarce, takie jak nagłówki, akapity, obrazy i linki.

Do czego służy znacznik <body> – kluczowe role

<body> to “ciało” strony – miejsce na całą treść widoczną dla odwiedzających. Nie zawiera metadanych (te umieszczamy w <head>), lecz elementy interaktywne i wizualne:

  • treść tekstowa – paragrafy (<p>), nagłówki (<h1> do <h6>), listy (<ul>, <ol>);
  • multimedia – obrazki (<img>), wideo (<video>), audio (<audio>);
  • interaktywność – linki (<a>), formularze (<form>), tabele (<table>);
  • struktura – sekcje (<div>, <section>), bloki cytatów (<blockquote>).

W HTML5 element <body> jest bezpośrednim dzieckiem <html> i następuje po <head>. Znacznik otwierający może być w pewnych sytuacjach pominięty, a zamykający jest opcjonalny, jednak obydwa są zalecane dla czytelności i zgodności z narzędziami.

Atrybuty znacznika <body> – dawne i współczesne

W starszych wersjach HTML (np. HTML 4.01) <body> obsługiwał atrybuty wizualne. Dzisiaj są one zdeprecjonowane – ich rolę przejął CSS. Oto najczęściej spotykane, dziś niewspierane atrybuty i ich zamienniki w CSS:

Atrybut Opis (zdeprecjonowany) Współczesna alternatywa (CSS)
bgcolor Kolor tła strony body { background-color: #ede48e; }
text Kolor tekstu body { color: #333; }
link Kolor nieodwiedzonych linków a:link { color: blue; }
alink Kolor aktywnych linków a:active { color: red; }
vlink Kolor odwiedzonych linków a:visited { color: purple; }
background Obrazek tła body { background-image: url('bg.jpg'); }

Przykład z CSS zamiast atrybutów (zalecane dla nowoczesnego HTML5):

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f8ff;
color: #333;
font-family: Arial, sans-serif;
margin: 20px;
}
a:link { color: #0066cc; }
a:visited { color: #800080; }
</style>
</head>
<body>
<h2>Strona ze stylami CSS w body</h2>
<p>Tło jest jasnoniebieskie, a linki mają kolory zdefiniowane w CSS.</p>
<a href="#sekcja">Przejdź do sekcji</a>
</body>
</html>

CSS przenosi stylizację z HTML do sekcji <head>, dzięki czemu kod jest czystszy i łatwiejszy w utrzymaniu.

Elementy dozwolone wewnątrz <body>

<body> może zawierać szeroki wachlarz elementów treściowych. Oto najważniejsze kategorie z przykładami:

  • nagłówki i tekst – <h1>–<h6>, <p>, <pre>;
  • listy – <ul>, <ol>, <dl>;
  • struktura – <div>, <section>, <article>, <header>, <footer>;
  • linki i multimedia – <a>, <img>, <video>;
  • formularze i tabele – <form>, <table>, <fieldset>;
  • inne – <hr>, <blockquote>, <script> (JavaScript), <noscript>.

Rozbudowany przykład, który pokazuje semantyczną strukturę HTML5 wewnątrz <body>:

<body>
<header>
<h1>Mój blog programistyczny</h1>
</header>

<main>
<article>
<h2>Wstęp do HTML</h2>
<p>W sekcji <strong>&lt;body&gt;</strong> umieszczamy całą treść.</p>

<ul>
<li>Paragrafy i nagłówki</li>
<li><img src="ikona.png" alt="Ikona"> Obrazki</li>
<li>Linki: <a href="https://kurshtml.edu.pl">Kurs HTML</a></li>
</ul>

<table>
<tr><th>Element</th><th>Opis</th></tr>
<tr><td>&lt;p&gt;</td><td>Akapit</td></tr>
</table>
</article>
</main>

<footer>
<p>&copy; 2026 Autor</p>
</footer>

<script>
console.log("JavaScript w body działa!");
</script>
</body>

Wydarzenia JavaScript i globalne atrybuty w <body>

W HTML5 <body> może mieć atrybuty zdarzeń (event handlers), np. onclick, onload, onresize. To wygodne przy prostych skryptach, choć lepiej używać addEventListener i separacji logiki od HTML.

Przykład z JS:

<body onload="alert('Strona załadowana!')">
<button onclick="document.body.style.backgroundColor='lightgreen';">Zmień tło</button>
<p>Kliknij przycisk, by zobaczyć efekt JS na body.</p>
</body>

Przydatne zdarzenia to m.in. onload, onunload, onresize, onscroll – często stosowane na stronach interaktywnych.

Najczęstsze błędy i dobre praktyki

Oto pułapki i rekomendacje, o których warto pamiętać podczas pracy z <body>:

  • błąd – wiele znaczników <body> w jednym dokumencie; to niedozwolone, przeglądarka uwzględni tylko pierwszy;
  • błąd – umieszczanie metadanych (np. <meta>) w <body>; metadane należą do <head>;
  • dobra praktyka – używaj semantycznych elementów HTML5 (<main>, <article>, <nav>, <footer>) zamiast samych <div>;
  • optymalizacja – dodaj lang="pl" do <html> i komplet metadanych w <head> (SEO, dostępność);
  • responsywność – stylizuj <body> w CSS i używaj @media queries dla urządzeń mobilnych.

Dla responsywności warto zacząć od prostych reguł bazowych i media queries:

body {
margin: 0;
padding: 0;
font-size: 16px; /* Bazowa czcionka */
}
@media (max-width: 768px) {
body { font-size: 14px; }
}