HTML Elements

❮ Previous Next ❯

Bab 1: Apa itu HTML Element?

Setelah belajar Basic, sekarang kita masuk ke inti dari HTML: Element.

Sederhananya, HTML Element adalah "Satu Paket Lengkap" dari sebuah komponen di website. Sebuah element biasanya terdiri dari:

Start Tag (Tag Pembuka)
Content (Isi)
End Tag (Tag Penutup)

<p> Ini adalah konten </p>

Start Tag Isi Element End Tag

Rumusnya:

Konten diletakkan di sini...

Bab 2: Nested Elements (Beranak Pinak)

Ini adalah konsep yang SANGAT PENTING. Di HTML, sebuah element bisa berada di dalam element lain. Ini disebut Nesting (Sarang).

Bayangkan sebuah kotak kado. Di dalam kotak besar, ada kotak sedang. Di dalam kotak sedang, ada kotak kecil.

Parent (Induk)

Element pembungkus luar. Contoh: <body> adalah parent dari <h1>.

Child (Anak)

Element yang berada di dalam. Contoh: <b> (bold) di dalam sebuah paragraf <p>.

Contoh Kode Nesting:

<html>
  <body>
    <h1>Judul Halaman</h1>
    <p>Ini adalah paragraf dengan kata <b>TEBAL</b>.</p>
  </body>
</html>

⛔ Aturan "Dilarang Silang":

Element yang dibuka terakhir, harus ditutup pertama.

Salah: <p>Halo <b>Dunia</p></b> (Kaki ketukar kepala)

Benar: <p>Halo <b>Dunia</b></p> (Rapi)

Bab 3: Empty Elements (Si Jomblo)

Tidak semua element punya pasangan (pembuka & penutup). Ada beberapa element "spesial" yang tidak memiliki konten, sehingga tidak butuh tag penutup. Mereka disebut Empty Elements.

<br>: Line Break (Ganti Baris).
<hr>: Horizontal Rule (Garis Datar).
<img>: Image (Gambar).
<input>: Kotak isian formulir.

Contoh Empty Elements:

<p>Baris Pertama<br>Baris Kedua</p>
<hr>
<p>Ada garis di atas paragraf ini.</p>

Bab 4: Huruf Kecil vs Besar?

HTML sebenarnya TIDAK case-sensitive. Artinya, browser menganggap:

<P> sama dengan <p>.

TAPI... W3C (Organisasi Standar Web) sangat menyarankan:

Selalu gunakan HURUF KECIL (Lowercase) untuk nama tag.

Kenapa? Karena terlihat lebih rapi, profesional, dan wajib hukumnya jika nanti kamu belajar XHTML atau framework modern seperti React/Vue.

Bab 5: ⚡ Proyek Kilat - Ujian Struktur (Nesting)

Misi kali ini adalah menguji pemahaman kamu tentang Nesting (Element di dalam element). Kamu harus membuat sebuah kotak pembungkus (div) yang berisi judul dan paragraf.

🎯 Misi Elements:

✅ Buat element <div> sebagai pembungkus utama (Parent).
✅ DI DALAM <div> tersebut, buat judul <h3> dengan teks: Judul Artikel
✅ Masih DI DALAM <div> (di bawah judul), buat paragraf <p> dengan teks: Isi artikel di sini.
✅ Pastikan semua tag ditutup dengan urutan yang benar!

Pusat Dokumentasi Developer

Kalau kamu butuh jawaban cepat saat lagi ngoding, kamu bisa intip dokumentasi teknis di bawah ini:

Layanan & Jasa

Pembuatan Website Template Web Jasa Iklan

Fondasi Utama

Tag & Struktur Atribut Elemen Atribut Global Simbol & Karakter

Visual & Media

Kamus Warna Grafik Canvas Audio & Video Cek Browser

Alat Bantu Dev

Konversi PX ke EM Shortcut Keyboard Status HTTP URL Encoding

Standar Global

Kode Bahasa Kode Negara Atribut Event

Langkah Selanjutnya

Struktur elemen sudah kamu kuasai! Sekarang saatnya memberikan "kekuatan" tambahan pada elemen tersebut menggunakan Atribut. Atribut akan menentukan ke mana link mengarah, seberapa besar gambar tampil, dan banyak lagi.

INSPIRED BY GLOBAL WEB STANDARDS • POWERED BY CODIVAY

Lanjut ke HTML Attributes »

❮ Previous Next: HTML Attributes ❯