membuat list html

Cara Membuat List HTML Dengan Mudah Menggunakan Tag dl, ul, dan ol

Pasti Anda pernah melihat sebuah tulisan yang berbentuk list untuk menyebutkan beberapa item yang sama. Tentu akan lebih terlihat rapi dan terstruktur jika menggunakan list dibandingkan dengan tulisan biasa. Dalam membuat website, kita juga bisa membuat list seperti list pada umunya dengan menggunakan HTML.

Untuk dapat membuat list di HTML, tidaklah susah. Hanya diperlukan beberapa tag HTML yang sangat sederhana. Di HTML sendiri ada dua jenis list, yaitu unordered list dan ordered list. Unordered list adalah sebuah list yang tidak berurutan.

Maksudnya tidak berurutan adalah tidak memiliki angka. Sedangkan ordered list adalah kebalikan dari unordered list, yaitu list yang berurutan. Berurutan di sini maksudnya adalah memiliki angka atau huruf (tergantung pengaturan). Langsung saja kita bahas cara membuat list HTML.

Cara Membuat List HTML Dengan Menggunakan Tag ul, ol, dl

1. Dengan Tag <ul>

Tadi, kita sudah bahas kalau ada unordered list dan ordered list. Nah, tag <ul> ini merupakan tag untuk membuat list yang tidak berurutan (unordered list). Coba buat file dengan nama belajar.html. Lalu isi dengan kode. Bisa dilihat kode programnya di bawah:

<html>
    <head>
        <title>Membuat List HTML Dengan Tag ul Makinrajin</title>
    </head>
    <body>      
        <ul>    
            <li>Tulisan pertama</li>
            <li>Tulisan kedua</li>
            <li>Tulisan ketiga</li>
        </ul>
    </body>
</html>

Ketika dijalankan melalui web browser terbaik pilihan Anda, bisa dilihat hasilnya seperti gambar di bawah ini:

hasil penggunaan tag ul

Anda punya keinginan untuk mengubah lingkaran tersebut jadi bentuk lain seperti persegi? Bisa kok. Anda bisa lihat perubahan kode program di bawah:

<ul type="square">
    <li>Tulisan pertama</li>
    <li>Tulisan kedua</li>
    <li>Tulisan ketiga</li>
</ul>

Maka hasilnya akan seperti di bawah ini:

penggunaan ul type square pada html

Anda bisa mengganti kata square dengan kata circle untuk membuat lingkaran putih dengan garis tepi berwarna hitam. Berikut adalah daftar value untuk mengisi atribut type.

  • disc : Untuk membuat lingkaran berwarna hitam. Ketika tidak ada atribut type, maka yang digunakan adalah disc (default).
  • square : Untuk membuat persegi berwarna hitam.
  • circle : Untuk membuat lingkaran putih dengan garis tepi berwarna hitam.

Selain itu, Anda juga bisa membuat gambar item sendiri dengan menggunakan CSS.

2. Dengan Tag <ol>

Ketika kita menggunakan tag <ol> ini hasil yang ditampilkan memiliki nomor atau urutannya. Berikut adalah kode programnya :

<ol>
    <li>Tulisan pertama</li>
    <li>Tulisan kedua</li>
    <li>Tulisan ketiga</li>
</ol>

Ketika sudah membuat tag tersebut, maka kita bisa lihat hasilnya seperti di bawah:

membuat list menggunakan tag ol pada html

Beda kan dengan menggunakan tag <ul> ? Dengan tag <ol> kita juga bisa mengkonfigurasi akan seperti apa tampilannya. Bisa juga angkanya bukan 1,2,3,… tapi i,ii,iii,… ataupun a,b,c,…

Caranya adalah dengan menambahkan atribut type pada tag <ol>. Contohnya seperti di bawah:

<ol type="a">
  • type=”a” : Hasilnya akan berupa a,b,c,…
  • type=”i” : Hasilnya akan berupa i,ii,iii,…
  • type=”1″ : Hasilnya akan berupa 1,2,3,…

Anda juga bisa menggunakan huruf kapital, contohnya adalah type=”A”. Maka hasilnya akan menjadi A,B,C,… Selain itu, tag <ol> tidak harus selalu dimulai dari awal. Bisa saja Anda memulai dari pertengahan, contoh:

<ol start="4">

Perhatikan atributnya. Kita menggunakan atribut start, bukan type lagi. Ketika akan mengatur berapa nilai awal dari tag <ol>, kita menggunakan start. Tetapi ketika kita akan mengatur jenis list, kita menggunakan type. Hasilnya akan seperti di bawah:

penggunaan ol start pada html

3. Dengan Tag <dl>

Tag <dl> merupakan singkatan dari definition list. Dengan menggunakan tag ini kita juga bisa membuat list. Memang kurang populer dalam beberapa halaman website. Kebanyakan halaman website menggunakan tag <ul> maupun tag <ol> ketika akan membuat sebuah list.

Di dalam tag <dl> ini terdapat tag <dt> dan <dd>. Apa itu tag <dt> dan tag <dd>? Tag <dt> adalah induk dari list dan tag <dd> adalah anak dari list. Jika bingung, kita langsung lihat saja contohnya:

<dl>
    <dt>Tulisan pertama</dt>
        <dd>Ini adalah tulisan pertama</dd>
    <dt>Tulisan kedua</dt>
        <dd>Ini adalah tulisan kedua</dd>
    <dt>Tulisan ketiga</dt>
        <dd>Ini adalah tulisan ketiga</dd>
</dl>

Maka hasilnya akan seperti di bawah:

membuat list HTML dengan menggunakan tag dl

Membuat Nested List

Jika tadi kita telah membuat list yang sederhana, ayo kita coba sekarang membuat nested list. Nested list adalah sebuah list di dalam list. Contohnya adalah sebagai berikut:

cara membuat nested list di HTML

Sudah terbayang bagaimana cara membuat nested list seperti di atas? Saya akan berikan kode programnya untuk dipelajari.

<ol>
    <li>Pertama</li>
    <ul>
        <li>Nama : Alexandromeo</li>
        <li>NIM : 1</li>
    </ul>
    <li>Kedua</li>
    <ul>
        <li>Nama : Lawrence</li>
        <li>NIM : 2</li>
    </ul>
    <li>Ketiga</li>
    <ul>
        <li>Nama : Gunawan</li>
        <li>NIM : 3</li>
    </ul>
</ol>

Nah, itulah penjelasan tentang cara membuat list HTML dengan menggunakan tag ul, ol, dan dl. Apabila ada yang ingin ditanyakan, silakan ditanyakan melalui kolom komentar. Terima kasih.

Anda ingin memiliki web hosting dengan kualitas server tercepat di Indonesia ? Klik di sini

Leave a Reply

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