Belajar HTML #09: Cara Membuat List di HTML
Elemen List di HTML
HTML sudah menyediakan elemen untuk membuat list. Ada tiga macam jenis list yang bisa dibuat di HTML:
- Ordered List adalah list yang terurut;
- Unordered List adalah list yang tak terurut;
- dan Descriptiona List adalah list yang berisi definisi.
Mari kita bahas satu-per-satu…
1. Ordered List di HTML
Ordered list dibuat dengan tag <ol>
. Lalu di dalamnya diisi dengan item-item yang akan dimasukkan ke dalam list. Item dibuat dengan tag <li>
(list item).
List diatas diurutkan berdasarkan angka dari 1
, 2
, 3
, sampai 5
.
Lalu bagaimana kalau kita ingin menggunakan huruf seperti a
, b
, c
atau angka romawi seperti I
, II
, III
?
Gampang..
Untuk membuat yang seperti itu, kita bisa menggunakan atribut type
pada tag ol
dan berikut ini nilai yang bisa diberikan:
a
untuk alfabeta
,b
,c
, dan seterusnya;A
untuk alfabetA
,B
,C
, dan seterusnya;i
untuk angka romwarii
,ii
,iii
, dan seterusnya;I
untuk angka romwariI
,II
,III
, dan seterusnya.
2.Unordered List di HTML
Unordered list adalah list yang tak terurut yang menggunakan simbol-simbol pada item-nya. Unordered list dibuat dengan tag <ul>
dan untuk item-nya dibuat juga dengan tag <li>
.
Secara default simbol yang digunakan oleh unordered list adalah lingkaran kecil (disc). Kita juga bisa menggantinya dengan atribut type
.
Berikut ini nilai yang bisa diberikan untuk atribut type
:
square
untuk simbol persegi;disc
(default) untuk simbol lingkaran disc;none
tidak memakai simbol;circle
untuk simbol lingkaran;
3. Description List di HTML
Description List adalah list yang berisi deksripsi atau penjelasan dari sesuatu.
Ada tiga tag yang digunakan untuk membuat description list:
<dl>
(description list) tag untuk memulai description list;<dt>
(description term) tag untuk membuat kata yang akan dideskripsikan;<dd>
(description description) tag untuk membuat penjelasan dari kata.
List di dalam List (Nested List)
List juga dapat dibuat di dalam list, misalkan kita ingin menggabungkan ordered list dengan unordered list.
Caranya, list yang di dalam ditulis di dalam tag <li>
.
Komentar
Posting Komentar