Membuat List pada HTML

List pada HTML didefinisikan dengan dua tag yaitu <ol> dan <ul>. Tag <ol> (ordered list) untuk membuat list(daftar) dengan urutan angka atau huruf sebagai listnya. Sedangkan <ul> (unordered list) untuk membuat list berupa bullet sebagai listnya. Selanjutnya dalam setiap list kita menggunakan tag <li>

Untuk contoh penggunaannya kita coba untuk membuat Ordered List. Diawali dengan tag <ol> dan untuk setiap listnya menggunakan tag <li>. Berikut contoh kode yang kita tuliskan

<ol> <li>Jawa Barat</li> <li>Jawa Tengah</li> <li>Jawa Timur</li> </ol>

Kita lihat hasil dari kode di atas

1. Jawa Barat
2. Jawa Tengah
3. Jawa Timur

Selanjutnya pada kode berikut kita akan menambahkan atribut type. Berikut contoh kode yang kita tuliskan.

<ol type="a"> <li>Jawa Barat</li> <li>Jawa Tengah</li> <li>Jawa Timur</li> </ol>

Kita lihat hasil dari kode di atas

1. Jawa Barat
2. Jawa Tengah
3. Jawa Timur

Dengan atribut type kita bisa mengganti jenis list yang kita gunakan. Atribut type yang dapat kita masukkan adalah "a" menghasilkan list urutan berupa huruf kecil seperti tampak pada contoh di atas. "A" menghasilkan list berupa huruf besar. "i" menghasilkan list berupa angka romawi dengan huruf kecil. "I" menghasilkan list berupa angka romawi dengan huruf besar.

Selanjutnya kita akan melihat contoh penggunaan Unordered List <ul>. Yaitu list yang berupa bullet. Kita lihat kode dibawah ini kode di awali tag <ul> dan setiap list memakai tag <li>.

<ul> <li>Jawa Barat</li> <li>Jawa Tengah</li> <li>Jawa Timur</li> </ul>

Kita lihat hasil dari kode di atas

• Jawa Barat
• Jawa Tengah
• Jawa Timur

Selanjutnya untuk mengganti bullet listnya kita bisa memadukan dengan Inline CSS yaitu dengan menambahkan atribut style dan property yang kita gunakan adalah list-style-type. Kita lihat contoh penulisan kodenya sebagai berikut :

<ul style="list-style-type:square"> <li>Jawa Barat</li> <li>Jawa Tengah</li> <li>Jawa Timur</li> </ul>

Kita lihat hasil dari kode di atas

• Jawa Barat
• Jawa Tengah
• Jawa Timur

Pada list-style-type beberapa value yang bisa kita masukkan adalah disc,circle dan square

Demikian pembahasan tentang List HTML pada kesempatan hari ini. Semoga bermanfaat

---

Belajar Membuat Web dapat Penghasilan	Desaign Web Profesinal
Bagi Anda yang pemula dan ingin belajar membuat website, sekaligus bisa mendapat penghasilan tambahan, disini tempatnya. 4 langkah mudah membuat website.HTML,PHP, My SQL. Ayo!!! gabung aja disini.	Sesuai dengan nama perusahaan kami, IndoWebMaker membuat website untuk perusahaan - perusahaan yang ingin menginformasikan produk & jasa mereka melalui media di internet sehingga dikunjungi oleh pengunjung yang membutuhkan informasi. .
	Bening Hati

---

Artikel terkait :

• Editor untuk Membuat File HTML
• Mengenal Kegunaan Heading pada HTML
• Apa Tag HTML untuk Paragraf dan Ganti Baris
• Membuat Tabel HTML
• Menambahkan Gambar HTML