Home » Belajar » HTML » Belajar HTML Dasar » List Teks

List Teks HTML

Terkadang kita menampilkan suatu daftar di dalam teks. untuk melakukannya pada dokumen HTML kita bisa menggunakan tag ol (Ordered List) atau ul (Unordered List) dan setiap item di dalam list tersebut dimasukan dalam tag li. berikut contoh penggunaan dan penjelasannya:

List Teks Berurutan OL (Ordered List)

Tag ol akan menampilkan item dengan angka yang berurutan secara otomatis, kita tidak perlu menambahkan angka tersebut secara manual.

<ol>
    <li>Jambu</li>
    <li>Mangga</li>
    <li>Pisang</li>
    <li>Jeruk</li>
</ol>
|

Contoh di atas akan menampilkan daftar dengan awalan angka 1, 2, 3, dst. selain dengan awalan angka, kita juga bisa menggunakan awalan a, b, c, dst. dengan cara memberi atribut type pada tag ol. contoh:

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

List Teks Tidak Berurutan UL (Unordered List)

Untuk daftar teks yang tidak berurutan adalah dengan menggunakan tag ul, daftar teks akan tampil dengan simbol lingkaran kecil sebagai awalan teks, contoh:

<ul>
    <li>Jambu</li>
    <li>Mangga</li>
    <li>Pisang</li>
    <li>Jeruk</li>
</ul>
|

Selain awalan yang berbentuk lingkaran (disc), ada juga beberapa jenis lain yaitu circle & square. secara default type ini berisi disc. berikut contoh untuk yang menggunakan square:

<ul type="square">
    <li>Jambu</li>
    <li>Mangga</li>
    <li>Pisang</li>
    <li>Jeruk</li>
    <li>Nanas</li>
</ul>
|

Multilevel List

List yang memiliki sub-list lagi di dalamnya, berikut contohnya:

<ul>
    <li>Buah-buahan
        <ol>
            <li>Rambutan</li>
            <li>Jeruk</li>
            <li>Apel</li>
        </ol>
    </li>
    <li>Sayur-mayur</li>
    <li>Mobil
        <ul type="circle">
            <li>Sedan</li>
            <li>Jeep</li>
        </ul>
    </li>
   <li>Lain-lain</li>
</ul>
|