Pada Bagian 2, kamu sudah mempelajari struktur dasar HTML dan memahami fungsi <html>, <head>, serta <body>.
Sekarang kita akan masuk ke level berikutnya:
👉 memahami anatomi HTML dan atribut HTML
Bagian ini sangat penting karena:
• Belajar Coding Bagian 8: Elemen Tabel dalam HTML (Lengkap dengan Contoh & Hasil)
• Belajar CSS Bagian 10 : CSS Display Grid (Panduan Lengkap Layout Dua Dimensi di CSS)
-
Semua elemen HTML memiliki bentuk (anatomi) yang sama
-
Atribut memberikan informasi tambahan pada elemen HTML
📌 Kalau kamu paham bagian ini, membaca dan menulis HTML akan jauh lebih mudah.
Apa Itu Anatomi HTML?
Anatomi HTML adalah bagian-bagian penyusun sebuah elemen HTML.
Satu elemen HTML biasanya terdiri dari:
-
Tag pembuka
-
Konten
-
Tag penutup
Struktur Dasar Elemen HTML
Contoh elemen HTML sederhana:
<p>Ini adalah paragraf.</p>
Penjelasan:
-
<p>→ tag pembuka -
Ini adalah paragraf.→ konten -
</p>→ tag penutup
📌 Semua elemen HTML mengikuti pola ini, kecuali beberapa elemen khusus.
Tag Pembuka dan Tag Penutup
🔹 Tag Pembuka
Tag pembuka menandai awal elemen HTML.
Contoh:
<h1> <p> <div>
🔹 Tag Penutup
Tag penutup menandai akhir elemen HTML dan selalu diawali dengan /.
Contoh:
</h1> </p> </div>
📌 Jika lupa menutup tag, tampilan bisa berantakan.
Elemen HTML Tanpa Tag Penutup
Beberapa elemen HTML tidak memiliki penutup, disebut self-closing elements.
Contoh:
<img> <br> <hr>
📌 Elemen ini langsung bekerja dalam satu tag.
Apa Itu Atribut HTML?
Atribut HTML adalah informasi tambahan yang diberikan pada sebuah elemen HTML.
Atribut digunakan untuk:
-
Memberi identitas
-
Mengatur perilaku
-
Mengatur tampilan dasar
-
Menghubungkan file atau link
Bentuk Dasar Atribut HTML
Atribut selalu ditulis di tag pembuka.
Struktur:
<tag atribut="nilai">Konten</tag>
Contoh:
<p align="center">Teks di tengah</p>
📌 Atribut selalu memiliki nilai dan ditulis dalam tanda kutip.
Contoh Atribut HTML yang Umum
1️⃣ Atribut href (Link)
Digunakan pada tag <a>.
<a href="https://google.com">Buka Google</a>
👉 href menentukan tujuan link
2️⃣ Atribut src (Sumber File)
Digunakan pada gambar.
<img src="gambar.jpg">
👉 src menentukan lokasi file gambar
3️⃣ Atribut alt (Alternatif Teks)
<img src="logo.png" alt="Logo Website">
Fungsi alt:
-
Jika gambar gagal tampil
-
Untuk aksesibilitas
-
Untuk SEO
📌 Atribut alt sangat dianjurkan
4️⃣ Atribut id
Memberi identitas unik pada elemen.
<h1 id="judul">Judul Artikel</h1>
📌 Satu halaman tidak boleh memiliki id yang sama.
5️⃣ Atribut class
Digunakan untuk mengelompokkan elemen.
<p class="teks">Paragraf pertama</p>
📌 class bisa dipakai lebih dari satu kali.
Perbedaan id dan class
| id | class |
|---|---|
| Unik | Bisa banyak |
| Satu elemen | Banyak elemen |
| Identitas khusus | Kelompok elemen |
Contoh HTML dengan Anatomi & Atribut
<h1 class="judul">Belajar HTML</h1> <p id="deskripsi">HTML adalah dasar website.</p> <a href="#">Baca Selengkapnya</a>
Di contoh ini:
-
Tag → struktur
-
Konten → isi
-
Atribut → pengaturan tambahan
Kesalahan Umum Pemula
❌ Atribut di luar tag
❌ Tidak pakai tanda kutip
❌ Salah menutup tag
❌ Menaruh atribut di tag penutup
📌 Biasakan HTML rapi sejak awal
Ringkasan
✔ Anatomi HTML terdiri dari tag pembuka, konten, dan penutup
✔ Atribut memberi informasi tambahan
✔ Atribut ditulis di tag pembuka
✔ id untuk identitas unik
✔ class untuk pengelompokan
Penutup
Di Bagian 3 ini, kamu sudah memahami:
-
Anatomi elemen HTML
-
Cara kerja tag
-
Fungsi atribut HTML
-
Perbedaan
iddanclass
