Skip to HeaderSkip to PostSkip to Footer

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

    Komentar

    Posting Komentar

    Harap berikan komentar yang relevan dengan topik tulisan.
    Jangan menyertakan link yang tidak berhubungan dengan konten tulisan. Apabila komentar mengandung link (apalagi yang tidak relevan), maka komentar akan dihapus.
    Budayakan sopan santun, hindari penggunaan bahasa yang provokatif, SARA, pornografi.
    Kritik dan saran yang membangun untuk konten ataupun untuk blog sangat berarti bagi Ninura.