HTML Elements: Fondasi Halaman Web

1. Anatomi Elemen HTML

Sebagian besar elemen HTML memiliki pola standar: ada pembuka, isi konten, dan penutup.

Struktur Syntax

<tagname>Konten diletakkan di sini</tagname>

• Opening Tag (Tag Pembuka): Terdiri dari nama elemen yang dibungkus kurung siku < >. Contoh: <p>.
• Content (Konten): Informasi yang ingin ditampilkan (teks, gambar, dll).
• Closing Tag (Tag Penutup): Sama dengan tag pembuka, tetapi memiliki garis miring / sebelum nama elemen. Contoh: </p>.

Contoh Implementasi

<h1>Halo Dunia!</h1>

<p>Ini adalah paragraf pertama saya di HTML.</p>

<button>Klik Saya</button>

2. Void Elements (Elemen Kosong)

Tidak semua elemen membutuhkan tag penutup. Beberapa elemen tidak memiliki konten teks di dalamnya, melainkan hanya berfungsi untuk menyisipkan sesuatu atau memberikan instruksi visual. Elemen ini disebut Void Elements atau Self-Closing Tags.

Contoh Void Elements yang Umum

<img src="foto.jpg" alt="Deskripsi Foto">

<br>

<hr>

<input type="text">

3. Attributes (Informasi Tambahan)

Elemen sering kali membutuhkan informasi tambahan agar bisa bekerja dengan benar. Informasi ini disebut Attribute. Atribut selalu diletakkan di dalam Tag Pembuka.

Struktur Syntax

nama_atribut="nilai_atribut"

Contoh Implementasi

<a href="[https://google.com](https://google.com)">Kunjungi Google</a>

<img src="logo.png" width="200">

<p class="text-merah">Teks ini akan berwarna merah.</p>

4. Nesting (Struktur Induk-Anak)

Dalam HTML, kamu bisa (dan harus) menempatkan elemen di dalam elemen lain. Konsep ini disebut Nesting. Ini menciptakan struktur hierarki atau pohon (DOM Tree).

• Parent (Induk): Elemen pembungkus luar.
• Child (Anak): Elemen yang berada di dalam.
• Sibling (Saudara): Elemen yang berada di level yang sama.

Contoh Implementasi

<div class="kartu-profil">
  
  <h2>Nama Pengguna</h2>
  <p>Deskripsi singkat tentang pengguna.</p>

</div>

Aturan Penting: Pastikan urutan penutupan tag benar. Jika kamu membuka A lalu B, kamu harus menutup B dulu baru A.

• Benar: <div><p>Teks</p></div>
• Salah: <div><p>Teks</div></p>

5. Block-level vs Inline Elements

Memahami perbedaan ini sangat penting untuk mengatur tata letak (layout) halaman web kamu.

Block-level Elements

Elemen ini selalu memulai di baris baru dan mengambil lebar penuh (100%) dari layar atau container-nya.

• Contoh: <div>, <h1> sampai <h6>, <p>, <ul>, <li>.

Inline Elements

Elemen ini tidak memulai baris baru dan hanya mengambil lebar sesuai kontennya saja. Mereka mengalir di dalam teks.

• Contoh: <span>, <a> (link), <b> (bold), <img>.

Contoh Perbandingan

<div style="background: red;">Kotak 1</div>
<div style="background: blue;">Kotak 2</div>

<span style="background: yellow;">Teks 1</span>
<span style="background: green;">Teks 2</span>