Peran Tag Body dalam Dokumen HTML

by

Apa Itu HTML Tag Body?

HTML tag <body> adalah elemen utama dalam dokumen HTML yang berisi seluruh konten yang ditampilkan di halaman web, seperti teks, gambar, video, link, dan elemen lainnya.

Semua yang dilihat pengguna di browser berada di dalam tag body.

Contoh konten yang biasanya ada di dalam <body>:

  • Teks / paragraf
  • Gambar
  • Video
  • Link
  • Tombol
  • Tabel
  • Formulir

Browser seperti Google Chrome, Mozilla Firefox, atau Microsoft Edge akan menampilkan isi tag sebagai halaman yang dilihat pengguna.

Struktur Dasar HTML Tag Body

Berikut contoh struktur dasar dokumen HTML dengan tag body:

<!DOCTYPE html>
<html>
<head>
  <title>Judul Halaman</title>
</head>
<body>
  <h1>Halo Dunia</h1>
  <p>Ini adalah konten halaman.</p>
</body>
</html>

Tag body membungkus seluruh isi halaman yang ditampilkan ke pengguna.

Contoh Penggunaan HTML Tag Body

1. Menampilkan Konten Teks Dasar

Tag body digunakan untuk menampilkan teks seperti heading dan paragraf.

<body>
  <h1>Website Saya</h1>
  <p>Selamat datang di website.</p>
</body>

Penjelasan:

  • <body> → bagian utama halaman yang ditampilkan di browser
  • <h1> → judul utama halaman
  • <p> → paragraf teks

Semua konten yang ingin ditampilkan kepada pengunjung website biasanya diletakkan di dalam tag body.

Contoh HTML dan CSS Lengkap: Konten Teks Dasar

<!DOCTYPE html>
<html lang="id">
<head>
	<meta charset="UTF-8">
	<title>Contoh Body</title>
</head>

<body>
	<h1>Website Saya</h1>

	<p>Selamat datang di website.</p>
</body>
</html>

Penjelasan:

  • <!DOCTYPE html> → memberi tahu browser bahwa ini dokumen HTML
  • <html> → elemen utama halaman HTML
  • <head> → berisi informasi halaman (judul, meta, dll)
  • <body> → tempat semua konten yang akan ditampilkan di halaman web.

2. Menambahkan Gambar dan Media

Di dalam body, Anda bisa menambahkan gambar, audio, dan video.

<body>
  <img src="/example/foto.jpg" alt="Foto">
</body>

Cara kerja kode ini

Ketika browser membaca kode ini:

  1. Masuk ke bagian <body>
  2. Menemukan tag <img>
  3. Mengambil file foto.jpg
  4. Menampilkannya di halaman

Jika file foto.jpg tidak ada, maka teks "Foto" dari alt akan muncul.

Contoh HTML dan CSS Lengkap: Gambar Didalam Body

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Gambar HTML Body</title>
</head>
<body>
    <h1>Contoh Menampilkan Gambar</h1>

    <p>Berikut adalah contoh gambar yang ditampilkan menggunakan tag img.</p>

    <img src="/example/foto.jpg" alt="Foto Pemandangan">
</body>
</html>

Hasilnya

Halaman akan menampilkan:

  • Judul
  • Deskripsi
  • Gambar dari file foto.jpg

3. Membuat Struktur Halaman Lengkap

Body dapat berisi berbagai elemen untuk membangun layout halaman.

<body>
  <header>Header</header>
  <main>Konten utama</main>
  <footer>Footer</footer>
</body>

berfungsi untuk menyusun struktur dasar halaman web agar lebih rapi dan semantik (mudah dipahami oleh browser, developer, dan mesin pencari).

Contoh HTML dan CSS Lengkap: Struktur Halaman

<!DOCTYPE html>
<html lang="id">
<head>
	<meta charset="UTF-8">
	<title>Contoh Struktur Halaman</title>
</head>

<body>
	<header>
	  <h1>Website Saya</h1>
	  <p>Belajar HTML & CSS</p>
	</header>

	<main>
	  <h2>Konten Utama</h2>
	  <p>
	  Ini adalah area konten utama website.  
	  Di sini biasanya berisi artikel, berita, atau informasi penting.
	  </p>
	</main>

	<footer>
	  <p>© 2026 Website Saya</p>
	</footer>
</body>
</html>

Penjelasan Struktur HTML

1. <body>

  • Bagian utama dari halaman HTML yang menampilkan semua konten yang terlihat di browser.
  • Semua elemen seperti teks, gambar, menu, dan lainnya berada di dalam <body>.

2. <header>

  • Digunakan untuk bagian atas halaman.

  • Biasanya berisi:

    • Judul website
    • Logo
    • Menu navigasi

Contoh isi:

  • Nama website
  • Menu Home, About, Contact

3. <main>

  • Bagian konten utama halaman.
  • Hanya ada satu <main> dalam satu halaman.

  • Biasanya berisi:

    • Artikel
    • Konten utama
    • Informasi penting halaman

4. <footer>

  • Bagian paling bawah halaman.

  • Biasanya berisi:

    • Copyright
    • Kontak
    • Link tambahan
    • Sosial media

Atribut Penting HTML Tag Body

Tag body mendukung atribut global HTML berikut:

Atribut Fungsi Contoh
id Identitas unik elemen <body id="home">
class Styling dengan CSS <body class="main">
style Styling langsung <body style="background:#fff">
lang Bahasa halaman <body lang="id">
title Keterangan tambahan <body title="halaman utama">

Atribut Lanjutan HTML Tag Body

Atribut Fungsi Contoh
onload Menjalankan script saat halaman dimuat <body onload="init()">
onunload Script saat meninggalkan halaman <body onunload="cleanup()">
onresize Script saat ukuran berubah <body onresize="resize()">
onclick Script saat diklik <body onclick="klik()">
data-* Menyimpan data kustom <body data-theme="dark">

Manfaat HTML Tag Body

  • Menampung seluruh konten halaman
  • Mengatur struktur tampilan website
  • Menjadi pusat interaksi pengguna
  • Mendukung styling dan script global

Best Practice Penggunaan Tag Body

  • Gunakan hanya satu tag body per dokumen
  • Letakkan setelah elemen head
  • Susun konten dengan struktur semantik
  • Hindari script berlebihan di body

Kesimpulan

HTML tag <body> adalah inti dari halaman web yang menampung seluruh konten yang terlihat oleh pengguna. Penggunaan yang tepat membantu membangun struktur website yang rapi dan mudah dikelola.

Untuk memahami dasar tag HTML lebih lengkap, silakan baca dokumentasi tag HTML lengkap.

Leave a Comment

Responsive — 100%