BAB 4: Elemen HTML
Memahami elemen, tag pembuka, tag penutup, dan konten di antara keduanya.
Di bab sebelumnya, kita sudah menyusun kerangka HTML yang lengkap — dari <!DOCTYPE html> sampai tag penutup </html>. Di dalam <body>, ada dua elemen yang kita sisipkan: <h1> dan <p>. Keduanya tampak sederhana, tapi mengandung pola yang digunakan oleh hampir semua elemen HTML. Memahami pola ini berarti kamu sudah memahami 80% dari cara HTML bekerja.
Anatomi Sebuah Elemen
Setiap elemen HTML dibangun dari tiga komponen:
<h1>Selamat datang</h1>
^ ^
tag pembuka tag penutup
|
+-- konten di antara keduanya- Tag pembuka (
<h1>) — menandai di mana elemen dimulai. Ditulis dengan nama elemen di antara tanda kurung sudut. - Konten (
Selamat datang) — isi dari elemen. Bisa berupa teks, elemen lain, atau keduanya. - Tag penutup (
</h1>) — menandai di mana elemen berakhir. Sama seperti tag pembuka, dengan tambahan garis miring (/) sebelum nama elemen.
Ketiga komponen ini bersama-sama disebut elemen. Tag pembuka dan tag penutup adalah penanda batas; konten adalah isi yang ada di antara keduanya.
Elemen Bersarang
Konten sebuah elemen bisa berisi elemen lain. Ini yang disebut nesting — elemen di dalam elemen. Struktur kerangka HTML yang kita tulis di Bab 3 sepenuhnya dibangun dari nesting:
<!-- index.html -->
<!DOCTYPE html>
<html lang="id">
<head>
<title>Profil Saya</title>
</head>
<body>
<h1>Selamat datang</h1>
<p>Ini adalah halaman HTML pertama saya.</p>
</body>
</html><body> mengandung <h1> dan <p>. <html> mengandung <head> dan <body>. <head> mengandung <title>. Setiap elemen yang berada di dalam elemen lain disebut child (anak), dan elemen yang menampungnya disebut parent (induk).
Urutan tag pembuka dan penutup harus simetris. Jika <b> dibuka di dalam <p>, maka </b> harus ditutup sebelum </p>. Menulis <p><b>teks</p></b> adalah kesalahan nesting yang bisa menyebabkan browser menginterpretasikan struktur halaman dengan cara yang tidak terduga.
Elemen Kosong
Tidak semua elemen memiliki konten. Beberapa elemen dirancang untuk menyisipkan sesuatu ke halaman tanpa perlu “membungkus” teks apa pun. Elemen seperti ini disebut void elements atau elemen kosong.
Contoh yang paling sering dijumpai adalah <br> untuk baris baru:
<!-- index.html -->
<p>Baris pertama.<br>Baris kedua.</p><br> tidak punya konten dan tidak perlu tag penutup. Elemen kosong lainnya yang akan sering kamu temui:
<img>— menyisipkan gambar<input>— membuat field input<meta>— informasi metadata di dalam<head><link>— menghubungkan file eksternal seperti CSS<hr>— membuat garis horizontal pemisah
Dalam HTML5, menulis <br> dan <br/> sama-sama valid. Garis miring di akhir (<br/>) adalah konvensi dari XHTML yang masih sering terlihat di kode lama, tapi tidak diperlukan di HTML5.
Huruf Besar vs Huruf Kecil
HTML tidak membedakan huruf besar dan kecil dalam nama tag — <P>, <p>, dan <P> semuanya mengacu pada elemen paragraf yang sama. Tapi standar HTML5 dan konvensi yang berlaku di industri adalah selalu menulis nama tag dalam huruf kecil.
<!-- Tidak konsisten, hindari -->
<P>Paragraf dengan huruf besar.</P>
<H1>Judul dengan huruf besar</H1>
<!-- Konsisten dan sesuai standar -->
<p>Paragraf dengan huruf kecil.</p>
<h1>Judul dengan huruf kecil</h1>Alasannya sederhana: huruf kecil lebih mudah dibaca, lebih konsisten dengan atribut HTML, dan jika kamu suatu saat menulis XML atau XHTML, huruf kecil adalah keharusan — bukan pilihan.
Jangan Lewatkan Tag Penutup
Browser modern cukup toleran terhadap kode HTML yang tidak sempurna. Jika kamu lupa menutup </p>, browser biasanya tetap menampilkan konten dengan benar. Tapi “terlihat benar” tidak berarti “benar secara teknis”:
<!-- index.html -->
<p>Paragraf pertama tanpa tag penutup
<p>Paragraf kedua</p>Browser akan menampilkan ini seperti dua paragraf terpisah, seolah tag penutup pertama ada. Tapi kalau kamu kemudian menambahkan CSS atau JavaScript yang bergantung pada struktur DOM, hasilnya bisa tidak terduga karena browser masing-masing punya cara yang sedikit berbeda dalam “memperbaiki” kode yang tidak lengkap.
Biasakan selalu menutup setiap elemen yang bukan void element. Editor seperti VS Code membantu dengan menutup tag secara otomatis saat kamu mengetik tag pembuka.
Latihan
Sekarang waktunya eksperimen dengan berbagai kombinasi elemen:
-
Buat file
bio.htmldengan kerangka HTML lengkap. Di dalam<body>, tambahkan<h1>untuk namamu,<h2>untuk subjudul “Tentang Saya”, lalu beberapa<p>yang masing-masing berisi satu paragraf tentang dirimu. Perhatikan bagaimana elemen-elemen ini bersarang satu sama lain. -
Tambahkan
<br>di tengah salah satu paragraf untuk memaksa baris baru di tengah kalimat. Bandingkan hasilnya dengan membuat dua<p>terpisah — apakah perbedaan visualnya terasa? -
Coba tulis tag penutup yang salah urutan, misalnya
<p><strong>teks</p></strong>, lalu buka DevTools di browser (F12) dan lihat bagaimana browser “memperbaiki” struktur tersebut di panel Elements.
Elemen adalah unit dasar HTML, tapi kemampuan sebenarnya muncul ketika elemen bisa dikustomisasi. Sebagian besar elemen HTML menerima atribut — informasi tambahan yang menentukan perilaku atau tampilan elemen tersebut. Itulah yang akan kita pelajari berikutnya.
Kode lengkap bab ini tersedia di repositori abdasis/html-dasar-code-examples di folder bab-04-elemen-html/.