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 [list item].
Contoh:
Membuat Ordered List
Buah Favoritku:
Jeruk
Durian
Pisang
Pepaya
Mangga
Hasilnya:
List diatas diurutkan berdasarkan angka dari
Membuat Ordered List
Buah Favoritku:
Jeruk
Durian
Pisang
Pepaya
Mangga
Membuat Ordered List
Buah Favoritku:
Jeruk
Durian
Pisang
Pepaya
Mangga
Membuat Ordered List
Buah Favoritku:
Jeruk
Durian
Pisang
Pepaya
Mangga
Membuat Ordered List
Buah Favoritku:
Jeruk
Durian
Pisang
Pepaya
Mangga
Lalu bagaimana kalau kita ingin menggunakan huruf seperti
Membuat Ordered List
Buah Favoritku:
Jeruk
Durian
Pisang
Pepaya
Mangga
Membuat Ordered List
Buah Favoritku:
Jeruk
Durian
Pisang
Pepaya
Mangga
Membuat Ordered List
Buah Favoritku:
Jeruk
Durian
Pisang
Pepaya
Mangga
Membuat Ordered List
Buah Favoritku:
Jeruk
Durian
Pisang
Pepaya
Mangga
Membuat Ordered List
Buah Favoritku:
Jeruk
Durian
Pisang
Pepaya
Mangga
Membuat Ordered List
Buah Favoritku:
Jeruk
Durian
Pisang
Pepaya
Mangga
Gampang..
Untuk membuat yang seperti itu, kita bisa menggunakan atribut
Ordered List dengan Atribut Type
List dengan type alfabet
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
List dengan type alfabet kapital [huruf besar]
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
List dengan type romawi
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
List dengan type romawi kapital
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
Ordered List dengan Atribut Type
List dengan type alfabet
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
List dengan type alfabet kapital [huruf besar]
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
List dengan type romawi
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
List dengan type romawi kapital
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
4 untuk alfabetMembuat Ordered List Buah Favoritku: Jeruk Durian Pisang Pepaya Mangga
4,Membuat Ordered List Buah Favoritku: Jeruk Durian Pisang Pepaya Mangga
5,Membuat Ordered List Buah Favoritku: Jeruk Durian Pisang Pepaya Mangga
6, dan seterusnya;Membuat Ordered List Buah Favoritku: Jeruk Durian Pisang Pepaya Mangga
6 untuk alfabetOrdered List dengan Atribut Type List dengan type alfabet Tutorial List di HTML Tutorial Link di HTML Tutorial Tabel di HTML List dengan type alfabet kapital [huruf besar] Tutorial List di HTML Tutorial Link di HTML Tutorial Tabel di HTML List dengan type romawi Tutorial List di HTML Tutorial Link di HTML Tutorial Tabel di HTML List dengan type romawi kapital Tutorial List di HTML Tutorial Link di HTML Tutorial Tabel di HTML
6,Ordered List dengan Atribut Type List dengan type alfabet Tutorial List di HTML Tutorial Link di HTML Tutorial Tabel di HTML List dengan type alfabet kapital [huruf besar] Tutorial List di HTML Tutorial Link di HTML Tutorial Tabel di HTML List dengan type romawi Tutorial List di HTML Tutorial Link di HTML Tutorial Tabel di HTML List dengan type romawi kapital Tutorial List di HTML Tutorial Link di HTML Tutorial Tabel di HTML
8,Ordered List dengan Atribut Type List dengan type alfabet Tutorial List di HTML Tutorial Link di HTML Tutorial Tabel di HTML List dengan type alfabet kapital [huruf besar] Tutorial List di HTML Tutorial Link di HTML Tutorial Tabel di HTML List dengan type romawi Tutorial List di HTML Tutorial Link di HTML Tutorial Tabel di HTML List dengan type romawi kapital Tutorial List di HTML Tutorial Link di HTML Tutorial Tabel di HTML
9, dan seterusnya;Ordered List dengan Atribut Type List dengan type alfabet Tutorial List di HTML Tutorial Link di HTML Tutorial Tabel di HTML List dengan type alfabet kapital [huruf besar] Tutorial List di HTML Tutorial Link di HTML Tutorial Tabel di HTML List dengan type romawi Tutorial List di HTML Tutorial Link di HTML Tutorial Tabel di HTML List dengan type romawi kapital Tutorial List di HTML Tutorial Link di HTML Tutorial Tabel di HTML
0 untuk angka romwariMembuat Unordered List Bahasa Pemrograman untuk dipelajari: Javascript PHP Java Python Kotlin
0,Membuat Unordered List Bahasa Pemrograman untuk dipelajari: Javascript PHP Java Python Kotlin
2,Membuat Unordered List Bahasa Pemrograman untuk dipelajari: Javascript PHP Java Python Kotlin
3, dan seterusnya;Membuat Unordered List Bahasa Pemrograman untuk dipelajari: Javascript PHP Java Python Kotlin
7 untuk angka romwariMembuat Ordered List Buah Favoritku: Jeruk Durian Pisang Pepaya Mangga
7,Membuat Ordered List Buah Favoritku: Jeruk Durian Pisang Pepaya Mangga
8,Membuat Ordered List Buah Favoritku: Jeruk Durian Pisang Pepaya Mangga
9, dan seterusnya.Membuat Ordered List Buah Favoritku: Jeruk Durian Pisang Pepaya Mangga
Contoh:
Ordered List dengan Atribut Type
List dengan type alfabet
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
List dengan type alfabet kapital [huruf besar]
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
List dengan type romawi
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
List dengan type romawi kapital
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
Hasilnya:
2.Unordered List di HTML
Unordered list adalah list yang tak terurut yang menggunakan simbol-simbol pada item-nya. Unordered list dibuat dengan tag
Membuat Unordered List
Bahasa Pemrograman untuk dipelajari:
Javascript
PHP
Java
Python
Kotlin
Contoh:
Membuat Unordered List
Bahasa Pemrograman untuk dipelajari:
Javascript
PHP
Java
Python
Kotlin
Hasilnya:
Secara default simbol yang digunakan oleh unordered list adalah lingkaran kecil [disc]. Kita juga bisa menggantinya dengan atribut
Ordered List dengan Atribut Type
List dengan type alfabet
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
List dengan type alfabet kapital [huruf besar]
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
List dengan type romawi
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
List dengan type romawi kapital
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
Berikut ini nilai yang bisa diberikan untuk atribut
Ordered List dengan Atribut Type
List dengan type alfabet
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
List dengan type alfabet kapital [huruf besar]
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
List dengan type romawi
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
List dengan type romawi kapital
Tutorial List di HTML
Tutorial Link di HTML
Tutorial Tabel di HTML
2 untuk simbol persegi;Membuat Unordered List Bahasa Pemrograman untuk dipelajari: Javascript PHP Java Python Kotlin Framework untuk dipelajari: Vuejs Svelte Reactjs Tools untuk dipelajari: Gulp NPM Js Lint Pelajari juga: JSON XML Markdown
3 [default] untuk simbol lingkaran disc;Membuat Unordered List Bahasa Pemrograman untuk dipelajari: Javascript PHP Java Python Kotlin Framework untuk dipelajari: Vuejs Svelte Reactjs Tools untuk dipelajari: Gulp NPM Js Lint Pelajari juga: JSON XML Markdown
4 tidak memakai simbol;Membuat Unordered List Bahasa Pemrograman untuk dipelajari: Javascript PHP Java Python Kotlin Framework untuk dipelajari: Vuejs Svelte Reactjs Tools untuk dipelajari: Gulp NPM Js Lint Pelajari juga: JSON XML Markdown
5 untuk simbol lingkaran;Membuat Unordered List Bahasa Pemrograman untuk dipelajari: Javascript PHP Java Python Kotlin Framework untuk dipelajari: Vuejs Svelte Reactjs Tools untuk dipelajari: Gulp NPM Js Lint Pelajari juga: JSON XML Markdown
Contoh:
Membuat Unordered List
Bahasa Pemrograman untuk dipelajari:
Javascript
PHP
Java
Python
Kotlin
Framework untuk dipelajari:
Vuejs
Svelte
Reactjs
Tools untuk dipelajari:
Gulp
NPM
Js Lint
Pelajari juga:
JSON
XML
Markdown
Hasilnya:
Selain menggunakan type, kita juga bisa menggunakan gambar.
Ini dilakukan dengan style CSS.
Contohnya:
Membuat Unordered List
Bahasa Pemrograman untuk dipelajari:
Javascript
PHP
Java
Python
Kotlin
Hasilnya:
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:
6 [description list] tag untuk memulai description list;Membuat Unordered List Bahasa Pemrograman untuk dipelajari: Javascript PHP Java Python Kotlin Framework untuk dipelajari: Vuejs Svelte Reactjs Tools untuk dipelajari: Gulp NPM Js Lint Pelajari juga: JSON XML Markdown
7 [description term] tag untuk membuat kata yang akan dideskripsikan;Membuat Unordered List Bahasa Pemrograman untuk dipelajari: Javascript PHP Java Python Kotlin Framework untuk dipelajari: Vuejs Svelte Reactjs Tools untuk dipelajari: Gulp NPM Js Lint Pelajari juga: JSON XML Markdown
8 [description description] tag untuk membuat penjelasan dari kata.Membuat Unordered List Bahasa Pemrograman untuk dipelajari: Javascript PHP Java Python Kotlin Framework untuk dipelajari: Vuejs Svelte Reactjs Tools untuk dipelajari: Gulp NPM Js Lint Pelajari juga: JSON XML Markdown
Format penulisannya seperti ini:
Contoh:
Membuat Description List
Daftar istilah:
Kopi
Sebuah minuman berwarna hitam. Menurut pendapat lain kopi adalah air yang dimasak sampai gosong.
Kopi Black Magic
Kopi hitam atau kopi tradisional yang dibuat dengan mantra-mantra.
White Coffee
Kopi berwarna putih, kandungan kafeinnya sedikit.
Kopi++
Kopi ini mampu meningkatkan imajinasi 99 kali lipat.
Hasilnya:
List di dalam List [Nested List]
List juga dapat dibuat di dalam list, misalkan kita ingin menggabungkan ordered list dengan unordered list.
Ol untuk apa?
Sedangkan tag Ol [Ordered List] merupakan tag beraturan yang berfungsi untuk mengurutkan suatu list dengan urutan berupa abjad, angka ataupun berupa angka romawi.
Apa fungsi ul di HTML?
HTML element ul [un-ordered list] merupakan elemen HTML yang digunakan untuk menampilkan daftar [list] dalam bentuk butir-butir peluru atau bulet. Daftar list yang ditampilkan tidak dalam bentuk urutan angka maupun huruf namun ditampilkan dalam bentuk bulet atau titik kecil sebagai penanda daftar.