Element <body> w HTML jest kluczowym składnikiem każdej strony internetowej i pełni rolę głównego kontenera dla wszystkich widocznych treści prezentowanych użytkownikowi w przeglądarce. To właśnie w obrębie znacznika <body> umieszczane są teksty, obrazy, nagłówki, linki, tabele, formularze, multimedia i wszelkie inne elementy, z którymi użytkownik może wchodzić w interakcję.
Gdzie umieszcza się element <body>?
- Dokument HTML zawiera tylko jeden element
<body>. - Znacznik
<body>zawsze występuje jako drugi element potomny całego dokumentu, tuż za elementem<head>. - Struktura podstawowego dokumentu HTML wygląda następująco:
<!DOCTYPE html>
<html>
<head>
<title>Przykładowa strona</title>
</head>
<body>
<!-- Tutaj znajduje się cała widoczna treść strony -->
</body>
</html>
Co umieszczamy w <body>?
Wszystkie elementy wyświetlane na stronie muszą znajdować się w sekcji <body>. Są to m.in.:
- Nagłówki –
<h1>,<h2>, …<h6>; - Akapity –
<p>; - Listy –
<ul>,<ol>,<li>; - Obrazy –
<img>; - Linki –
<a>; - Formularze –
<form>,<input>,<textarea>,<button>; - Tabele –
<table>,<tr>,<td>,<th>; - Multimedia:
<video>,<audio>; - Skrypty i elementy interaktywne.
Podstawowy przykład zastosowania
<!DOCTYPE html>
<html>
<head>
<title>Moja pierwsza strona</title>
</head>
<body>
<h1>Witaj świecie!</h1>
<p>To jest moja pierwsza strona internetowa.</p>
<img src="przykladowy-obrazek.jpg" alt="Opis obrazka">
<a href="https://przyklad.pl">Odwiedź naszą stronę</a>
</body>
</html>
Każdy z powyższych elementów będzie widoczny dla użytkownika – wszystko, co chcesz pokazać odbiorcy twojej strony, należy umieścić właśnie tutaj.
Atrybuty i rozszerzone możliwości <body>
Choć <body> nie wymaga żadnych obowiązkowych atrybutów, obsługuje globalne atrybuty HTML (np. class, id, style) oraz szereg tzw. atrybutów zdarzeń, które umożliwiają reagowanie na akcje użytkownika lub zdarzenia systemowe.
Przykładowe atrybuty zdarzeń obsługiwane przez <body>:
onload– kod wywoływany po pełnym załadowaniu strony,onunload– kod wywoływany przy zamykaniu lub odświeżaniu strony,onafterprint,onbeforeprint– zdarzenia związane z drukowaniem strony,ononline,onoffline– zdarzenia związane ze zmianą stanu połączenia sieciowego.
Przykład użycia atrybutów zdarzeń:
<body onload="alert('Strona wczytana!')">
<h2>Witamy na stronie!</h2>
</body>
Po załadowaniu strony wyświetli się okienko z komunikatem.
Dobre praktyki
- Unikaj więcej niż jednego znacznika
<body>– jest to niezgodne ze standardami HTML.; - Stosuj odpowiednią strukturę dokumentu – element
<body>nie może poprzedzać elementu<head>; - Wszystkie style CSS oraz skrypty JavaScript najlepiej umieszczaj w sekcji
<head>lub na końcu<body>, a nie luzem w treści..
Reasumując
Znacznik <body> stanowi fundament każdej strony WWW – to w nim znajduje się to, co użytkownik widzi oraz z czym wchodzi w interakcję. Jego prawidłowe stosowanie i odpowiednia struktura dokumentu HTML mają kluczowe znaczenie zarówno dla wyświetlania zawartości, jak i dla dalszego rozwoju oraz optymalizacji strony internetowej.
