Znacznik <body> w HTML to kluczowy element każdej strony internetowej, odpowiedzialny za definiowanie i prezentację właściwej, widocznej zawartości witryny. To właśnie wewnątrz tego znacznika umieszczamy wszystkie elementy, które użytkownik może zobaczyć i z którymi może się interaktywnie zapoznać – teksty, obrazy, tabele, linki, nagłówki, formularze, multimedia i wiele innych.
Struktura znacznika <body>
Każdy poprawny dokument HTML składa się z kilku głównych sekcji:
<!DOCTYPE html>
<html>
<head>
<title>Przykładowa strona</title>
</head>
<body>
<!-- Tutaj znajduje się widoczna zawartość strony -->
</body>
</html>
Znacznik <body> otwiera się na początku części z treścią i zamyka dopiero po zakończeniu całej zawartości. Dozwolony jest tylko jeden taki znacznik w pojedynczym dokumencie.
Co może zawierać <body>?
Wewnątrz znacznika <body> możesz umieszczać wszystkie elementy widoczne dla użytkownika, m.in.:
- Nagłówki (
<h1>,<h2>, …,<h6>) – porządkują i hierarchizują treści; - Akapity tekstu (
<p>) – podstawowa forma prezentacji tekstu; - Obrazy (
<img>) – wstawianie grafik i ilustracji; - Listy (
<ul>,<ol>,<li>) – wypunktowania i listy numerowane; - Tabele (
<table>,<tr>,<td>) – uporządkowana prezentacja danych; - Hiperłącza (
<a>) – pozwalają nawigować po stronie lub do innych witryn; - Multimedia (
<video>,<audio>) – odtwarzanie dźwięku i obrazu; - Formularze (
<form>,<input>,<textarea>) – umożliwiają zbieranie danych od użytkownika; - Elementy interaktywne (
<button>,<details>,<summary>) – zwiększają funkcjonalność strony.
Przykłady zastosowań
Prosta strona powitalna
<body>
<h1>Witaj na mojej stronie!</h1>
<p>To jest przykładowy tekst widoczny dla użytkownika.</p>
</body>
Strona z obrazem i listą
<body>
<h2>Moje hobby</h2>
<ul>
<li>Fotografia</li>
<li>Podróże</li>
<li>Programowanie</li>
</ul>
<img src="hobby.jpg" alt="Zdjęcie przedstawiające moje hobby">
</body>
Formularz kontaktowy
<body>
<h2>Skontaktuj się ze mną</h2>
<form>
Imię: <input type="text" name="imie"><br>
Email: <input type="email" name="email"><br>
<input type="submit" value="Wyślij">
</form>
</body>
Atrybuty znacznika <body>
Znacznik <body> można rozbudować o dodatkowe atrybuty, które wpływają na wygląd lub zachowanie strony. Współczesne podejście zaleca zarządzanie wyglądem głównie poprzez CSS, jednak nadal użyteczne są atrybuty globalne, takie jak:
id– unikalny identyfikator,class– przypisanie do klasy CSS,style– bezpośrednie nadanie stylów,data-*– własne atrybuty do przechowywania danych.
Przykład ze stylem tła:
<body style="background-color: #f0f0f0;">
<h1>Przykład tła strony</h1>
</body>
Znaczenie i rekomendacje
- Bez elementu
<body>, żadna widoczna treść nie pojawi się w przeglądarce użytkownika, - stosowanie
<body>pozwala oddzielić część opisową dokumentu (sekcja<head>) od treści głównej, - umożliwia właściwe pozycjonowanie, stylowanie i zarządzanie dostępnością strony.
Znacznik <body> to podstawowy element HTML, bez którego żadna strona nie może funkcjonować prawidłowo. To fundament, na którym budowana jest cała widoczna struktura i zawartość serwisu internetowego.
