List HTML

HTML bisa menampilkan beberapa jenis list atau daftar, diantaranya yaitu: ordered list dan unordered list.

Ordered list adalah daftar text yang ditampilkan menggunakan urutan angka sedangkan unordered list adalah daftar text yang ditampilkan menggunakan symbol lingkaran.

Berikut ini adalah contoh ordered list dan unordered list:

Ordered List

  1. susu
  2. roti
  3. keju
Unordered List

  • susu
  • roti
  • keju

Ordered list

Ordered list dimulai dengan tag <ol> dan untuk setiap daftar text yang ada di dalamnya dimulai dengan tag <li>.

Contoh 1:

<ol>
    <li>susu</li>
    <li>roti</li>
    <li>keju</li>
</ol>

Hasil contoh 1:

  1. susu
  2. roti
  3. keju

Atribut type untuk Ordered list

Tampilan ordered list yang menggunakan angka bisa diubah menggunakan atribut type. Berikut ini adalah daftar type untuk ordered list yang bisa digunakan:

Atribut Penjelasan
type="1" Daftar text ditampilkan menggunakan urutan angka (default)
type="A" Daftar text ditampilkan menggunakan urutan huruf besar
type="a" Daftar text ditampilkan menggunakan urutan huruf kecil
type="I" Daftar text ditampilkan menggunakan urutan huruf besar angka romawi
type="i" Daftar text ditampilkan menggunakan urutan huruf kecil angka romawi

Update: Atribut type untuk ordered list telah deprecated (tidak digunakan) pada HTML5, gunakan CSS list-style-type. Berikut ini adalah contoh CSS list-style-type:

Contoh 2:

type 1:

<ol>
    <li>susu</li>
    <li>roti</li>
    <li>keju</li>
</ol>

type A:

<ol style="list-style-type: upper-alpha;">
    <li>susu</li>
    <li>roti</li>
    <li>keju</li>
</ol>

type a:

<ol style="list-style-type: lower-alpha;">
    <li>susu</li>
    <li>roti</li>
    <li>keju</li>
</ol>

type I:

<ol style="list-style-type: upper-roman;">
    <li>susu</li>
    <li>roti</li>
    <li>keju</li>
</ol>

type i:

<ol style="list-style-type: lower-roman;">
    <li>susu</li>
    <li>roti</li>
    <li>keju</li>
</ol>

Hasil contoh 2:

type 1:

  1. susu
  2. roti
  3. keju

type A:

  1. susu
  2. roti
  3. keju

type a:

  1. susu
  2. roti
  3. keju

type I:

  1. susu
  2. roti
  3. keju

type i:

  1. susu
  2. roti
  3. keju

Atribut start untuk Ordered list

Atribut start berguna untuk menentukan nilai pertama dari daftar text yang ada di ordered list.

Contoh 3:

<ol start="20">
    <li>susu</li>
    <li>roti</li>
    <li>keju</li>
</ol>

Hasil contoh 3:

  1. susu
  2. roti
  3. keju

Unordered list

Unordered list dimulai dengan tag <ul> dan untuk setiap daftar text yang ada di dalamnya dimulai dengan tag <li>.

Contoh 4:

<ul>
    <li>susu</li>
    <li>roti</li>
    <li>keju</li>
</ul>

Hasil contoh 4:

  • susu
  • roti
  • keju

Atribut type untuk unordered list

Tampilan unordered list yang menggunakan symbol lingkaran hitam bisa dimodifikasi menggunakan atribut type:

Atribut Penjelasan
type="disc" Lingkaran hitam penuh (Default)
type="circle" Lingkaran hitam kosong
type="square" Kotak hitam
type="none" List tidak diberi symbol

Update: Atribut type untuk unordered list telah deprecated (tidak digunakan) pada HTML5, gunakan CSS list-style-type. Berikut ini adalah contoh CSS list-style-type:

Contoh 5:

Disc:
<ul style="list-style-type: disc;">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>
Circle:
<ul style="list-style-type: circle;">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>
Square:
<ul style="list-style-type: square;">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>
None:
<ul style="list-style-type: none;">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

Hasil contoh 5:

Disc:

  • Coffee
  • Tea
  • Milk

Circle:

  • Coffee
  • Tea
  • Milk

Square:

  • Coffee
  • Tea
  • Milk

None:

  • Coffee
  • Tea
  • Milk

Description list

Description list adalah salah satu jenis list yang berisi daftar text yang dilengkapi dengan penjelasan dari masing-masing text tersebut.

Description list terbuat dari tiga buah tag, yaitu:

  1. <dl> – tag awal description list.
  2. <dt> – daftar text.
  3. <dd> – penjelasan masing-masing text.

Contoh 6:

<dl>
<dt>susu</dt>
    <dd>- minuman berwarna putih</dd>
<dt>roti</dt>
    <dd>- makanan yang berbahan dasar tepung</dd>
<dt>keju</dt>
    <dd>- makanan yang berasal dari susu</dd>
</dl>

Hasil contoh 6:

susu
- minuman berwarna putih
roti
- makanan yang berbahan dasar tepung
keju
- makanan yang berasal dari susu

Catatan:

  • Biasannya description list digunakan untuk tulisan seperti kamus.
  • Sebelum HTML5, description list dinamakan definition list.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>