Tutorial Lengkap Belajar Html # Membuat List Di Html

Pada tutorial sebelumnya kita telah belajar membuat sebuah tabel di html.
Pada artikel kali ini kita akan belajar bagai manacara membuat sebuah list di html
List dapat digunakan untuk membuat sebuah daftar item tertentu yang ditampilkan dalam bentuk baris berurutan.

Yuk langsung saja ke tutorialnya,

Tag yang digunakan untuk membuat list

Berikut adalah tag-tag yang bisa digunakan untuk membuat list di html,

Tag	Keterangan
<dl>	Digunakan untuk membuat deskripsi list
<dt>	Digunakan untuk membuat judul item dari deskripsi list
<dd>	Digunakan untuk membuat detail item dari deskripsi list
<ol>	Digunakan untuk membuat order list atau list dalam bentuk urutan
<ul>	Digunakan untuk membuat unorder list atau list dalam bentuk bukan urutan
<li>	Digunakan untuk membuat item dari tag <ol> atau <ul>

Cara membuat list di html

Ada tiga jenis list yang bisa kita buat untuk membuat list di html, yaitu,

Order List

Orderlist adalah list yang dibuat menggunakan tag <ol>.

List ini digunakan untuk mengurutkan item-item list dan memberikan penomoran dalam bentuk angka maupun huruf pada setiap item list. Penggunaanya biasanya untuk menandai sebuah proses, langkah-langkah, ranking dan lain sebagainya.

Contohnya,

Deretcode

Output :

Untuk mengganti penomoronyan dengan huruf atau angka romari kita bisa menambahkan atribut type pada elemen ol nya.

Contohnya,

Deretcode

Output :

Unorder List

Unorder list adalah list yang dibuat menggunakan tag <ul> .

List ini digunakan untuk membuat daftar item yang tak berurutan.

Contohnya,

Deretcode

Output :

Kita juga bisa mengganti simbol pointnya dengan menambahkan attribute type pada elemen ul.

square untuk simbol persegi;
disc (default) untuk simbol lingkaran disc;
none tidak memakai simbol;
circle untuk simbol lingkaran;

Contohnya,

Deretcode

Output :

Atau jika kalian ingin mengganti simbolnya dengan gambar juga bisa.
Caranya adalah dengan menggunakan attribute style dengan mengatur properti list-style-image.

Contohnya,

Deretcode

Output :

Description List

List deskripsi adalah list yang dibuat menggunakan tag <dl>, <dt> dan <dd>.

<dl> digunakan untuk membuat list
<dt> digunakan untuk membuat judul dari item
<dd> digunakan untuk membuat detail item

Contohnya,

Deretcode

Output :

Sampai disini tutorial cara membuat list di html.
Jika kalian merasa artikel ini bermanfaat silahkan tekan tombol share.
Dan jika ada pertanyaan atau ada hal yang ingin disampaikan silahkan tulis di kolom komentar.