Belajar HTML 6: cara membuat list pada html

List merupakan salah satu elemen HTML yang sering digunakan untuk menampilkan daftar item yang berurutan atau tidak berurutan.

List dapat berguna untuk membuat outline, menu navigasi, glossary, dan lain-lain.

Dalam artikel ini, kita akan belajar cara membuat list pada HTML dengan menggunakan tiga jenis list yang tersedia: ordered list, unordered list, dan description list.

Ordered List

Ordered list adalah jenis list yang menampilkan item-item dalam urutan tertentu, biasanya dengan menggunakan angka atau huruf sebagai penanda.

Ordered list cocok digunakan untuk menampilkan daftar langkah-langkah, prioritas, ranking, dan sebagainya.

Untuk membuat ordered list pada HTML, kita menggunakan tag <ol> sebagai pembuka dan </ol> penutup list. Kemudian di dalamnya kita menambahkan tag <li> untuk setiap item yang ingin ditampilkan. Tag <li> singkatan dari list item.

Contoh kode:

<ol>
  <li>Membuat dokumen HTML</li>
  <li>Membuat judul halaman</li>
  <li>Membuat paragraf teks</li>
  <li>Membuat gambar</li>
  <li>Membuat link</li>
</ol>

Contoh hasil:

Secara default, ordered list akan menggunakan angka (1, 2, 3,…) sebagai penanda urutan item-itemnya. Namun kita bisa mengubahnya dengan menggunakan atribut type pada tag <ol>. Atribut type dapat menerima lima nilai berikut:

• type="1" untuk angka arab (1, 2, 3,…)
• type="a" untuk huruf kecil (a,b,c,…)
• type="A" untuk huruf besar (A,B,C,…)
• type="i" untuk angka romawi kecil (i, ii , iii,…)
• type="I" untuk angka romawi besar (I , II , III,…)

Contoh kode:

<ol type="a">
  <li>Menginstal editor teks</li>
  <li>Menginstal browser web</li>
  <li>Menginstal validator HTML</li>
</ol>

Contoh hasil:

Selain itu kita juga bisa mengatur nilai awal dari urutan item-item dengan menggunakan atribut start pada tag <ol>. Atribut start harus diisi dengan angka yang sesuai dengan tipe penanda yang dipilih.

Contoh kode:

<ol type="A" start="5">
  <li>Belajar dasar-dasar HTML</li>
  <li>Belajar elemen-elemen HTML</li>
  <li>Belajar atribut-atribut HTML</li>
</ol>

Contoh hasil:

Unordered List

Unordered list adalah jenis list yang menampilkan item-item tanpa urutan tertentu, biasanya dengan menggunakan simbol-simbol seperti lingkaran atau kotak sebagai penanda. Unordered list cocok digunakan untuk menampilkan daftar kategori, fitur-fitur produk, hobi, dan sebagainya.

Untuk membuat unordered list pada HTML, kita menggunakan tag <ul> sebagai pembuka dan penutup list. Kemudian di dalamnya kita menambahkan tag <li> untuk setiap item yang ingin ditampilkan.

Contoh kode:

<ul>
    <li>Buku-buku favoritku:</li>
    <li>The Lord of the Rings</li>
    <li>The Hitchhiker's Guide to the Galaxy</li>
    <li>The Little Prince</li>
    <li>Harry Potter and the Philosopher's Stone</li>
    <li>Nineteen Eighty-Four </li>
</ul>

Contoh hasil:

Unordered list secara default akan menggunakan lingkaran kecil (disc) sebagai penanda item-itemnya. Namun kita bisa mengubahnya dengan menggunakan atribut type pada tag <ul>. Atribut type dapat menerima tiga nilai berikut:

• type=“disc” untuk lingkaran kecil (disc)
• type=“circle” untuk lingkaran kosong (circle)
• type=“square” untuk kotak (square)

Contoh kode:

<ul type="circle">
  <li>Genre musik favoritku:</li>
  <li>Rock</li>
  <li>Pop</li>
  <li>Jazz</li>
  <li>Reggae</li>
</ul>

Contoh hasil:

Description List

Description list adalah jenis list yang menampilkan item-item dalam pasangan istilah dan definisi. Description list cocok digunakan untuk menampilkan daftar istilah-istilah teknis, singkatan-singkatan, glossary, dan sebagainya.

Untuk membuat description list pada HTML, kita menggunakan tag <dl> sebagai pembuka dan penutup list. Kemudian di dalamnya kita menambahkan tag <dt> untuk setiap istilah yang ingin ditampilkan dan tag <dd> untuk setiap definisi yang ingin ditampilkan.

Contoh kode:

<dl>
  <dt>HTML</dt>
  <dd>Hypertext Markup Language adalah bahasa markup yang digunakan untuk membuat struktur dokumen web.</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen web.</dd>
  <dt>JavaScript</dt>
  <dd>JavaScript adalah bahasa pemrograman yang digunakan untuk membuat interaksi dinamis pada dokumen web.</dd>
</dl>

Contoh hasil:

Kesimpulan

Dengan mengikuti langkah-langkah diatas, Anda dapat dengan mudah membuat list pada HTML. Jangan lupa untuk selalu memeriksa kode anda setelah melakukan perubahan serta saya ucapkan semangat untuk belajar.

Selanjutnya belajar apa?

Untuk pembelajaran berikutnya, kita akan belajar cara membuat tabel di html. Tentunya dalam membuat tabel kita perlu mengetahui tag-tag apa saja yang menjadi pembentuk sebuah tabel pada html.

Pelajari : 📖 Belajar HTML 07: cara membuat tabel dengan html