Belajar HTML - Daftar, Tabel, dan Konten Terstruktur
Episode ini membedah konten terstruktur: daftar tak berurutan, daftar berurutan, daftar definisi, serta tabel dengan thead, tbody, th, dan atribut scope untuk data yang mudah dibaca.
#Pendahuluan
Tidak semua konten berbentuk paragraf. Daftar langkah, menu harga, dan data berkolom adalah bagian penting dari banyak halaman. Episode 4 membahas daftar, tabel, dan konten terstruktur — cara menyusun informasi yang berulang dan berkolom dengan markup yang tepat.
Selain berguna secara visual, daftar dan tabel yang ditulis dengan benar memberi struktur semantik: screen reader bisa mengumumkan jumlah item, dan search engine memahami relasi antar data. Ini fondasi penting sebelum kita masuk ke semantik tingkat lanjut di episode 7.
#Daftar Tak Berurutan
#ul dan li
Elemen ul (unordered list) menandai daftar yang urutannya tidak penting — contohnya daftar fitur atau kategori. Setiap item dibungkus li (list item):
<ul>
<li>Semantik HTML</li>
<li>Aksesibilitas</li>
<li>Integrasi CSS dan JavaScript</li>
</ul>Browser menampilkan bullet secara default. Poin penting: li hanya boleh menjadi anak langsung dari ul, ol, atau menu.
#Daftar Berurutan
#ol, type, dan start
Elemen ol (ordered list) menandai daftar yang urutannya penting — langkah, instruksi, peringkat. Browser menomori otomatis.
<ol>
<li>Buka file index.html</li>
<li>Tulis struktur dasar dokumen</li>
<li>Simpan dan muat ulang browser</li>
</ol>Atribut start menentukan angka awal, dan type mengubah gaya penomoran seperti A, a, atau i:
<ol start="5" type="A">
<li>Item kelima</li>
<li>Item keenam</li>
</ol>Daftar berurutan bisa disarangkan di dalam li untuk membuat sub-langkah — screen reader dan browser menangani indentasinya secara otomatis.
#Daftar Definisi
#dl, dt, dan dd
Untuk pasangan istilah dan definisi, gunakan dl (description list) dengan dt untuk istilah dan dd untuk definisi:
<dl>
<dt>HTML</dt>
<dd>Bahasa markup untuk menyusun konten web.</dd>
<dt>CSS</dt>
<dd>Bahasa untuk mengatur tampilan dan layout.</dd>
</dl>Gunakan dl untuk glosarium, metadata, atau pasangan label dan nilai — bukan ul yang dipaksakan dengan pasangan span.
#Tabel untuk Data
#Table, tr, th, dan td
Tabel menandai data dua dimensi — baris dan kolom. Kerangka dasarnya:
<table>
<thead>
<tr>
<th scope="col">Nama</th>
<th scope="col">Peran</th>
</tr>
</thead>
<tbody>
<tr>
<td>Arman</td>
<td>Cloud Engineer</td>
</tr>
<tr>
<td>Sinta</td>
<td>Frontend Developer</td>
</tr>
</tbody>
</table>Bagian-bagian penting:
theadmemuat baris judul kolom.tbodymemuat baris data utama.thmenandai sel judul;tdmenandai sel data.scope="col"menjelaskan bahwathmemayungi kolom — krusial untuk screen reader.
Ingat aturan penting: jangan pernah memakai tabel untuk layout halaman — tabel hanya untuk data. Layout adalah pekerjaan CSS yang akan kita bahas di episode 13.
#Latihan: Halaman Menu dan Data
Gabungkan daftar dan tabel dalam satu halaman:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kafe Kopi Nusantara</title>
</head>
<body>
<h1>Menu Kafe Kopi Nusantara</h1>
<h2>Minuman Populer</h2>
<ul>
<li>Kopi Tubruk</li>
<li>Kopi Susu Gula Aren</li>
<li>Teh Tarik</li>
</ul>
<h2>Harga</h2>
<table>
<thead>
<tr>
<th scope="col">Minuman</th>
<th scope="col">Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>Kopi Tubruk</td>
<td>Rp18.000</td>
</tr>
<tr>
<td>Kopi Susu Gula Aren</td>
<td>Rp22.000</td>
</tr>
</tbody>
</table>
</body>
</html>Simpan sebagai index.html dan buka di browser. Bisa juga dicek lewat server lokal dengan python3 -m http.server 8080 lalu membuka http://localhost:8080.
#Kesalahan Umum dan Solusinya
#Memakai Tabel untuk Layout
Menata halaman dengan tabel menghasilkan kode yang sulit dipelihara dan buruk untuk responsif. Gunakan CSS untuk layout; tabel hanya untuk data berkolom.
#li di Luar Daftar
Item li yang ditulis langsung di body tanpa pembungkus ul atau ol membuat dokumen tidak valid. Selalu bungkus daftar dengan elemen induk yang tepat.
#Penutup
Episode 4 melengkapi kalian dengan struktur konten: ul dan ol untuk daftar, dl untuk definisi, serta table dengan thead, tbody, th, dan scope untuk data. Konten yang terstruktur ini akan mudah dibaca oleh manusia, mesin, dan alat bantu.
Inti yang harus dibawa pulang:
uluntuk daftar tanpa urutan penting;oluntuk daftar berurutan.- Setiap item daftar ditulis dengan
li. dl,dt, dandduntuk pasangan istilah dan definisi.- Tabel hanya untuk data; pakai
thdenganscopeagar dapat diakses. - Jangan pernah memakai tabel untuk layout halaman.
Di episode 5 selanjutnya kita akan membahas elemen tautan dan navigasi — a, atribut href, target, dan rel, plus anchor ke dalam halaman. Kalian akan mulai menghubungkan halaman satu dengan lainnya, membentuk jaring web sesungguhnya.