Membuat List menggunakan HTML

List/daftar biasanya mengarah pada pengurutan sebuah kata yang didalamnya terdiri dari poin-poin tersendiri. Sebagai contoh pada tutorial pembuatan makanan dimana terdapat tahapan-tahapan yang perlu dituliskan secara terurut. Dalam pembuatan list dibagi menjadi 2 yaitu ordered list dan unordered list.

Membuat List menggunakan HTML

Membuat List dengan HTML

List/daftar biasanya mengarah pada pengurutan sebuah kata yang didalamnya terdiri dari poin-poin tersendiri. Sebagai contoh pada tutorial pembuatan makanan dimana terdapat tahapan-tahapan yang perlu dituliskan secara terurut. Dalam pembuatan list dibagi menjadi 2 yaitu ordered list dan unordered list. Ordered list atau daftar terurut memberikan fasilitas untuk membuat daftar data secara terurut, sedangkan unordered list digunakan untuk menampilkan daftar data yang tidak memiliki urutan tertentu, atau yang tidak mementingkan urutan.

Untuk pembuatan ordered list kita menggunakan elemen <ol>(ordered list) dan isi dari list sendiri dibuat dengan menggunakan elemen <li> (list item), sedangkan untuk membuat ordered list menggunakan elemen <ul> (unordered list), dan untuk mengisikan daftar, kita dapat menggunakan elemen <li> (list item).

Berikut contoh penggunaan ordered list dengan tag <ol>

<ol>
    <li>Ini adalah contoh daftar ordered list</li>
    <li>Ini adalah contoh daftar ordered list</li>
    <li>Ini adalah contoh daftar ordered list</li>
    <li>Ini adalah contoh daftar ordered list</li>
    <li>Ini adalah contoh daftar ordered list</li>
</ol>

Berikut contoh penggunaan unordered list dengan tag <ul>

<ul>
    <li>Ini adalah contoh daftar unordered list</li>
    <li>Ini adalah contoh daftar unordered list</li>
    <li>Ini adalah contoh daftar unordered list</li>
    <li>Ini adalah contoh daftar unordered list</li>
    <li>Ini adalah contoh daftar unordered list</li>
</ul>

Berikut ini contoh implementasi dan output membuat ordered list dan unordered list

<ol>
    Ordered List
    <li>Ini adalah contoh daftar ordered list</li>
    <li>Ini adalah contoh daftar ordered list</li>
    <li>Ini adalah contoh daftar ordered list</li>
    <li>Ini adalah contoh daftar ordered list</li>
    <li>Ini adalah contoh daftar ordered list</li>
</ol>

<ul>
    Unordered List
    <li>Ini adalah contoh daftar ordered list</li>
    <li>Ini adalah contoh daftar ordered list</li>
    <li>Ini adalah contoh daftar ordered list</li>
    <li>Ini adalah contoh daftar ordered list</li>
    <li>Ini adalah contoh daftar ordered list</li>
</ul>

Apa Reaksi Anda?

like
0
dislike
0
love
0
funny
0
angry
0
sad
0
wow
0