Materi Dasar HTML #5 : Pengertian dan Cara Membuat Daftar/List

Sebelumnya kita sudah mempelajari Tag Heading dan Tag Paragraf, sekarang kita akan membuat bagian yang terdapat dalam paragraf, yaitu Daftar/List. Biasanya daftar atau list dalam kegiatan sehari-hari dapat kita temukan pada saat kita membeli belanjaan di swalayan, atau saat kita membuat dokumentasi atau biasa kita sebut dengan kliping untuk tugas sekolah. 

---

Pengertian List/Daftar di dalam HTML

List merupakan bagian dari dokumen html yang memungkinkan seseorang untuk menampilkan data dari suatu kelompok atau grup tertentu yang diurutkan kebawah. List juga dapat berisi beberapa prosedur atau urutan langkah-langkah dari suatu kegiatan tertentu, yang sifatnya harus dilakukan secara berurutan.

 

Cara Membuat Tag List HTML

HTML telah menyediakan beberapa Tag untuk membuat list. Terdapat beberapa Jenis tag list yang ada di HTML, yaitu Ordered List (Numbering), dan Unordered List (Bullet). 

A. Ordered List (Numbering)

Ordered List (Numbering) merupakan List yang disetiap bagian daftar/list menggunakan penomoran tertentu, seperti angka, alphabet, atau angka romawi secara berurutan . Ordered List menggunakan tag <ol>, yang didalamnya terdapat beberapa item yang akan dimasukkan kedalam list. Untuk membuat list kita menggunakan tag <li> (list item).

Berikut beberapa formatnya :

 

<ol type='1'> <li> isi list </li> </ol>
<ol type='A'> <li> isi list </li> </ol>
<ol type='a'> <li> isi list </li> </ol>
<ol type='i'> <li> isi list </li> </ol>
<ol type='I'> <li> isi list </li> </ol>

Untuk penulisan dalam format <ol> tanpa type, dalam dokumen html akan default (otomatis) ke format type 1. Biasanya type 1 sendiri jarang digunakan karena format <ol> sudah otomatis ke angka 1.     

Contoh penulisannya sebagai berikut :

See the Pen Ordered List by MiftaSetiaji (@MiftaSetiaji) on CodePen.

B. Unordered List (Bullet) 

Unordered List (Bullet) merupakan List yang tidak terurut, yang pada disetiap bagian daftar/list menggunakan simbol-simbol dalam bentuk bulatan atau kotak kecil. Unordered List menggunakan tag <ul>, yang didalamnya terdapat beberapa item yang akan dimasukkan kedalam list. Sama seperti <ol>, untuk membuat list kita menggunakan tag <li> (list item).

Berikut beberapa formatnya :

<ul type='disk'> <li> isi list </li> </ul>
<ul type='circle'> <li> isi list </li> </ul>
<ul type='square'> <li> isi list </li> </ul>

Kode format <ul type='disk'> juga sama seperti kode <ol>, keduanya bersifat default (otomatis), kebanyakan orang hanya menggunakan kode <ul> saja. 

Contoh penulisannya sebagai berikut :

See the Pen Unordered List by MiftaSetiaji (@MiftaSetiaji) on CodePen.

Ingat Setiap tag HTML ada pembuka dan ada penutupnya kecuali yang self closing tag

---

Sekian untuk pembahasan cara membuat list html, selanjutnya kita masih membahas tentang list yang didalamnya terdapat deskripsinya.