Cara Membuat List di HTML

Cara Membuat List di HTML - Kita akan membahas bagagaimana Membuat List di HTML.

Kita dapat menuliskan suatu daftar, seperti daftar kelebihan atau kekurangan suatu produk, atau lainnya pada HTML website atau blog dengan tiga macam jenis list sebagai berikut.

• Ordered List (list yang terurut).
• Unordered List (list yang tak terurut).
• Descriptiona List (list yang berisi definisi).

1. Ordered List di HTML

Ordered list dibuat dengan tag <ol>. Lalu di dalamnya diisi dengan item-item yang akan dimasukkan ke dalam list. Item dibuat dengan tag <li> (list item).

Contoh penulisan:

<h4>Buah Favoritku:</h4>
<ol>
<li>Jeruk</li>
<li>Durian</li>
<li>Pisang</li>
<li>Pepaya</li>
<li>Mangga</li>
</ol>

Hasilnya:

Buah Favoritku:

1. Jeruk
2. Durian
3. Pisang
4. Pepaya
5. Mangga

List diatas diurutkan berdasarkan angka dari 1, 2, 3, sampai 5.

Lalu bagaimana kalau kita ingin menggunakan huruf seperti a, b, c atau angka romawi seperti I, II, III?

Gampang..

Untuk membuat yang seperti itu, kita bisa menggunakan atribut type pada tag ol dan berikut ini nilai yang bisa diberikan:

• a untuk alfabet a, b, c, dan seterusnya;
• A untuk alfabet A, B, C, dan seterusnya;
• i untuk angka romwari i, ii, iii, dan seterusnya;
• I untuk angka romwari I, II, III, dan seterusnya.

Contoh penulisan:

<h4>List dengan type alfabet</h4>
<ol type='a'>
<li>Tutorial List di HTML</li>
<li>Tutorial Link di HTML</li>
<li>Tutorial Tabel di HTML</li>
</ol>
<h4>List dengan type alfabet kapital (huruf besar)</h4>
<ol type='A'>
<li>Tutorial List di HTML</li>
<li>Tutorial Link di HTML</li>
<li>Tutorial Tabel di HTML</li>
</ol>
<h4>List dengan type romawi</h4>
<ol type='i'>
<li>Tutorial List di HTML</li>
<li>Tutorial Link di HTML</li>
<li>Tutorial Tabel di HTML</li>
</ol>
<h4>List dengan type romawi kapital</h4>
<ol type='I'>
<li>Tutorial List di HTML</li>
<li>Tutorial Link di HTML</li>
<li>Tutorial Tabel di HTML</li>
</ol>

Hasilnya:

List dengan type alfabet

1. Tutorial List di HTML
2. Tutorial Link di HTML
3. Tutorial Tabel di HTML

List dengan type alfabet kapital (huruf besar)

1. Tutorial List di HTML
2. Tutorial Link di HTML
3. Tutorial Tabel di HTML

List dengan type romawi

1. Tutorial List di HTML
2. Tutorial Link di HTML
3. Tutorial Tabel di HTML

List dengan type romawi kapital

1. Tutorial List di HTML
2. Tutorial Link di HTML
3. Tutorial Tabel di HTML

2.Unordered List di HTML

Unordered list adalah list yang tak terurut yang menggunakan simbol-simbol pada item-nya. Unordered list dibuat dengan tag <ul> dan untuk item-nya dibuat juga dengan tag <li>.

Contoh penulisan:

<h4>Bahasa Pemrograman untuk dipelajari:</h4>
<ul>
<li>Javascript</li>
<li>PHP</li>
<li>Java</li>
<li>Python</li>
<li>Kotlin</li>
</ul>

Hasilnya:

Bahasa Pemrograman untuk dipelajari:

• Javascript
• PHP
• Java
• Python
• Kotlin

Secara default simbol yang digunakan oleh unordered list adalah lingkaran kecil (disc). Kita juga bisa menggantinya dengan atribut type.

Berikut ini nilai yang bisa diberikan untuk atribut type:

1. square untuk simbol persegi;
2. disc (default) untuk simbol lingkaran disc;
3. none tidak memakai simbol;
4. circle untuk simbol lingkaran;

Contoh penulisan:

<h4>Bahasa Pemrograman untuk dipelajari:</h4>
<ul type="square">
<li>Javascript</li>
<li>PHP</li>
<li>Java</li>
<li>Python</li>
<li>Kotlin</li>
</ul>
<h4>Framework untuk dipelajari:</h4>
<ul type="circle">
<li>Vuejs</li>
<li>Svelte</li>
<li>Reactjs</li>
</ul>
<h4>Tools untuk dipelajari:</h4>
<ul type="none">
<li>Gulp</li>
<li>NPM</li>
<li>Js Lint</li>
</ul>
<h4>Pelajari juga:</h4>
<ul type="disc">
<li>JSON</li>
<li>XML</li>
<li>Markdown</li>
</ul>

Hasilnya:

Bahasa Pemrograman untuk dipelajari:

• Javascript
• PHP
• Java
• Python
• Kotlin

Framework untuk dipelajari:

• Vuejs
• Svelte
• Reactjs

Tools untuk dipelajari:

• Gulp
• NPM
• Js Lint

Pelajari juga:

• JSON
• XML
• Markdown

Selain menggunakan type, kita juga bisa menggunakan gambar. Ini dilakukan dengan style CSS.

Contoh penulisan:

<h4>Bahasa Pemrograman untuk dipelajari:</h4>
<ul style="list-style-image: url(https://assets.ubuntu.com/sites/ubuntu/latest/u/img/favicon.ico)">
<li>Javascript</li>
<li>PHP</li>
<li>Java</li>
<li>Python</li>
<li>Kotlin</li>
</ul>

Hasilnya:

Bahasa Pemrograman untuk dipelajari:

• Javascript
• PHP
• Java
• Python
• Kotlin

3. Description List di HTML

Description List adalah list yang berisi deksripsi atau penjelasan dari sesuatu. Ada tiga tag yang digunakan untuk membuat description list:

1. <dl> (description list) tag untuk memulai description list;
2. <dt> (description term) tag untuk membuat kata yang akan dideskripsikan;
3. <dd> (description description) tag untuk membuat penjelasan dari kata.

Contoh penulisan:

<h4>Daftar istilah:</h4>
<dl>
<dt>Kopi</dt>
<dd>Sebuah minuman berwarna hitam. Menurut pendapat lain kopi adalah air yang dimasak sampai gosong.</dd>
<dt>Kopi Black Magic</dt>
<dd>Kopi hitam atau kopi tradisional yang dibuat dengan mantra-mantra.</dd>
<dt>White Coffee</dt>
<dd>Kopi berwarna putih, kandungan kafeinnya sedikit.</dd>
<dt>Kopi++</dt>
<dd>Kopi ini mampu meningkatkan imajinasi 99 kali lipat.</dd>
</dl>

Hasilnya:

Daftar istilah:

Kopi

Sebuah minuman berwarna hitam. Menurut pendapat lain kopi adalah air yang dimasak sampai gosong.

Kopi Black Magic

Kopi hitam atau kopi tradisional yang dibuat dengan mantra-mantra.

White Coffee

Kopi berwarna putih, kandungan kafeinnya sedikit.

Kopi++

Kopi ini mampu meningkatkan imajinasi 99 kali lipat.

List di dalam List (Nested List)

List juga dapat dibuat di dalam list, misalkan kita ingin menggabungkan ordered list dengan unordered list. Caranya, list yang di dalam ditulis di dalam tag <li>.

Contoh penulisan:

<h4>Distro Linux dan Keluarganya</h4>
<ol>
<li>Debian
<ul>
<li>Ubuntu</li>
<li>Mint</li>
<li>elementaryOS</li>
</ul>
</li>
<li>RedHat
<ul>
<li>Fedora</li>
</ul>
</li>
<li>Slackware</li>
</ol>

Hasilnya:

Distro Linux dan Keluarganya

1. Debian
   • Ubuntu
   • Mint
   • elementaryOS
2. RedHat
   • Fedora
3. Slackware

---

Sumber:
www.petanikode.com/html-list/
www.w3schools.com/html/html_lists.asp

Demikian Cara Membuat List di HTML, semoga bermanfaat.

Buka lainnya di Tutorial HTML untuk Blogger Pemula.