Cara Membuat Daftar List di HTML – Tag ol, ul dan li

Penggunaan Tag ol, ul dan li dalam HTML

Dalam suatu halam website sering kita jumpai sebuah daftar yang memakai simbol baik berupa lingkaran ataupun nomor, data yang ditampilkan tersusun rapi dan berurutan. lebih terkenalnya bullet and numbering kalau di Office.
Ordered list (berurutan) dan Unordered list (tidak berurutan). untuk membuat list ini dalam html kita harus memakai tag ol, ul, atau li, dan dibawah ini saya akan membuat daftar/list ordered list, unordered list dan Kombinasi Ordered List dan Unordered List.

Cara Membuat Daftar/List di HTML

HTML menyediakan Tag <ol>, <ul> dan <li> untuk membuat list atau daftar. Bagaimana cara membuatnya, berikut kita akan belajar membuat list/daftar menggunakan tag <ol>, <ul> dan <li>.

Membuat Daftar/List

tag list terdiri dari 2 jenis, ordered list (berurutan) dan unordered list (tidak berurutan). Ordered list akan ditampilkan dengan angka atau huruf, sedangkan unordered list dengan bulatan atau kotak.

  • Ordered list/numbered list (daftar berurut/daftar dengan nomor atau abjad)
  • Unordered list/bulleted list (daftar tidak berurut/menggunakan bullet)
  • Menu list (daftar menu)
  • Directory list
  • Definition list (glossary/daftar istilah)

Ordered list

Ordered list atau numbered list adalah suatu daftar dimana item-item yang ada di dalam daftar tersebut memiliki nomor secara berurut. Ordered list dimulai dengan tag awal <OL> dan diakhiri dengan tag akhir </OL>. Sedang untuk menyatakan list item, menggunakan tag <LI>. Berikut ini contoh penggunaan ordered list :

Contoh Order List

<html>
<body>
<h4>Contoh Ordered List:</h4>
<ol>
<li>Fakultas Teknik dan Ilmu Komputer</li>
<li>Fakultas Ekomnomi</li>
<li>Fakultas Desain</li>
<li>Fakultas Hukum</li>
<li>Fakultas Sosial Politik</li>
</ol>
</body>
</html>

Ordered list memiliki atribut-atribut yang dapat digunakan untuk mengganti nomor menjadi huruf atau bilangan romawi. Kita juga dapat mengatur nomor awal untuk daftar yang kita buat.
Untuk lebih meperjelas penggunaan atribut Type, berikut akan diberikan contoh penggunaan atribut type pada dokumen html

Contoh List Nomor

<ol>
<li>Apel </li>
<li>Pisang</li>
<li>Mangga</li>
<li>Jambu</li>
</ol>

Contoh List huruf besar

<ol type="A">
<li>Apel </li>
<li>Pisang</li>
<li>Mangga</li>
<li>Jambu</li>
</ol>

Contoh List huruf kecil

<ol type="a">
<li>Apel </li>
<li>Pisang</li>
<li>Mangga</li>
<li>Jambu</li>
</ol>

Contoh List angka romawi besar

<ol type=”I”>
<li>Apel </li>
<li>Pisang</li>
<li>Mangga</li>
<li>Jambu</li>
</ol>

Contoh List angka romawi kecil

<ol type="i">
<li>Apel </li>
<li>Pisang</li>
<li>Mangga</li>
<li>Jambu</li>
</ol>

Unordered list

Unordered list/bulleted list adalah suatu daftar dimana urutan tidak diutamakan, jadi item-item dalam daftar bisa muncul dalam sembarang urutan. Unordered list dimulai dengan tag <UL> dan diakhiri dengan tag </UL>. Sedang isi daftar menggunakan tag <LI>. Berikut contoh penggunaan tag unordered list

<html>
<body>
<h4>Atribut Pada Unordered List</h4>
<ul >
<li>atribut Type="disc"</li>
<li>atribut Type="circle"</li>
<li>atribut Type="square"</li>
</ul>
</body>
</html>

Adapun atribut yang dapat ditambahkan pada tag unordered list adalah atribut TYPE

  • Disc Simbol berupa disk
  • Circle Simbol berupa lingkaran
  • Square Simbol berupa kotak

supaya lebih jelas berikut ini akan diberikan contoh tentang atribut type

Contoh List type disk

<ul type="disc">
<li>Apel</li>
<li>Mangga</li>
<li>Jeruk</li>
<li>Pepaya</li>
</ul>

Contoh List type circle

<ul type="circle">
<li>Apel</li>
<li>Mangga</li>
<li>Jeruk</li>
<li>Pepaya</li>
</ul>

Contoh List type square

<ul type="square">
<li>Apel</li>
<li>Mangga</li>
<li>Jeruk</li>
<li>Pepaya</li>
</ul>

Kombinasi Ordered List dan Unordered List

Untuk daftar yang bertingkat, dapat menggunakan kombinasi dari ordered list dan unordered list. Kedaunya dipakai secara bersama-sama untuk membentuk suatu daftar. Berikut adalah contoh penggunaan kombinasi dari kedua list untuk membentuk suatu daftar.

<html>
<body>
<h4>Contoh Kombinasi Ordered List dan Unordered List:</h4>
<ol>
<li>Kopi
<ul type="square">
<li>Arabika</li>
<li>Capucino</li>
</ul>
</li>
<li>Teh
<ul type="circle">
<li>Teh hitam</li>
<li>Teh hijau</li>
</ul>
</li>
<li>Susu</li>
</ol>
</body>
</html>

Gimana dengan tag ul, li, ol, ini apakah bisa dipahami? Untuk penjelasan List Definisi saya sudah membuat tutorialnya disini cara membuat list description.
Di tutorial selanjutnya kita akan belajar membuat link dalam halaman html yang berfungsi menghubungkan halaman satu dengan yang lainnya.

Keyword:

  • <ul> <li></li> <ul> adalah script untuk membuat
  • contoh daftar order

Get real time updates directly on you device, subscribe now.

Ingin Berkomentar?

×
Lewat ke baris perkakas