3 Tag Html untuk Menampilkan Informasi Dalam Bentuk Daftar

Tag <ul>, <ol>, <dl> merupakan Tag Html yang digunakan untuk menampilkan informasi dalam bentuk daftar. Ke-3 Tag tersebut juga digunakan sebagai wadah untuk menampung daftar item(list item).

Untuk menulis daftar item, Anda bisa menggunakan Tag <li> yang digunakan bersamaan dengan Tag <ul> dan <ol>. Sedangkan Tag <dl> digunakan bersamaan dengan Tag <dt> dan <dd>. Berikut Ulasan Selengkapnya.

Daftar isi

1. Tag <ul>

Untuk Menampilkan sebuah daftar item atau daftar menu dalam halaman Web, HTML memilik Tag khusus untuk membuat daftar secara Tidak Terurut yaitu menggunakan Tag <ul> atau Unordered List yang berarti bahwa Anda bisa membuat daftar secara acak tanpa penomoran.

Tag <ul> mencakup atribute secara keseluruhan atau Global Attributes, yang berarti bahwa Anda bisa menyisipkan semua atribute yang termasuk kedalam global attributes.

Secara default penggunaan dari Tag <ul> menampilkan daftar item dengan di-awali simbol bullet, Simbol bullet tersebut bisa dignti dengan simbol lain menggunakan atribut type dengan nilainya yaitu Circle, Disc, Square.

Daftar Tabel untuk Tag <ul>
NoNilaiDeskripsi
1CirclePenanda Pada Daftar item dengan bentuk lingkaran
2DiscPenanda Pada Daftar item dengan bentuk Bullet
3SquarePenanda Pada Daftar item dengan bentuk Kotak

Penggunaan Tag <ul> digunakan bersamaan dengan Tag <li>. Tag <li> tersebut menurut saya berfungsi untuk memisahkan antara item satu dengan item lainnya sehingga membentuk sebuah daftar item. berikut contohnya.

contoh kode/program/sintaks html
<!DOCTYPE html>
<html>
    <head>
        <title>Contoh Penggunaan Elemen UL</title>
    </head>
    <body>
        <p> Unordered List </p>
        <ul type="Square">
            <li> Senin </li>
            <li> Selasa </li>
            <li> Rabu </li>
            <li> Kamis </li>
            <li> Jum'at </li>
            <li> Sabtu </li>
            <li> Minggu </li>
        </ul>
    </body>
</html>

Berikut Screenshot dari contoh kode Html diatas jika dijalankan pada halaman web.

Screenshot contoh elemen UL
Gambar 1

2. Tag <ol>

Tag <ol> merupakan kebalikannya dari Tag <ul>. Tag <ol> berfungsi untuk membuat daftar secara Terurut/Ordered List atau sebuah daftar yang penting urutannya.

Ordered List maksudnya yaitu sebuah daftar item yang di-awali dengan penomoran otomatis yang berurut dari angka 1 sampai 10 dan seterusnya, atau bisa juga urutan huruf dari A ke Z.

Sama seperti Tag sebelumnya, Tag <ol> juga memiliki atribut type dengan beberapa value atau nilai-nya. berikut beberapa Nilai dari atribut type.

Daftar Tabel untuk Tag <ol>
NoNilaiDeskripsi
11Penomoran otomatis dari angka 1 - 99 dan setersunya.
2APenomoran otomatis dengan huruf Kapital(A-Z)
3aPenomoran otomatis dengan huruf kecil(a-z)
4IPenomoran otomatis dengan angka Romawi Besar
5iPenomoran otomatis dengan angka Romawi Kecil

Penggunaan Tag <ol> juga lebih sering digunakan bersamaan dengan Tag <li>. dan berikut adalah contoh kodenya.

contoh kode/program/sintaks html
<!DOCTYPE html>
<html>
    <head>
        <title>Contoh Penggunaan Elemen OL</title>
    </head>
    <body>
        <p> Ordered List </p>
        <ol type="a">
            <li> Senin </li>
            <li> Selasa </li>
            <li> Rabu </li>
            <li> Kamis </li>
            <li> Jum'at </li>
            <li> Sabtu </li>
            <li> Minggu </li>
        </ol>
    </body>
</html>

Berikut Screenshot dari contoh kode Html diatas jika dijalankan pada halaman web.

Screenshot contoh elemen OL
Gambar 2

3. Tag <dl>

Untuk membuat daftar beserta dengan penjelasannya atau Description Lists, HTML telah menyediakan Tag khusus yaitu Tag <dl>. Fungsi dari Tag <dl> adalah untuk menulis istilah dalam bentuk daftar beserta dengan deskripsinya. Elemen ini digunakan bersamaan dengan tag <dt> dan Tag <dd>. berikut contoh kodenya.

contoh kode/program/sintaks html
<!DOCTYPE html>
<html>
    <head>
        <title>Contoh Penggunaan Elemen DL</title>
    </head>
    <body>
        <p> Description List </p>
        <dl>
            <dt> Alay </dt>
            <dd> Singkatan dari Anak Layangan </dd>
            <dt> Lebay </dt>
            <dd> Singkatan dari kata berlebihan </dd>
        </dl>
    </body>
</html>

Berikut Screenshot dari contoh kode Html diatas jika dijalankan pada halaman web.

Screenshot contoh elemen DL
Gambar 3

Dari Contoh Kode dan Hasil Screenshot diatas, Tag <dt> berfungsi untuk menampung kata istilah seperti kamus. sedangkan Tag <dd> untuk menampung Deskripsi atau penjelasan dari istilah yang ditulis dalam Tag <dt>.

4. Nested List

Nested list merupakan Sebuah daftar yang memiliki daftar lagi di dalam itemnya. atau bisa kita sebut dengan daftar bersarang. Dan jangan lupa, untuk menulis daftar item, Gunakan Tag <li> sebagai pembungkus dari nama item.

contoh kode/program/sintaks html
<!DOCTYPE html>
<html>
    <head>
        <title>Contoh Penggunaan Elemen DL</title>
    </head>
    <body>
        <p> Nested List </p>
        <ol>
            <li> HONEYCOMB
                <ul>
                    <li> Android 3.0 - API level 11 </li>
                    <li> Android 3.1 - API level 12 </li>
                    <li> Android 3.2 - API level 13 </li>
                </ul>
            </li>
            <li> ICE CREAM SANDWICH </li>
            <li> JELLY BEAN </li>
        </ol>
    </body>
</html>

Berikut Screenshot dari contoh kode Html diatas jika dijalankan pada halaman web.

Screenshot contoh Nested List
Gambar 4

Dari contoh diatas diketahui bahwa daftar pertama adalah Tag <ol> dengan item : Honeycomb, ice cream sandwich, dan jelly bean. didalam Tag <ol> terdapat daftar lagi pada item HoneyComb yaitu Tag <ul> dengan itemnya yaitu : Android 3.0, Android 3.1, dan Android 3.2 .

Yang perlu diperhatikan dari contoh kode html diatas adalah Tag <ul> yang ditulis diantara Tag <li> </li>. dimana Tag <ul> tersebut adalah sebuah daftar baru yang bersarang pada Tag <ol>.