Mengenal 3 Macam List pada HTML

Assalamu'alaikum Wr.Wb



    Hallo teman-teman, bertemu lagi dengan saya Lina. Oke, pada artikel kali ini saya akan memperkenalkan kepada anda pembaca setia blogger megenai macam-macam list yang terdapat pada html. List merupakan elemen yang digunakan untuk menampilkan informasi berupa list atau daftar. Macam-macam list antara lain yaitu:

1. Ordered list, digunakan untuk list terurut. Pada <ol> menggunakan angka yang mana angka tersebut akan secara otomatis muncul.
2. Unordered list, digunakan untuk list yang tidak berurutan. Pada <ul> menggunakan simbol seperti lingkaran atau persegi.
3. Descriptiona list, list yang berisi definisi.

• Membuat Ordered List

<h2>Distro Linux</h2>
    <ol>
        <li>Ubuntu</li>
        <li>Mint</li>
        <li>Debian</li>
        <li>Fedora</li>
        <li>Kali Linux</li>
    </ol>

Ordered

Bagaimana jika ingin menggunakan huruf atau romawi? Nah, mari langsung saja kita simak satu-persatu.
1. List bertype alfabet.

<h3>List dengan type alfabet</h3>
        <ol type="a">
            <li>Semangat</li>
            <li>Sabar</li>
            <li>Senyum</li>
        </ol>

<ol> bertype alfabet

2. List bertype alfabet kapital ( huruf besar).

<h3>List dengan type alfabet kapital</h3>
        <ol type="A">
            <li>Ikhlas</li>
            <li>Tawakal</li>
            <li>Bertahan</li>
        </ol>

<ol> bertype alfabet kapital

3. List bertype romawi.

 <h3>List dengan type romawi</h3>
        <ol type="i">
            <li>Berjuang</li>
            <li>Bertahan</li>
            <li>Bijaksana</li>
        </ol>

<ol> bertype romawi

4. List bertype romawi kapital.

<h3>List dengan type romawi kapital</h3>
        <ol type="I">
            <li>Sapa</li>
            <li>Senyum</li>
            <li>Salam</li>
        </ol>

<ol> bertype romawi kapital

• Membuat Unordered list.

List tidak terurut biasanya menggunakan simbol-simbol. Caranya dengan menggunakan tag <ul> unordered list.
Contoh:

<h3>Daftar bahasa pemrograman</h3>
    <ul>
        <li>C</li>
        <li>C++</li>
        <li>Java</li>
        <li>PHP</li>
        <li>Perl</li>
    </ul>

<ul>

Secara default list yang muncul menggunakan simbol lingkaran kecil {disc}.
Jika kita ingin mengubahnya seperti pada ordered list kita bisa menggunakan atribut type.
1. List bertype square.

<h3>Type square</h3>
    <ul type="square">
        <li>C</li>
        <li>C++</li>
        <li>Java</li>
        <li>PHP</li>
    </ul>

Unordered list bertype square

2. List bertype disc.

    <h3>Type disc</h3>
    <ul type="disc">
        <li>C</li>
        <li>C++</li>
        <li>PHP</li>
        <li>Java</li>
    </ul>

<ul> bertype square

 3. List bertype none.

<h3>Type none</h3>
    <ul type="none">
        <li>C</li>
        <li>C++</li>
        <li>PHP</li>
        <li>Java</li>
    </ul>

<ul> bertype none

4. List bertype circle.

<h3>Type circle</h3>
    <ul type="circle">
        <li>C</li>
        <li>C++</li>
        <li>Java</li>
        <li>Phyton</li>
    </ul>