HTML Lists

Daftar Isi

HTML Lists - Berikut ini adalah rangkuman tentang tag/ elemen HTML Lists yang terdiri dari elemen UL, OL, dan DL.

Apa itu HTML Lists?

HTML Lists adalah elemen HTML yang berfungsi untuk menampilkan list di halaman website. Sampai sekarang, ada tiga elemen yang berfungsi sebagai HTML Lists. Tag tersebut adalah UL yang berarti Unordered List, OL yang berarti Ordered List, dan DL yang berarti Descriptive List. Untuk lebih jelasnya, saya akan bahas satu per satu.

Unordered Lists (UL)

UL adalah elemen HTML yang berfungsi untuk menampilkan daftar tanpa urutan yang jelas. UL secara default ditampilkan menggunakan bullet.

Tag atau elemen UL ini memerlukan elemen LI untuk menampilkan daftar setiap item pada list.

Contoh Format

<ul>
<li>Materi 1</li>
<li>Materi 2</li>
<li>Materi 3</li>
</ul>

Contoh Hasil

• Materi 1
• Materi 2
• Materi 3

Ordered Lists (OL)

OL adalah elemen HTML yang berfungsi untuk menampilkan daftar dengan urutan yang jelas. OL secara default ditampilkan menggunakan angka.

Seperti UL, tag atau elemen OL ini memerlukan elemen LI untuk menampilkan daftar setiap item pada list.

Contoh Format

<ol>
<li>Materi 1</li>
<li>Materi 2</li>
<li>Materi 3</li>
</ol>

Contoh Hasil

1. Materi 1
2. Materi 2
3. Materi 3

Descriptive Lists (DL)

DL adalah elemen HTML yang berfungsi untuk menampilkan daftar dengan deskripsi untuk setiap itemnya. Secara default, deskripsi dari item ditampilkan tanpa simbol dan setiap list item ditampilkan menggunakan simbol strip ( - ).

Tag atau elemen DL ini diisi menggunakan elemen DT untuk deskripsi item dan DD untuk daftar item yang ingin ditampilkan.

Contoh Format

<dl>
<dt>Olahan Nasi</dt>
<dd>Nasi Goreng</dd>
<dd>Nasi Rames</dd>
<dd>Nasi Kuning</dd>
<dt>Olahan Ikan</dt>
<dd>Ikan Goreng</dd>
<dd>Ikan Bakar</dd>
<dd>Ikan Sambal Ijo</dd>
</dl>

Contoh Hasil

Olahan Nasi

Nasi Goreng

Nasi Rames

Nasi Kuning

Olahan Ikan

Ikan Goreng

Ikan Bakar

Ikan Sambal Ijo

Atribut dan Fungsi

Setiap HTML Lists sebenarnya mempunyai atribut yang bisa digunakan didalamnya. Meski begitu, banyak atribut yang sudah deprecated karena jarang digunakan. Dampaknya, banyak browser yang tidak menanggapi atribut ini dan menampilkan HTML List tanpa menjalankan fungsi dari tiap atribut. Sekarang ini, HTML Lists lebih sering dimodifikasi menggunakan metode CSS Styling.

Atribut	Fungsi	Value	Contoh
type	Mengubah jenis icon atau list type yang digunakan.	circle / square / 1 / a / A	circle
start	Atribut ini khusus untuk ordered list (OL), yaitu untuk menentukan awal dimulainya list.	C / b / 4	4

Catatan

• Elemen HTML Lists biasanya digunakan untuk menampilkan daftar link atau poin penting dari sebuah dokumen.
• Elemen HTML Lists direkomendasikan untuk dimodifikasi menggunakan metode CSS Styling ketimbang menggunakan atribut.
• Elemen HTML Lists Ordered List dan Unordered List dapat di-nested dan digabungkan dalam satu list.
• Penggunaan elemen HTML Lists yang baik dan benar dapat membantu screen reader mengindentifikasi jenis informasi yang dibagikan dan memperbaiki nilai SEO dari sebuah konten.

Penutup

Itulah sedikit rangkuman tentang HTML Lists yang bisa saya bagikan. Jika ada yang kurang, kurang jelas, atau salah silahkan beritahukan atau tanyakan saja melalui kolom komentar di bawah. Semoga bermanfaat dan sampai jumpa di tulisan saya lainnya.

Daftar isi atau list yang berisi rangkuman dari keseluruhan konten akan sangat membantu pengguna mencari informasi yang diperlukan secara lebih mudah.Ninura