Cara membuat list HTML - Dari waktu ke waktu, Anda mungkin ingin membuat daftar bernomor atau bullet/list pada artikel halaman web Anda. Fungsi yang digunakan adalah menggunakan tombol "Numbered list" atau "Bullet list" yang terdapat pada dasbor postingan. Tag dasar yang digunakan semua sama yaitu ul
, ol
dan li
.
Mari kita bahas sama-sama fungsi dari ke tiga tag diatas.
Daftar Isi Artikel:
Semua perintah harus di apit seperti <ul>...</ul>
atau <ol>...</ol>
. Dimana tag <ul>
untuk menampilkan list Bullet (Unordered Lists) sedangkan tag <ol>
adalah untuk menampilkan list Numbered (Ordered Lists).
List Bullet (Unordered Lists)
Type Atribut penggunakan tag <ul>
menentukan jenis bullet yang akan terlihat pada halaman blog. Meskipun melalui pemanggilan CSS kita dapat menentukan berbagai-macam model bullet dan bahkan menggunakan gambar sendiri, secara default di HTML memiliki 3 jenis bullet :
1. Circle
Tipe atribut bullet Circle menghasilkan Lingkaran Kosong
- Item 1
- Item 2
- Item 3
Format kode penulisan
<ul type="circle"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
2. Disc
Tipe atribut bullet Disc menghasilkan Lingkaran Berisi
- Item 1
- Item 2
- Item 3
Format kode penulisan
<ul type="disc"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
3. Square
Tipe atribut bullet Square menghasilkan Persegi Berisi
- Item 1
- Item 2
- Item 3
Format kode penulisan
<ul type="square"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
4. Gabungan
type="circle"
Bullet dengan Lingkaran kosong
type="disc"
Bullet dengan Lingkaran terisi
type="square"
Bullet dengan Persegi terisi
Contoh diatas menggunakan kode berikut ini :
<ul type="circle"> <li>Bullet dengan Lingkaran kosong</li> </ul> <ul type="disc"> <li>Bullet dengan Lingkaran terisi</li> </ul> <ul type="square"> <li>Bullet dengan Persegi terisi</li> </ul>
Daftar di atas saya ditempatkan di masing-masing <ul>
tetapi masing-masing <li>
juga mendukung jenis atribut, sehingga bisa terlihat seperti :
- Circle
- Disc
- Square
Berikut kodenya:
<ul> <li type="circle">Circle</li> <li type="disc">Disc</li> <li type="square">Square</li> </ul>
List Numbered (Ordered Lists)
Jika Anda ingin menyajikan daftar artikel dengan cara penggunaan tag <ol>
. Secara default langsung memberikan daftar nomor.
Tipe umum numbering adalah Angka biasa (1,2,3,... dst), Alfabet (A,B,C,... dst.), maupun Romawi (I,II,III,... dst). Tag HTML yang digunakan untuk tipe ini, dibuka dengan kode <ol>
dan ditutup dengan kode </ol>
. Sedangkan untuk masing masing item/list dibuka dengan <li>
dan ditutup dengan </li>
.
1. Angka (Default)
<ol> <li>Nomor 1</li> <li>Nomor 2</li> <li>Nomor 3</li> <li>Dan seterusnya ...</li> </ol>
Berikut hasil penerapannya
- Nomor 1
- Nomor 2
- Nomor 3
- Dan seterusnya ...
2. Alfabet
Selain menggunakan atribut default seperti di atas kita juga bisa melakukan perubahan tampilan secara fleksibilitas seperti dibawah ini :
<ol type="A"> <li>Nomor 1</li> <li>Nomor 2</li> <li>Nomor 3</li> <li>Dan seterusnya ...</li> </ol>
Berikut hasil penerapannya
- Nomor 1
- Nomor 2
- Nomor 3
- Dan seterusnya ...
3. Romawi
Kita juga bisa melakukan perubahan tampilan dengan Nomor Romawi seperti dibawah ini :
<ol type="I"> <li>Nomor 1</li> <li>Nomor 2</li> <li>Nomor 3</li> <li>Dan seterusnya ...</li> </ol>
Berikut hasil penerapannya
- Nomor 1
- Nomor 2
- Nomor 3
- Dan seterusnya ...
4. Custom (Start at)
Ketika kita membuat penomoran, kemudian terpisah oleh kalimat atau paragaraf, otomatis setelah kalimat atau paragraf tersebut dimulai dari angka pertama. Mengatasi kendala tersebut, kita bisa menambahkan attribut start='...'
caranya:
<ol start="4"> <li>Nomor 4</li> <li>Nomor 5</li> <li>Nomor 6</li> <li>Dan seterusnya ...</li> </ol>
Berikut hasil penerapannya
- Nomor 4
- Nomor 5
- Nomor 6
- Dan seterusnya ...
5. Nomor Menurun (Reversed)
Selanjutnya membalikkan ordered dengan penambahan type reversed
.
<ol reversed="reversed"> <li>Pertama</li> <li>Kedua</li> <li>Ketiga</li> <li>Keempat</li> <li>Kelima</li> </ol>
Hasilnya..
- Pertama
- Kedua
- Ketiga
- Keempat
- Kelima
Untuk attribute reserved bisa kalian kosongi seperti reserved=""
, atau bisa kalian tambahkan seperti contoh diatas.
Gabungan Bullet dan Numbering
Kita juga bisa menggabungkan antara bullet dan numbering seperti berikut ini:
<ol> <li>Bagian 1</li> <li>Bagian 2</li> <ul> <li>Sub Bagian 2.1</li> <li>Sub Bagian 2.2</li> <li>Sub Bagian 2.3</li> </ul> </li> <li>Bagian 3</li> </ol>
Hasilnya tampak seperti dibawah ini:
- Bagian 1
- Bagian 2
- Sub Bagian 2.1
- Sub Bagian 2.2
- Sub Bagian 2.3
- Bagian 3
Demikian, cara membuat dan memaksimalkan bullet & numbering dalam postingan blog, Silahkan gunakan daftar bullet atau numbering yang sesuai pada halaman HTML Anda. Jika Anda memiliki pertanyaan atau sekedar berdiskusi jangan ragu untuk meninggalkan komentar.