Elemen adalah satuan penyusun dokumen HTML. Setiap judul, paragraf, tautan, dan gambar ditulis sebagai elemen dengan pola dasar yang sama. Chapter ini membongkar anatomi elemen, aturan penyarangan (nesting), serta dua kesalahan penulisan yang paling sering dialami pemula.

Anatomi Elemen #

Secara umum, elemen tersusun dari tiga bagian: tag pembuka, isi, dan tag penutup.

text 
┌─ tag pembuka ─┐ ┌──────────── isi elemen ───────────┐ ┌─ tag penutup ─┐
│     <p>       │ │  Siti sedang belajar HTML         │ │     </p>      │
└───────────────┘ └───────────────────────────────────┘ └───────────────┘

Ketiga bagian tersebut memiliki tugas masing-masing:

  • Tag pembuka — nama elemen di dalam tanda kurung sudut, contohnya <p>. Tag pembuka menandai awal elemen.
  • Isi elemen — konten di antara tag pembuka dan tag penutup; berupa teks, gambar, atau elemen lain.
  • Tag penutup — nama elemen yang sama diawali garis miring, contohnya </p>. Tag penutup menandai akhir elemen.

Bentuk lengkapnya dalam kode:

html 
<p>Siti sedang belajar HTML.</p>

Mari kita telaah baris di atas:

  1. Baris 1 (<p>): tag pembuka elemen paragraf.
  2. Baris 1 (Siti sedang belajar HTML.): isi elemen berupa teks.
  3. Baris 1 (</p>): tag penutup yang mengakhiri elemen paragraf.

Elemen Bersarang #

Isi elemen dapat memuat elemen lain — susunan seperti itu disebut nesting. Aturan mainnya satu: elemen yang dibuka paling akhir harus ditutup paling awal, seperti kotak yang dimasukkan ke dalam kotak lain.

html 
<ul>
  <li>Belajar HTML</li>
  <li>Belajar CSS</li>
</ul>

Mari kita telaah kode di atas:

  1. Baris 1 (<ul>): tag pembuka daftar (unordered list) sebagai wadah.
  2. Baris 2 dan 3 (<li>...</li>): dua butir daftar; setiap elemen <li> bersarang di dalam <ul>.
  3. Baris 4 (</ul>): penutup wadah daftar, ditulis setelah seluruh butir selesai.

Contoh penyarangan lain di dalam sebuah paragraf:

html 
<p>Budi menyukai kopi <strong>tanpa gula</strong>.</p>

Elemen <strong> menandai penekanan kuat pada potongan “tanpa gula”. Elemen <strong> bersarang di dalam elemen <p>, sehingga </strong> ditulis sebelum </p>.

Mari rangkai elemen-elemen yang baru kita kenal menjadi satu potongan markup mini — dan lihat hasilnya langsung di bawah kode:

Pada demo, logo.png diganti placeholder SVG agar langsung terlihat; elemen dan strukturnya sama persis seperti contoh. Perhatikan tiga hal pada hasil render: setiap tag penutup berpasangan dengan pembukanya, elemen li bersarang rapi di dalam ul, dan img berdiri sendiri sebagai void element tanpa penutup.

Kesalahan Umum #

Kesalahan pertama: urutan penutup terbalik.

html 
<p>Budi menyukai kopi <strong>tanpa gula</p></strong>

Kode di atas menutup </p> sebelum </strong>, padahal elemen <strong> dibuka paling akhir. Browser tetap memproses kode tersebut dengan memindahkan penutup secara otomatis, tetapi pohon DOM hasilnya dapat berbeda dari maksud penulis. Bentuk yang benar:

html 
<p>Budi menyukai kopi <strong>tanpa gula</strong></p>

Kesalahan kedua: tag penutup hilang sama sekali.

html 
<strong>Teks penting tanpa tag penutup

Tag pembuka tanpa penutup memaksa parser menebak di mana elemen berakhir. Bentuk yang benar:

html 
<strong>Teks penting lengkap dengan tag penutup</strong>

Ringkasan #

  • Elemen tersusun dari tag pembuka, isi, dan tag penutup.
  • Penyarangan (nesting): elemen terdalam ditutup lebih dulu.
  • Void element seperti <img> tidak memiliki penutup.
  • Dua kesalahan umum: urutan penutup terbalik dan tag penutup yang hilang.

Chapter berikutnya membahas atribut — informasi tambahan yang menempel pada tag pembuka.