Bab 05: Memahami Elemen dan Tag HTML

ByArland Hudha
| |
Memahami Elemen dan Tag HTML

HTML (HyperText Markup Language) adalah tulang punggung setiap halaman web. Tanpa HTML, tidak ada struktur yang jelas, CSS dan JavaScript pun nggak punya tempat buat “numpang hidup”. Tapi sebelum lompat ke styling atau bikin web jadi interaktif, hal paling penting yang wajib kamu kuasai adalah elemen dan tag HTML, bukan sekadar hafal namanya, tapi paham cara kerjanya.

Artikel ini adalah seri belajar HTML untuk Pemula, disini kamu akan belajar bab elemen dan tag HTML dari sudut pandang pemula dengan pakai contoh nyata, dibahas kesalahan yang sering kejadian, dan dilatih cara berpikirnya supaya nggak ketuker lagi antara tag, elemen, dan isinya. Kalau kamu masih di tahap awal dan ingin gambaran besarnya dulu, kamu juga bisa mulai dari halaman panduan dasar HTML lengkap sebagai halaman induknya.

Apa Itu Elemen HTML?

Elemen HTML adalah unit dasar penyusun halaman web. Ia merepresentasikan bagian-bagian seperti paragraf, judul, gambar, tautan, form, dan sebagainya.

Bayangkan elemen seperti kotak yang berisi konten tertentu dan setiap kotak punya fungsi spesifik. Misalnya:

  • <h1> untuk judul utama
  • <p> untuk paragraf
  • <img> untuk gambar

Secara teknis, elemen adalah kombinasi dari tag pembuka, konten (opsional), dan tag penutup.

Jangan bingung: elemen ≠ tag. Kita bahas bedanya di bagian berikutnya.

Perbedaan Elemen dan Tag HTML

Ini sering jadi sumber kebingungan. Mari bedakan:

  • Tag adalah tanda kurung siku (< >) yang menandai awal atau akhir suatu elemen.
    Contoh: <p>, </p>, <img>
  • Elemen adalah keseluruhan unit, termasuk tag pembuka + konten + tag penutup.

Contoh:

HTML
<p>Ini adalah paragraf.</p>
  • <p> dan </p> → tag
  • Seluruh baris di atas → elemen <p>

Analoginya:
Tag itu seperti tanda “buka kardus” dan “tutup kardus”.
Elemen itu seluruh kardus beserta isinya.

Struktur Dasar Elemen di HTML: Tag Pembuka, Isi, dan Tag Penutup

Sebagian besar elemen HTML mengikuti pola:

HTML
<tag_pembuka>Isi atau konten</tag_penutup>

Contoh:

HTML
<h1>Selamat Datang di Website Saya</h1>
<p>Paragraf ini menjelaskan isi halaman.</p>
<a href="https://example.com">Kunjungi Situs Ini</a>
  • <h1>, <p>, <a> → tag pembuka
  • </h1>, </p>, </a> → tag penutup (ditandai dengan /)
  • Teks di antaranya → konten

Catatan: Tidak semua elemen punya konten, itu dibahas di bagian elemen kosong.

Contoh Elemen di HTML yang Paling Sering Dipakai Pemula

Berikut elemen-elemen yang hampir selalu muncul di halaman web pertama pemula:

ElemenFungsiContoh Kode
<html>Akar dokumen HTML<html>...</html>
<head>Metadata (judul, CSS, dll)<head><title>Halaman</title></head>
<body>Konten yang terlihat di browser<body><h1>Halo!</h1></body>
<h1>–<h6>Judul dengan tingkatan<h1>Judul Utama</h1>
<p>Paragraf<p>Ini paragraf.</p>
<a>Tautan (link)<a href="https://example.com">Klik sini</a>
<img>Gambar<img src="foto.jpg" alt="Foto">
<div>Wadah umum (untuk layout)<div>Isi konten</div>

Saran: Mulailah dengan kombinasi <html>, <head>, <body>, <h1>, <p>, dan <img>—itu sudah cukup untuk membangun halaman pertama!

Elemen Kosong (Empty Element) di HTML: Kenapa Ada Tag Tanpa Penutup?

Beberapa elemen tidak pernah punya konten, jadi mereka tidak butuh tag penutup. Ini disebut empty elements atau void elements.

Contoh:

HTML
<img src="logo.png" alt="Logo">
<br>
<hr>
<input type="text">
  • <img> tidak bisa berisi teks di dalamnya → jadi tidak ada </img>
  • <br> hanya untuk ganti baris → tidak butuh penutup
  • Meski dulu di XHTML penulisannya <br />, di HTML5 cukup <br>

Kesalahan umum: menulis <img>...</img> → ini salah dan bisa bikin tampilan error!

Elemen Bersarang di HTML: Konsep Induk dan Anak

HTML bersifat hierarkis. Artinya, satu elemen bisa berada di dalam elemen lain seperti boneka rusia.

Contoh:

HTML
<div>
  <h2>Judul Artikel</h2>
  <p>Paragraf ini ada di dalam div.</p>
  <ul>
    <li>Poin 1</li>
    <li>Poin 2</li>
  </ul>
</div>
  • <div> adalah induk (parent)
  • <h2>, <p>, <ul> adalah anak (children)
  • <li> adalah cucu (grandchildren) dari <div>

Aturan penting:
Jangan pernah menyilang nesting!
Ini Salah: <p><div></p></div>
Ini Benar: <div><p></p></div>

Kesalahan Umum Saat Menyusun Elemen di HTML

Berikut kesalahan yang sering bikin tata letak kacau:

  1. Lupa menutup tag
HTML
   <p>Paragraf ini tidak ditutup
   <p>Paragraf berikutnya

Browser akan bingung dan menampilkan tidak sesuai harapan.

  1. Menyilang struktur nesting
HTML
   <strong><em>Teks</strong></em>

Harusnya

HTML
<strong><em>Teks</em></strong>
  1. Menempatkan elemen block di dalam inline
HTML
   <a href="#"><div>Klik sini</div></a>(tidak valid)

Elemen <div> (block) tidak boleh di dalam <a> (inline) di HTML lama. Di HTML5 boleh, tapi hati-hati!

  1. Menggunakan huruf kapital sembarangan
    Meski HTML tidak case-sensitive, konsistensi penting (lihat bagian 8).

HTML Tidak Case Sensitive, Tapi Kenapa Tetap Disarankan Lowercase

Secara teknis, browser menerima:

HTML
<DIV>
  <H1>Halo</H1>
</DIV>

Tapi standar modern (dan semua developer) menggunakan huruf kecil karena:

  • Lebih mudah dibaca
  • Konsisten dengan CSS dan JavaScript (yang case-sensitive!)
  • Wajib di XHTML dan XML
  • Tools (validator, linter) biasanya mengharapkan lowercase

Best practice: Selalu tulis tag dalam huruf kecil, bahkan saat belajar sendiri.

Cara Aku Memahami Struktur Elemen di HTML Biar Nggak Ketuker

Dari pengalaman pribadi dulu aku sering bingung antara tag dan elemen atau lupa mana yang butuh penutup. Ini trik yang kugunakan:

  1. Bayangkan elemen sebagai kotak berlabel
    Label = namanya (<p>, <div>)
    Isi kotak = kontennya (teks, <img>, dll)
  2. Gunakan indentasi saat coding
HTML
   <body>
     <header>
       <h1>Judul</h1>
     </header>
     <main>
       <p>Paragraf</p>
     </main>
   </body>

Struktur jadi jelas, mana induk, mana anak.

  1. Tanya diri sendiri:
    “Apakah elemen ini BISA berisi sesuatu?”
    Kalau tidak (seperti <img>, <br>), berarti empty element → tidak butuh penutup.
  2. Validasi kode
    Gunakan https://validator.w3.org/ untuk cek apakah struktur HTML-mu benar.

Kenapa Harus Paham Elemen di HTML Sebelum Lanjut ke CSS dan JavaScript

Karena:

  • CSS bekerja dengan elemen
    Misal: p { color: red; } → hanya bisa jalan kalau kamu tahu <p> itu elemen paragraf.
  • JavaScript memilih elemen untuk diubah
    Contoh: document.querySelector('h1') → nggak akan berguna kalau nggak paham apa itu <h1>.
  • Semantic HTML = aksesibilitas & SEO
    Pakai <nav>, <article>, <footer> dengan benar membuat web lebih ramah untuk difabel dan mesin pencari.

Ingat:
HTML = struktur
CSS = tampilan
JavaScript = perilaku
Tanpa struktur yang benar, tampilan dan perilaku akan rapuh.

Memahami elemen di HTML bukan soal menghafal daftar tag tapi memahami logika struktur dokumen web. Setiap elemen punya peran, aturan, dan hubungan dengan elemen lain. Dengan fondasi ini, kamu nggak cuma bisa bikin halaman web tapi bikinnya dengan benar.

Jangan terburu-buru lompat ke CSS atau framework sebelum kamu nyaman dengan:

  • Beda elemen dan tag
  • Struktur bersarang
  • Elemen kosong
  • Kesalahan umum

Karena di dunia pengembangan web, keindahan dimulai dari struktur yang rapi.

Lanjut Bab 06: Mengenal Aribut di HTML

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *