Cara Membuat Daftar atau List Pada HTML

CARA MEMBUAT DAFTAR LIST HTML
Selain table, gambar, link, style dan aneka tag lainnya, daftar list pada HTML atau pada postingan blog mempunyai peranan yang sangat penting untuk memperindah tampilan web. Dengan adanya tampilan data dalam bentuk list atau daftar dengan poin-poin pentingnya, niscaya tampilan blog akan semakin menarik dan rapi.
Bagaimana cara membuat daftar list pada Html atau postingan blog???
Daftar List terbagi menjadi dua macam, yaitu: ordered dan unordered. List Ordered merupakan daftar list berurutan yang menggunakan angka atau huruf abjad pada masing-masing poin, untuk membuat list ordered kita menggunakan tag <OL> (singkatan dari Ordered List). Sedangkan daftar List Unordered merupakan daftar list yang tak berurutan atau biasanya ditandai dengan simbol lingkaran, petak, dan lain-lain, untuk membuat list unordered kita menggunakan tag <UL> (singkatan dari Unordered List).

Sama halnya seperti membuat table, membuat list juga harus menggunakan tag luar dan dalam.

Baca juga: Cara Membuat dan Mempercantik Table HTML

Untuk tag luarnya kita menggunakan <OL> atau <UL> kemudian diikuti tag dalam yaitu: <LI> (singkatan dari List) yang berfungsi untuk membuat poin-poin dalam daftar tersebut, kemudian baru diakhri dengan tag penutup. Lihat contohnya dibawah.

Membuat daftar list Ordered (Angka)

Seperti yang sudah saya paparkan diatas, membuat daftar atau list menggunakan Angka atau Huruf kita menggunakan tag <OL>.
Contoh List Ordered Menggunakan Angka:
<ol>
<li>Contoh list ordered pertama</li>
<li>Contoh list ordered kedua</li>
<li>Contoh list ordered ketiga</li>
<li>Contoh list ordered keempat</li>
</ol>
Hasilnya:
  1. Contoh list ordered pertama
  2. Contoh list ordered kedua
  3. Contoh list ordered ketiga
  4. Contoh list ordered keempat

Selain menggunakan angka seperti contoh diatas, kita juga bisa menggunakan angka romawi, huruf kecil maupun huruf besar (kapital). Caranya dengan menambahkan atribut type pada tag LI dan valuenya diisi sesuai dengan keperluan, berikut ini beberapa value untuk atribut type pada tag LI.
Daftar Type Ordered List HTML
TypeFungsinya
type="1"Pengurutan menggunakan angka (default)
type="A"Pengurutan berdasarkan huruf besar
type="a"Pengurutan berdasarkan huruf kecil
type="I"Pengurutan menggunakan angka romawi huruf besar
type="i"Pengurutan menggunakan angka romawi huruf kecil

Untuk penulisan list menggunakan angka tidak perlu ditambahkan atribut type karna secara default jika atribut type tidak disisipkan otomatis yang muncul adalah angka.

Contoh List Ordered Menggunakan Huruf Besar:
<ol>
<li type="A">Contoh list ordered pertama</li>
<li type="A">Contoh list ordered kedua</li>
<li type="A">Contoh list ordered ketiga</li>
<li type="A">Contoh list ordered keempat</li>
</ol>
Hasilnya:
  1. Contoh list ordered pertama
  2. Contoh list ordered kedua
  3. Contoh list ordered ketiga
  4. Contoh list ordered keempat

Contoh List Ordered Menggunakan Huruf Kecil:
<ol>
<li type="a">Contoh list ordered pertama</li>
<li type="a">Contoh list ordered kedua</li>
<li type="a">Contoh list ordered ketiga</li>
<li type="a">Contoh list ordered keempat</li>
</ol>
Hasilnya:
  1. Contoh list ordered pertama
  2. Contoh list ordered kedua
  3. Contoh list ordered ketiga
  4. Contoh list ordered keempat

Contoh List Ordered Menggunakan Angka Romawi Besar:
<ol>
<li type="I">Contoh list ordered pertama</li>
<li type="I">Contoh list ordered kedua</li>
<li type="I">Contoh list ordered ketiga</li>
<li type="I">Contoh list ordered keempat</li>
</ol>
Hasilnya:
  1. Contoh list ordered pertama
  2. Contoh list ordered kedua
  3. Contoh list ordered ketiga
  4. Contoh list ordered keempat

Contoh List Ordered Menggunakan Angka Romawi Kecil:
<ol>
<li type="i">Contoh list ordered pertama</li>
<li type="i">Contoh list ordered kedua</li>
<li type="i">Contoh list ordered ketiga</li>
<li type="i">Contoh list ordered keempat</li>
</ol>
Hasilnya:
  1. Contoh list ordered pertama
  2. Contoh list ordered kedua
  3. Contoh list ordered ketiga
  4. Contoh list ordered keempat

Baca juga: Cara Menampilkan Gambar Pada HTML Menggunakan Tag IMG

Membuat daftar list Unordered (Simbol)

Untuk membuat list html menggunakan simbol maka kita akan menggunakan tag <UL>
Contoh List Unordered Menggunakan Bullets (Disc):
<ul>
<li>Contoh list unordered pertama</li>
<li>Contoh list unordered kedua</li>
<li>Contoh list unordered ketiga</li>
<li>Contoh list unordered keempat</li>
</ul>
Hasilnya:
  • Contoh list unordered pertama
  • Contoh list unordered kedua
  • Contoh list unordered ketiga
  • Contoh list unordered keempat

Sama halnya dengan list Ordered, list Unordered juga memiliki tipe-tipe simbol yang berbeda-beda, hanya saja bedanya adalah ordered list menggunakan angka atau alfabet, sedangkan unordered list menggunakan simbol. Dalam penulisan tipenya juga berbeda, apabila ordered list langsung menggunakan tipe maka undered list harus menggunakan atribut style, biasanya atribut ini memang sudah diaplikasikan pada css atau template yang kita gunakan.

Berikut ini adalah daftar tipe simbol dalam pengurutan menggunakan unordered list.
Daftar Type Unordered List HTML
TypeFungsinya
list-style-type:discPengurutan menggunakan simbol bullets (default)
list-style-type:circlePengurutan menggunakan simbol lingkaran
list-style-type:squarePengurutan menggunakan simbol kotak
list-style-type:noneMenghilangkan simbol pengurutan

Untuk penggunaan list simbol bullets (default) tidak perlu menambahkan list-style-type:disc karena secara otomatis simbol tersebut akan tampil dengan sendirinya.

Contoh List Unordered Simbol Lingkaran (circle):
<ul>
<li style="list-style-type:circle;">Contoh list unordered pertama</li>
<li style="list-style-type:circle;">Contoh list unordered kedua</li>
<li style="list-style-type:circle;">Contoh list unordered ketiga</li>
<li style="list-style-type:circle;">Contoh list unordered keempat</li>
</ul>
Hasilnya:
  • Contoh list unordered pertama
  • Contoh list unordered kedua
  • Contoh list unordered ketiga
  • Contoh list unordered keempat


Contoh List Unordered Simbol Kotak (square):
<ul>
<li style="list-style-type:square;">Contoh list unordered pertama</li>
<li style="list-style-type:square;">Contoh list unordered kedua</li>
<li style="list-style-type:square;">Contoh list unordered ketiga</li>
<li style="list-style-type:square;">Contoh list unordered keempat</li>
</ul>
Hasilnya:
  • Contoh list unordered pertama
  • Contoh list unordered kedua
  • Contoh list unordered ketiga
  • Contoh list unordered keempat


Contoh List Unordered Tanpa Simbol (none):
<ul>
<li style="list-style-type:none;">Contoh list unordered pertama</li>
<li style="list-style-type:none;">Contoh list unordered kedua</li>
<li style="list-style-type:none;">Contoh list unordered ketiga</li>
<li style="list-style-type:none;">Contoh list unordered keempat</li>
</ul>
Hasilnya:
  • Contoh list unordered pertama
  • Contoh list unordered kedua
  • Contoh list unordered ketiga
  • Contoh list unordered keempat

Membuat Daftar List HTML Bersarang

Coba perhatikan gambar dibawah ini dengan seksama:
Daftar List Bersarang
Daftar list pada gambar diatas tentu saja berbeda dengan daftar list yang sudah kita bahas tadi, dimana pada gambar tersebut setiap item list terdapat item listnya lagi, list seperti ini disebut sebagai list bersarang (nested).

Berikut ini adalah contoh list bersarang:
<ul>
<li>Contoh list bersarang 1
<ul>
<li>Item bersarang pertama</li>
<li>Item bersarang kedua</li>
<li>Item bersarang ketiga</li>
</ul>
</li>
<li>Contoh list bersarang 2
<ul>
<li>Item bersarang pertama</li>
<li>Item bersarang kedua</li>
<li>Item bersarang ketiga</li>
</ul>
</li>
<li>Contoh list bersarang 3
<ul>
<li>Item bersarang pertama</li>
<li>Item bersarang kedua</li>
<li>Item bersarang ketiga</li>
</ul>
</li>
</ul>
Hasilnya:
  • Contoh list bersarang 1
    • Item bersarang pertama
    • Item bersarang kedua
    • Item bersarang ketiga
  • Contoh list bersarang 2
    • Item bersarang pertama
    • Item bersarang kedua
    • Item bersarang ketiga
  • Contoh list bersarang 3
    • Item bersarang pertama
    • Item bersarang kedua
    • Item bersarang ketiga

Pada contoh diatas saya menggunakan list unordered default, sobat bisa membuatnya menggunakan list ordered. Sobat juga bisa mengganti style type nya seperti yang sudah kita bahas tadi.

Baca juga: Cara Membuat Link Pada HTML Menggunakan Tag A

Itulah sekilas tentang cara membuat list/daftar pada HTML atau pada postingan blog, semoga bermanfaat. Jika ada yang mau menambahkannya silahkan tinggalkan di kolom komentar. salam....

Sign up here with your email address to receive updates from this blog in your inbox.

2 Responses to "Cara Membuat Daftar atau List Pada HTML"

Kata-kata dan bahasa anda adalah gambaran kualitas diri anda...