Home / HTML / Tutorial HTML Bagian 5: Membuat List di HTML (Tag li)

Tutorial HTML Bagian 5: Membuat List di HTML (Tag li)

Tutorial sebelumnya kita sudah membahas cara membuat paragraf di HTML. Tutorial HTML kali ini akan membahas tentang cara membuat list di HTML. List digunakan untuk membuat daftar item berdasarkan jenis, kategori maupun kelompok. HTML menyediakan dua jenis list yaitu list yang berurutan(ordered list) dan tidak berurutan(unordered list). Ordered list menampilkan list secara berurutan, dapat dalam urutan angka maupun huruf sedangkan unordered list menampilkan list dalam bentuk bulatan hitam, bulatan kosong dan kotak/persegi.

Untuk membuat order list di HTML, terlebih dahulu diawali dengan tag jenis listnya, atribut type list kemudian item list. Ordered list menggunakan tag <ol>, unordered list menggunakan tag <ul> dan tag <li> untuk item list.

Membuat list berurut (ordered list)

Ordered list menggunakan atribut type untuk menampilkan bentuk item listnya. Pilihan urutan list pada ordered list dapat dalam bentuk angka(numeric), angka romawi dan huruf. Jika kita tidak membuat type list, maka akan dianggap type listnya adalah angka. Untuk lebih jelasnya, berikut contoh membuat ordered list:

<!DOCTYPE html>
<html>
  <head>
        <title>Membuat Ordered List di HTML - ITGeek.id</title>
    </head>
  <body>
        <h1>Tutorial pemrograman</h1>
        <ol>
            <li>HTML</li>
            <li>PHP</li>
            <li>VB.Net</li>
        </ol>
        <ol type="a">
            <li>HTML</li>
            <li>PHP</li>
            <li>VB.Net</li>
        </ol>
        <ol type="i">
            <li>HTML</li>
            <li>PHP</li>
            <li>VB.Net</li>
        </ol>
  </body>
</html>
  • Pada contoh diatas, untuk membuat ordered list terlebih dahulu dimulai dengan tag <ol> pada baris 8 untuk membuat list yang tanpa menggunakan atribut type. Item listnya akan otomatis dalam bentuk angka. Ordered list yang pertama ditutup dengan tag </ol> di baris 12. Item list terletak pada baris 9 sampai 11. Setiap item dimulai dengan tag <li> dan diakhiri dengan tag </li>.
  • Baris 13 sampai 17 juga merupakan sebuah ordered list, perbedaanya hanya pada atribut type list menggunakan huruf berurut(a-z). Begitu juga dengan baris 18 sampai 22, sebuah list yang menggunakan type angka romawi.

Hasilnya di browser adalah seperti gambar berikut

Membuat List di HTML: Contoh Ordered List

Membuat list tidak berurut (unordered list)

Penggunaan tag <ul> untuk membuat unordered list tidak tidak jauh berbeda dengan onordered list yang juga menggunakan atribut type untuk menampilkan bentuk listnya. Pilihan atribut type list pada unordered list yaitu disc untuk membuat item list dalam bentuk bulatan hitam, circle untuk membuat item list dengan bentuk bulatan putih dan square untuk membuat list berbentuk kotak.

Secara default, unordered list yang tidak diberikan atribut type atau hanya <ul> akan dianggap menggunakan type disc dan ditampilkan dengan bulatan hitam.

Untuk lebih jelasnya, berikut contoh membuat list dengan jenis unordered list.

<!DOCTYPE html>
<html>
  <head>
        <title>Membuat Unordered List di HTML - ITGeek.id</title>
    </head>
  <body>
        <h1>Tutorial pemrograman</h1>
        <ul type="disc">
            <li>HTML</li>
            <li>PHP</li>
            <li>VB.Net</li>
        </ul>
        <ul type="circle">
            <li>HTML</li>
            <li>PHP</li>
            <li>VB.Net</li>
        </ul>
        <ul type="square">
            <li>HTML</li>
            <li>PHP</li>
            <li>VB.Net</li>
        </ul>
  </body>
</html>
  • Pada contoh diatas, untuk membuat unordered list terlebih dahulu dimulai dengan tag <ul  type=”disc”> pada baris 8 untuk membuat list dengan bentuk bulatan hitam. List yang pertama ditutup dengan tag </ul> di baris 12. Item list terletak pada baris 9 sampai 11. Setiap item dimulai dengan tag <li> dan diakhiri dengan tag </li>.
  • Baris 13 sampai 17 juga merupakan sebuah list, perbedaanya hanya pada type list circle yang menampilkan list dengan bulatan kosong/putih. Begitu juga dengan baris 18 sampai 22, sebuah list yang menggunakan type list square (kotak).
  • Jika dalam sebuah unordered list <ul> tidak dibuat atribut type maka otomatis akan ditampilkan list dalam bentuk circle.

Hasil contoh cara membuat list dengan  unordered list seperti gambar dibawah:

Membuat List di HTML: Contoh Unrdered List

Membuat list Bersarang

Dalam menampilkan sebuah list, terkadang bentuknya bersarang. Seperti contoh sebelumnya, item listnya ada tiga yaitu: HTML, PHP, VB.net kemudian item list yang pertama memiliki item list lagi. Lebih jelasnya seperti list berikut:

Jadi bentuk listnya adalah di dalam list terdapat list. Berikut ini cara membuat list seperti diatas:

<!DOCTYPE html>
<html>
  <head>
        <title>Membuat Ordered List di HTML - ITGeek.id</title>
    </head>
  <body>
        <h1>Tutorial pemrograman</h1>
        <ul>
            <li>HTML
                <ol>
                    <li>Pengenalan HTML</li>
                    <li>Tag, Atribut dan Elemen HTML</li>
                    <li>Membuat paragraf di HTML</li>
                    <li>dst</li>
                </ol>
            </li>
            <li>PHP
                <ol>
                    <li>Pengenalan Webserver</li>
                    <li>Pengenalan PHP</li>
                    <li>dst</li>
                </ol>
            </li>
            <li>VB.Net</li>
        </ul>
  </body>
</html>
  • Pada contoh diatas, list tersebut dimulai dari baris 8 sampai 25 dan jenis list yang digunakan adalah unordered list <ul>. Item list <li>pertama adalah baris 9 sampai 16. Di dalam item list <li> yang pertama terdapat list lagi dengan jenis ordered <ol> yaitu pada baris 10 sampai 15 dan memiliki tiga item list.
  • Sama halnya dengan baris 17 sampai 23.

Hasilnya adalah seperti berikut

Membuat List di HTML: Contoh List bersarang

Jika listnya bersarang sampai beberapa kali, maka tinggal dibuat list baru dalam item list yang di inginkan.

Demikian tutorial HTML tentang cara membuat list. Selamat mencoba dan semoga bermanfaat.

Comments

comments

About Roberto Kaban

Roberto Kaban
My mission in life is not merely to survive, but to thrive; and to do so with some passion, some compassion and some humor.

Tutorial Lain

Tutorial HTML Bagian 2: Pengenalan Tag, Atribut dan Elemen HTML

Toturial Pengenalan HTML yang sebelumnya, kita sudah mengetahui apa itu HTML, struktur dasar HTML, cara …

Leave a Reply

Your email address will not be published. Required fields are marked *