Materi HTML: Struktur Konten Lanjutan

Pengertian

Untuk menyajikan data yang lebih kompleks, HTML menyediakan Tabel untuk data tabular dan List untuk daftar item. Selain itu, untuk mengelompokkan dan menata layout, kita menggunakan elemen pembungkus. <div> adalah pembungkus generik (block-level). Untuk memberikan penanda khusus pada elemen, kita menggunakan atribut class (untuk beberapa elemen) dan id (untuk satu elemen unik), yang menjadi dasar untuk styling dengan CSS dan interaksi dengan JavaScript.

Analogi

Analogi: Merapikan Lemari Pakaian
<div> adalah sebuah kotak besar di lemari Anda. Atribut class="pakaian-kerja" adalah label yang Anda tempelkan pada beberapa kotak (misal: kotak kemeja, kotak celana). Atribut id="jas-pernikahan" adalah label super-spesial yang hanya Anda tempelkan pada satu kotak berisi item yang paling unik dan penting.

Contoh Kode & Hasil

1. Tabel dengan Header

No	Nama
1	Andi

<table border="1">
  <thead>
    <tr><th>No</th><th>Nama</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>Andi</td></tr>
  </tbody>
</table>

2. List Terurut (Ordered List)

Pertama
Kedua

<ol>
  <li>Pertama</li>
  <li>Kedua</li>
</ol>

3. Penggunaan `<div>` sebagai Container

Semua konten ini ada di dalam satu div.

<div style="border: 1px solid black;">
  <h2>Judul di dalam Div</h2>
  <p>Paragraf di dalam Div.</p>
</div>

4. Atribut `class` untuk Styling Seragam

Teks biru.

Teks biru juga.

<style> .text-biru { color: blue; } </style>
<p class="text-biru">Teks biru.</p>
<p class="text-biru">Teks biru juga.</p>

5. Atribut `id` untuk Elemen Unik

Ini adalah header utama.

<style> #header-utama { background-color: #eee; } </style>
<div id="header-utama">Ini adalah header utama.</div>

Latihan Mandiri

Tugas: Membuat Kartu Produk

Buat sebuah <div> utama dengan id="produk-container".
Di dalamnya, buat dua buah <div> lagi, masing-masing diberi class="kartu-produk".
Di dalam setiap kartu, tambahkan judul produk (<h3>) dan daftar fitur produk menggunakan <ul> dan <li>.
Buat tabel sederhana di bawah kartu-kartu tersebut yang berisi perbandingan harga produk.

Kesimpulan

Mengorganisir konten adalah kunci untuk halaman web yang terstruktur. Tabel dan List adalah alat yang ampuh untuk menyajikan data secara rapi. Konsep div, class, dan id adalah fondasi dari layouting modern. Dengan menguasai cara mengelompokkan dan memberi label pada elemen, kita membuka jalan untuk styling yang kompleks dengan CSS dan interaksi dinamis dengan JavaScript.