Jenis List Dalam HTML

Setelah membahas Cara Membuat Heading Pada HTML. Kali ini kita akan membahas mengenai jenis-jenis list yang ada di HTML. List yang ada di HTML cukup beragam, mirip dengan list yang ada di aplikasi pengolah kata seperti Ms.word dan sebagainya. Dari pada penasaran langsung saja kita bahas.

Pengertian List Dalam HTML

List merupakan element dengan kode tag <li> yang berfungsi menampilkan data atau teks ke dalam bentuk daftar urutan yang disetiap urutan memiliki poin tersendiri. Contoh umumnya seperti yang terdapat di daftar isi pada halaman ini. Daftar isi yang ditampilkan membentuk sebuah list atau daftar yang berurutan.

Jenis – Jenis List

Terdapat 2 jenis list didalam HTML yang bisa digunakan untuk menampilkan teks secara berurutan yaitu unordered list dan ordered list. Contoh penerapannya bisa dilihat pada gambar dibawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jenis List</title>
</head>
<body>
    <h3>Unordered List</h3>

    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ul>  

    <h3>Ordered List</h3>

    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ol> 
</body>
</html>

List HTML

Contoh diatas menjelaskan bahwa unordered list menampilkan data dalam bentuk simbol lingkaran dan ditandai dengan tag <ul> sedangkan ordered list menampilkan data dalam bentuk angka dan ditandai dengan tag<ol>.

Bentuk Lain Unordered List

Seperti yang sudah kita bahas sebelumnya, untuk menampilkan list dalam bentuk simbol kita menggunakan tag <ul>. Ada beberapa bentuk lain yang bisa digunakan untuk membuat list selain bentuk lingkaran, contohnya bisa kita lihat pada gambar dibawah ini.

<h3>Unordered List</h3>

    <h4>Contoh Bentuk DISC</h4>
    <ul style="list-style-type:disc;">
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ul>  

    <h4>Contoh Bentuk CIRCLE</h4>
    <ul style="list-style-type:circle;">
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ul>  

    <h4>Contoh Bentuk SQUARE</h4>
    <ul style="list-style-type:square;">
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ul>  

    <h4>Contoh Bentuk NONE</h4>
    <ul style="list-style-type:none;">
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ul>

Bentuk Unordered List

Dari contoh diatas bisa kita lihat bentuk dari unordered list yang bisa kamu terapkan. Kode yang ditambahkan juga tidak banyak, hanya menambahkan koding css sedikit saja pada tag <ul> dan sesuaikan bentuknya.

Bentuk Lain Ordered List

Tak hanya unordered list saja yang punya banyak bentuk, ordered list juga memiliki bentuk lain yang bisa digunakan dalam menampilkan data. Ada beberapa bentuk lain yang bisa digunakan untuk membuat list selain angka, contohnya bisa kita lihat pada gambar dibawah ini.

<h3>Ordered List</h3>

    <h4>Contoh Bentuk Angka(Default)</h4>
    <ol type="1">
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ol> 

    <h4>Contoh Bentuk Huruf Kapital/Besar</h4>
    <ol type="A">
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ol> 

    <h4>Contoh Bentuk Huruf Kecil</h4>
    <ol type="a">
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ol> 

    <h4>Contoh Bentuk Nomor Romawi Besar</h4>
    <ol type="I">
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ol> 

    <h4>Contoh Bentuk Nomor Romawi Kecil</h4>
    <ol type="i">
        <li>HTML</li>
        <li>CSS</li>
        <li>Javascript</li>
    </ol> 
Bentuk Ordered List

Dari contoh diatas bisa kita lihat bentuk apa saja yang bisa kita gunakan ketika menggunakan ordered list. Berbeda dengan unordered list, kita hanya perlu menambahkan type pada tag <ol> dan sesuaikan kebutuhan listnya.

Kesimpulan

List merupakan element dengan kode tag <li> yang berfungsi menampilkan data atau teks ke dalam bentuk daftar urutan yang disetiap urutan memiliki poin tersendiri. Jika dikombinasikan dengan css dan javascript, penggunaan tag list juga bisa dikembangkan lebih luas lagi, tidak hanya sekedar membuat daftar saja. Namun bisa juga diterapkan ke navigasi pada sebuah website dan masih banyak yang bisa dilakukan.

Sumber :
W3schools.com/lists

Leave a Comment