H 007 : Dasar Penulisan List Pada Laman HTML

Bagi yang ingin membuat daftar bullet cukup dengan menambahkan tag <ul> dan </ul> di awal dan akhir daftar listnya. Daftar list yang bernomor atau berurut berdasarkan angka memiliki tag <ol>, dan bukan tag <ul>.

Untuk memisahkan daftar item tunggal menggunakan tag <li> dan </li>. Lebih lengkapnya anda bisa mempelajari daftar list bullet dan daftar list bernomor sebagai berikut :

1. Daftar List Berupa Bullet

Ada beberapa cara penulisan bullet yang bisa kita pilih :

Disc
Circle, dan
Square

Lihat contoh penulisannya

<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>

Output :

text
text
text

Kode bullet di atas bisa kita rubah dengan menambahkan kode berikut kedalam tag <ul> :

1. <ul type="disc">
2. <ul type="circle">
3. <ul type="square">

Sehingga hasilnya seperti ini :

<ul type="disc">
<li>text</li>
<li>text</li>
<li>text</li>
</ul>

<ul type="circle">
<li>text</li>
<li>text</li>
<li>text</li>
</ul>

<ul type="square">
<li>text</li>
<li>text</li>
<li>text</li>
</ul>

Output :

text
text
text
text
text
text
text
text
text

2. Daftar List Berupa Angka dan Abjad

Kode tag yang digunakan ini menunjukkan bagaimana membuat berbagai jenis daftar list bernomor dan berabjad.

Ada beberapa pilihan list penomoran yang bisa kita pilih :

Nomor
Huruf Kapital
Huruf Kecil
Angka Romawi
Angka Romawi Kecil

Selain pilihan ini, anda juga dapat menentukan di mana urutan daftar harus dimulai. Awal nilai sebagai default untuk daftar nomor adalah nomor satu (atau huruf A). Lebih lengkapnya perhatikan kode html yang ada dalam tabel berikut dan bagaimana output yang dihasilkan.

Kode HTML	Output
<ol> <li>text</li> <li>text</li> <li>text</li> </ol>	text text text
<ol start="5"> <li>text</li> <li>text</li> <li>text</li> </ol>	text text text
<ol type="A"> <li>text</li> <li>text</li> <li>text</li> </ol>	text text text
<ol type="a"> <li>text</li> <li>text</li> <li>text</li> </ol>	text text text
<ol type="I"> <li>text</li> <li>text</li> <li>text</li> </ol>	text text text
<ol type="i"> <li>text</li> <li>text</li> <li>text</li> </ol>	text text text
<ol type="1"> <li>text</li> <li>text</li> <li>text</li> </ol>	text text text
<ol type="I" start="7"> <li>text</li> <li>text</li> <li>text</li> </ol>	text text text