Kita memerlukan elemen list dan table untuk membangun halaman web yang terstruktur dan informatif. List digunakan untuk menyusun informasi secara urut maupun tidak urut, sedangkan table digunakan untuk menyajikan data dalam format baris dan kolom. Pada artikel ini kita akan membahas kedua elemen tersebut dan bagaimana cara menggunakan elemen kedalam HTML dengan baik dan benar.

Apa itu List Pada HTML

Dalam HTML, daftar atau list digunakan untuk menampilkan informasi dalam bentuk poin-poin. ada dua jenis list yang paling umum digunakan, yaitu daftar tidak terurut (unordered list) dan daftar terurut (ordered list). Daftar tidak terurut dapat di definisikan dengan tag <ul> yang merupakan singkatan dari unordered list. Setiap item didalam daftar tersebut didefiniskan menggunakan tag <li> (list item). Berikut contoh penggunaannya.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Hasilnya adalah, daftar dengan tampilan poin bulat. Namun jika kamu ingin menyajikan informasi yang memiliki urutan atau langkah-langkah, maka sebaiknya gunakan terurut dengan tag <ol>. Sama seperti <ul>, setiap item tetap menggunakan tag <li>. Berikut contohnya.

<ol>
  <li>Install Code Editor</li>
  <li>Learn HTML Basic in NganggurDev</li>
  <li>Congrats, you're website developer right now</li>
</ol>

Menggunakan list secara tepat akan meningkatkan keterbacaan halaman dan membantu mesin pencari memahami struktur informasi yang kita tampilkan.

Tabel pada HTML

Tabel adalah cara yang tepat dan efisien untuk menyajikan data dalam format yang terstruktur. HTML menyediakan elemen <table> untuk membuat tabel dan menampilkannya pada browser. Berikut contoh lengkap penggunaanya.

<table>
  <tr>
    <th>Name</th>
    <th>Website</th>
    <th>Job</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>Web Developer</td>
    <td>Not Found</td>
  </tr>
</table>

Penjelasan dari kode diatas.

• <table> tag pembuka dan penutup untuk menampilkan tabel.
• <tr> merupakan singakatan dari table row untuk menyusun baris.
• <th> merupakan singakatan dari table header untuk membuat judul pada setiap kolom.
• <td> merupakan singakatan dari table data untuk menampilkan data kedalam tabel. Dari kode diatas akan menghasilkan sebuah tabel dengan tiga kolom dan satu baris data. Tabel seperti ini sangat efektif digunakan untuk menyajikan informasi seperti data siswa, data produk, data jadwal, dan lain-lain.

Kesimpulan

Menggunakan list atau table bukan hanya digunakan untuk mempercantik tampilan konten, tetapi juga membantu pengunjung dan mesin pencari memahami struktur informasi yang lebih baik.

Terimakasih, sampai jumpa di artikel selanjutnya.