Tutorial HTML List: Membuat Daftar di HTML

Tutorial HTML ListHTML menyediakan fasilitas untuk menampilkan daftar/list. List harus memiliki satu atau lebih elemen di dalamnya. Membuat daftar pada HTML bisa dengan tiga cara antara lain:

  • <ul> (Unordered List) , membuat daftar tidak terurut;
  • <ol> (Ordered List), membuat daftar terurut;
  • <dl> (Description List), membuat daftar dengan deskripsi.

Membuat Daftar tidak Terurut

Gunakan tag <ul> untuk membuat daftar tidak terurut. Item atau keterangan dari daftar menggunakan tag <li>. Setiap item ditandai dengan titik (bullet) hitam di awal secara default. Tag <ul> digunakan jika ingin menampilkan daftar yang ada tidak urutan atau rentetan khusus.

<!DOCTYPE html>
<html>

<head>
    <title>HTML List Ul</title>
</head>

<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>

</html>

Hasilnya:

HTML List ul

Penanda Daftar tidak Terurut

Secara default, penanda dari daftar menggunakan <ul> adalah bullet (bulatan hitam kecil). Gunakan properti CSS list-style-type untuk mengubah penanda. Penanda yang tersedia untuk daftar tidak terurut antara lain:

  • disc, bentuk default (bulatan hitam kecil)
  • circle, bentuk lingkaran
  • square, bentuk kotak
  • none, tanpa penanda
<!DOCTYPE html>
<html>

<head>
    <title>HTML List Ul list-style-type</title>
</head>

<body>
    <ul style="list-style-type: disc;">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
    <ul style="list-style-type: circle;">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
    <ul style="list-style-type: square;">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
    <ul style="list-style-type: none;">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>

</html>

Hasilnya:

HTML List ul style type

Membuat Daftar Terurut

Gunakan tag <ol> untuk membuat daftar tidak terurut. Item atau keterangan dari daftar menggunakan tag <li>. Setiap item ditandai dengan angka diikuti titik di awal secara default. Tag <ol> digunakan jika ingin menampilkan daftar yang ada urutan dan rentetan khusus.

<!DOCTYPE html>
<html>

<head>
    <title>HTML List Ol</title>
</head>

<body>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
</body>

</html>

Hasilnya:

HTML List ol

Penanda Daftar Terurut

Secara default, penanda dari daftar menggunakan <ol> adalah angka diikuti titik. Gunakan atribut HTML type untuk mengubah penanda. Penanda yang tersedia untuk daftar terurut antara lain:

  • type="1", penanda berupa angka (default)
  • type="A", penanda berupa huruf kapital
  • type="a", penanda berupa huruf kecil
  • type="I", penanda berupa huruf romawi kapital
  • type="i", penanda berupa huruf romawi kecil
<!DOCTYPE html>
<html>

<head>
    <title>HTML List Ol Type</title>
</head>

<body>
    <ol type="1">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
    <ol type="A">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
    <ol type="a">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
    <ol type="I">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
    <ol type="i">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
</body>

</html>

Hasilnya:

HTML List ol type

Mengatur Mulai Daftar Terurut

Gunakan atribut HTML start untuk mengatur awal penomoran dari tag <ol>.

<!DOCTYPE html>
<html>

<head>
    <title>HTML List Ol Start</title>
</head>

<body>
    <ol type="1" start="2">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
    <ol type="a" start="3">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
    <ol type="i" start="4">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
</body>

</html>

Hasilnya:

HTML List ol type

Daftar Bersarang (List dalam List)

Daftar dapat dibuat bersarang (di dalam daftar ada daftar) baik yang terurut, tidak terurut, maupun gabungan keduanya. Isikan tag <ul> atau <ol> di dalam tag <li> untuk membuat daftar baru.

<!DOCTYPE html>
<html>

<head>
    <title>HTML List Nested</title>
</head>

<body>
    <ul>
        <li>HTML
            <ol>
                <li>HTML 4</li>
                <li>HTML 5</li>
            </ol>
        </li>
        <li>CSS
            <ul>
                <li>CSS1</li>
                <li>CSS2</li>
                <li>CSS3</li>
            </ul>
        </li>
        <li>JavaScript</li>
    </ul>
</body>

</html>

Hasilnya:

HTML List Nested

Penanda Daftar dengan Gambar

Gunakan properti CSS list-style-image untuk mengubah penanda menjadi gambar baik untuk tag <ol> maupun <ul>.

<!DOCTYPE html>
<html>

<head>
    <title>HTML List Image</title>
</head>

<body>
    <ul style="list-style-image: url('star.png');">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
    <ol style="list-style-image: url('favorite.png');">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
</body>

</html>

Hasilnya:

HTML List Image

Membuat Daftar Deskripsi

HTML juga mendukung pembuatan daftar deskripsi. Daftar deskripsi adalah daftar yang terdiri dari istilah dan keterangan dari masing-masing istilah. Tag yang digunakan adalah:

  • Tag <dl> (description list), untuk membuat daftar deskripsi
  • Tag <dt> (description term), untuk membuat nama istilah
  • Tag <dd> (definition description), untuk membuat arti dari istilah
<!DOCTYPE html>
<html>

<head>
    <title>HTML List dl</title>
</head>

<body>
    <dl>
        <dt>HTML</dt>
        <dd>Hyper Text Markup Language</dd>
        <dt>CSS</dt>
        <dd>Cascading Style Sheets</dd>
        <dt>JavaScript</dt>
        <dd>JavaScript Dapat Merubah Isi HTML</dd>
    </dl>
</body>

</html>

Hasilnya:

HTML List Dl

Kesimpulan Tutorial HTML List

  • Gunakan tag HTML <ul> untuk membuat daftar tidak terurut
  • Gunakan tag HTML <ol> untuk membuat daftar terurut
  • Gunakan atribut HTML start untuk mengatur awal penomoran daftar terurut
  • Gunakan properti CSS list-style-type untuk mengubah penanda daftar
  • Letakkan tag HTML <ul> maupun <ol> ke dalam tag <li> untuk membuat daftar bersarang
  • Gunakan properti CSS list-style-image untuk mengubah penanda daftar dengan gambar
  • Gunakan tag HTML <dl>, <dt>, <dd> untuk membuat daftar deskripsi

Apa Berikutnya?

Setelah Anda memahami Tutorial HTML List, Anda bisa belajar tentang Tutorial HTML Table Membuat Tabel di HTML atau cek semua daftar Tutorial HTML.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.