Belajar HTML #08 | Cara Membuat List Di HTML
Belajar Bareng Minarsih - Edisi Ngoding
31 Agustus 2022
Apa Itu List?
list atau yang kita kenal dengan daftar berurutan merupakan fungsi dalam HTML yang digunakan untuk menampilkan data secara berurutan ke bawah.
Dalam HTML penilisan list menggunakan tag <li>. dalam membuat list pada HTML ini terdapat dua jenis tampilan list yang bisa di gunakan yaitu ordered list dan unordered list.
1. Ordered List
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).
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Membuat List Pada HTML</title>
</head>
<body>
<h1>Makanan Favorite</h1>
<ol>
<li>Nasi goreng</li>
<li>Mie Goreng</li>
<li>Sate Ayam</li>
<li>soto</li>
<li>Rawon</li>
</ol>
</body>
</html>
Berikut Hasilnya: 
List diatas diurutkan berdasarkan angka,Lalu bagaimana kalau kita ingin menggunakan huruf seperti a, b, c atau angka romawi seperti I, II, III?
Untuk membuat yang seperti itu, kita bisa menggunakan atribut type pada tag ol dan berikut ini nilai yang bisa diberikan:
a untuk alfabet a, b, c, dan seterusnya;I untuk angka romwari I, II, III, dan seterusnya.Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Membuat List Pada HTML</title>
</head>
<body>
<h1>Makanan Favorite</h1>
<ol type="a">
<li>Nasi goreng</li>
<li>Mie Goreng</li>
<li>Sate Ayam</li>
<li>soto</li>
<li>Rawon</li>
</ol>
<h1>Minuman Favorite</h1>
<ol type="i">
<li>Es Jeruk</li>
<li>es Teh</li>
<li>Es Soda Gembira</li>
<li>Es Degan</li>
<li>Es Oyen</li>
</ol>
</body>
</html>
Hasilnya: 
2. Unordered List
berfungsi untuk menampilkan daftar list dalam bentuk bulatan atau kotak di awalnya. tag yang diguanakan untuk membuat unordered list yaitu <ul>.
berikut contohnya:
<!DOCTYPE html>
<html>
<head>
<title>Membuat List Pada HTML</title>
</head>
<body>
<h1>Makanan Favorite</h1>
<ul>
<li>Nasi goreng</li>
<li>Mie Goreng</li>
<li>Sate Ayam</li>
<li>soto</li>
<li>Rawon</li>
</ul>
<h1>Minuman Favorite</h1>
<ul>
<li>Es Jeruk</li>
<li>es Teh</li>
<li>Es Soda Gembira</li>
<li>Es Degan</li>
<li>Es Oyen</li>
</ul>
</body>
</html>
Hasilnya: 
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;Contohnya:
<!DOCTYPE html>
<html>
<head>
<title>Membuat List Pada HTML</title>
</head>
<body>
<h1>Makanan Favorite</h1>
<ul type="square">
<li>Nasi goreng</li>
<li>Mie Goreng</li>
<li>Sate Ayam</li>
<li>soto</li>
<li>Rawon</li>
</ul>
<h1>Minuman Favorite</h1>
<ul type="circle">
<li>Es Jeruk</li>
<li>es Teh</li>
<li>Es Soda Gembira</li>
<li>Es Degan</li>
<li>Es Oyen</li>
</ul>
<h1>Type Unordered List</h1>
<ul type="none">
<li>Square</li>
<li>Circle</li>
<li>None</li>
<li>disc</li>
</ul>
<h1>Type Ordered List</h1>
<ul type="disc">
<li>a untuk alfabet</li>
<li>i untuk angka romwari </li>
</ul>
</body>
</html>
Hasilnya: 
Materi tentang list sampai di sini ya.
dari contoh di atas bisa anda lihat perbedaan masing-masing penggunaan jenis list pada HTML.
penggunaan list pada HTML tidak hanya untuk membuat daftar saja. dengan menggabungkan CSS, JavaScript tag list ini bisa di gunakan untuk membuat menu navigasi pada halaman web.
Pokok intinya:
Kamu harus tahu cara membuat list, baik itu ordered list, unordered list.
Artikel Lainnya Dengan Kategori Terkait :
1. 5 HTML Tags For Accessibility
2. Belajar HTML #01 | Apa Itu HTML ? Pengertian HTML Lengkap Untuk Pemula
3. Belajar HTML #02 | Cara Sederhana Membuat Code HTML
4. Belajar HTML #03 | Membuat Heading di HTML
5. Belajar HTML #04 | Format Text di HTML
6. Belajar HTML #05 | Membuat Paragraf di HTML
7. Belajar HTML #06 | Membuat Tabel Pada HTML
8. Belajar HTML #07 | Membuat Link Pada HTML
9. Belajar HTML #08 | Cara Membuat List Di HTML
10. Belajar HTML #09 | Cara Membuat Box Shadow CSS dan HTML Praktis Tanpa ribet (efek bayangan CSS)
11. Belajar HTML #10 | Cara Menampilkan Gambar Pada Halaman Website Menggunakan HTML
12. Belajar HTML #11 | Cara Menampilkan Video Pada Halaman Website Menggunakan HTML
13. Belajar HTML #12 | Cara Membuat Form Pada HTML
14. Belajar HTML #13 | Belajar Membuat Layout Pada HTML
15. Belajar HTML #14 | Belajar Menghubungkan HTML dengan CSS
16. Belajar HTML #15 | Cara Menambahkan Audio ke Halaman Website Menggunakan HTML.
17. Belajar HTML #16 | Cara Menambahkan Garis Horizontal di HTML
18. Belajar HTML #17 | Cara Menambahkan Komentar di HTML
19. Belajar HTML #18 | Tutorial Cara Membuat Checkbox dan Radio Button di HTML
20. Buat Desain Web Responsif CSS
21. Cara Membuat Accordions Dengan HTML & CSS
22. Cara Membuat Favicon Dengan HTML
26. Input HTML Yang Perlu Diketahui
27. Memahami Pentingnya Semantic HTML dalam Struktur Website
28. Membuat Form HTML dengan Input Sugestion
29. Penggunaan Atribut Elemen Anchor dalam HTML
31. Tag HTML yang Jarang Diketahui
