HTML List

HTML List merupakan element yang digunakan untuk menyusun daftar yang terdiri dari satu atau beberapa item. Pada HTML terdapat tiga jenis list yaitu :

1. Unordered List
2. Ordered List
3. Description List

Unordered List

unordered list merupakan list yang tidak memberikan pengurutan terhadap item yang terdapat pada list. list jenis ini biasa disebut dengan bullet list, walaupun pada penggunaannya penandaan item pada list tidak selalu berbentuk "bullet". Pada HTML, list ini dibuat menggunakan tag <ul>. Adapun contoh syntax dari list ini dapat dilihat pada potongan kode berikut :

<ul>
        <li>....</li>
        <li>....</li>
        <li>....</li>
</ul>

item yang akan ditampilkan di dalam list dapat menggunakan tag <li> atau disebut list item. Berikut contoh dari penggunaan unordered list :

HTML :

<ul>
          <li>HTML</li>
          <li>PHP</li>
          <li>Javascript</li>
          <li>CSS</li>
</ul>

Output:

Pada unordered list, penanda setiap item memiliki beberapa bentuk berbeda seperti :

Merubah bentuk penanda atau marker pada list dapat menggunakan atribut type atau menggunakan css, berikut contohnya :

Atribut Type :

<ul type="circle">
.....
</ul>

CSS :

<ul style="list-style-type:disc;">
....
</ul>

Ordered List

Ordered list merupakan list yang memberikan pengurutan terhadap item yang terdapat pada list. list jenis ini biasa disebut dengan numbered list. Pada HTML, list ini dibuat menggunakan tag <ol>. Adapun contoh syntax dari list ini dapat dilihat pada potongan kode berikut :

<ol>
        <li>....</li>
        <li>....</li>
        <li>....</li>
</ol>

item yang akan ditampilkan di dalam list dapat menggunakan tag <li> atau disebut list item. Berikut contoh dari penggunaan ordered list :

HTML :

<ol>
          <li>HTML</li>
          <li>PHP</li>
          <li>Javascript</li>
          <li>CSS</li>
</ol>

Output :

• HTML
• PHP
• Javascript
• CSS

Penomoran yang muncul pada item akan berurutan secara otomatis berdasarkan urutan elemen <li> yang disusun. Pada ordered list, penanda setiap item memiliki beberapa bentuk berbeda seperti :

Merubah bentuk penanda atau marker pada list dapat menggunakan atribut type, berikut contohnya :

<ol type="A">
.....
</ol>

Description List

description list merupakan list yang biasa digunakan pada item yang membutuhkan deskripsi atau penjelas dari item tersebut atau yang biasa disebut dengan terms list. list ini menggunakan tag <dl> sebagai kerangka utama yang disertai dengan <dt> untuk item, dan <dd> untuk penjelasan atau deskripsi item tersebut.

<dl>
        <dt>Item 1</dt>
        <dd>Deskripsi Item 1</dd>
        <dt>Item 2</dt>
        <dd>Deskripsi Item 2</dd>
</dl>

output :

Item 1

Deskripsi Item 1

Item 2

Deskripsi Item 2

Untuk mencoba secara online, silahkan menggunakan online editor dari www.w3schools.com berikut :

Online HTML Editor