Sebuah list digunakan untuk menampilkan data atau informasi yang bersifat berurut dan ditampilkan dalam bentuk daftar.
Didalam HTML terdapat 3 type untuk membuat suatu daftar/list. Diantaranya yaitu:
Tag
Keterangan
<ul>
ul adalah singkatan dari (Unordered Lists). ul digunakan untuk menampilkan daftar/list tanpa nomor.
<ol>
ol adalah singkatan dari (Ordered Lists). ol digunakan untuk menampilkan daftar/list dengan nomor,huruf dan angka romawi tergantung atribut type yang digunakan.
<dl>
dl adalah singkatan dari (Description Lists). dl digunakan untuk menampilkan daftar/list definisi.
HTML Unordered Lists
Unordered Lists adalah kumpulan daftar/item yang tidak memiliki pesanan khusus atau urutan. Daftar ini didefinisikan dengan menggunakan tag <ul>. Setiap item dalam daftar ditandai dengan bullat.
Berikut ini akan saya contohkan bagaimana cara membuat suatu list/daftar dengan menggunakan Unordered Lists.
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>
Belajar HTML list
</title>
</head>
<body>
HTML
CSS
JAVASCRIPT
PHP
</body>
</html>
Skrip diatas akan menampilkan hasil seperti ini
Hasil
HTML
CSS
JAVASCRIPT
PHP
Menggunakan Atribut type pada unordered lists
Pada unordered lists kita dapat menggunakan atribut type untuk membuat berbagai macam bentuk daftar/list.
Ada beberapa nilai dari atribut type pada unordered lists diataranya adalah sebagai berikut.
Nilai
Keterangan
disc
Setiap item dalam daftar ditandai dengan bullat(Default).
circle
Setiap item dalam daftar ditandai dengan bentuk lingkaran.
square
Setiap item dalam daftar ditandai dengan bentuk persegi.
none
item dalam daftar tidak diberi tanda atau none.
Contoh menggunakan <ul type="disc">
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>
Belajar HTML list
</title>
</head>
<body>
HTML
CSS
JAVASCRIPT
PHP
</body>
</html>
Skrip diatas akan menampilkan hasil seperti ini
Hasil
HTML
CSS
JAVASCRIPT
PHP
Contoh menggunakan <ul type="circle">
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>
Belajar HTML list
</title>
</head>
<body>
HTML
CSS
JAVASCRIPT
PHP
</body>
</html>
Skrip diatas akan menampilkan hasil seperti ini
Hasil
HTML
CSS
JAVASCRIPT
PHP
Contoh menggunakan <ul type="square">
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>
Belajar HTML list
</title>
</head>
<body>
HTML
CSS
JAVASCRIPT
PHP
</body>
</html>
Skrip diatas akan menampilkan hasil seperti ini
Hasil
HTML
CSS
JAVASCRIPT
PHP
Contoh menggunakan <ul type="none">
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>
Belajar HTML list
</title>
</head>
<body>
HTML
CSS
JAVASCRIPT
PHP
</body>
</html>
Skrip diatas akan menampilkan hasil seperti ini
Hasil
HTML
CSS
JAVASCRIPT
PHP
HTML Ordered Lists
Ordered Lists dapat digunakan apabilah kita akan membuat daftar/list dengan menggunakan nomor/huruf. Daftar ini dedefinisikan dengan menggunakan tag <ol>.
Berikut ini akan saya contohkan bagaimana cara membuat suatu list/daftar dengan menggunakan Ordered Lists.
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>
Belajar HTML list
</title>
</head>
<body>
HTML
CSS
JAVASCRIPT
PHP
</body>
</html>
Skrip diatas akan menampilkan hasil seperti ini
Hasil
HTML
CSS
JAVASCRIPT
PHP
Menggunakan Atribut type pada ordered lists
Sama seperti pada unordered lists pada ordered lists kita juga dapat menggunakan atribut type untuk membuat berbagai macam bentuk daftar/list.
Ada beberapa nilai dari atribut type pada ordered lists diataranya adalah sebagai berikut.
Nilai
Keterangan
1
Setiap item dalam daftar ditandai dengan nomor(Default).
A
Setiap item dalam daftar ditandai dengan heruf besar.
a
Setiap item dalam daftar ditandai dengan huruf kecil.
I
Setiap item dalam daftar ditandai dengan angka besar romawi.
i
Setiap item dalam daftar ditandai dengan angka kecil romawi.
Contoh menggunakan <ol type="1">
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>
Belajar HTML list
</title>
</head>
<body>
HTML
CSS
JAVASCRIPT
PHP
</body>
</html>
Skrip diatas akan menampilkan hasil seperti ini
Hasil
HTML
CSS
JAVASCRIPT
PHP
Contoh menggunakan <ol type="A">
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>
Belajar HTML list
</title>
</head>
<body>
HTML
CSS
JAVASCRIPT
PHP
</body>
</html>
Skrip diatas akan menampilkan hasil seperti ini
Hasil
HTML
CSS
JAVASCRIPT
PHP
Contoh menggunakan <ol type="a">
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>
Belajar HTML list
</title>
</head>
<body>
HTML
CSS
JAVASCRIPT
PHP
</body>
</html>
Skrip diatas akan menampilkan hasil seperti ini
Hasil
HTML
CSS
JAVASCRIPT
PHP
Contoh menggunakan <ol type="I">
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>
Belajar HTML list
</title>
</head>
<body>
HTML
CSS
JAVASCRIPT
PHP
</body>
</html>
Skrip diatas akan menampilkan hasil seperti ini
Hasil
HTML
CSS
JAVASCRIPT
PHP
Contoh menggunakan <ol type="i">
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>
Belajar HTML list
</title>
</head>
<body>
HTML
CSS
JAVASCRIPT
PHP
</body>
</html>
Skrip diatas akan menampilkan hasil seperti ini
Hasil
HTML
CSS
JAVASCRIPT
PHP
HTML Description Lists
Description List adalah jenis list yang ditujukan untuk membuat struktur yang berisi deskripsi atau daftar penjelasan. Daftar ini dedefinisikan dengan menggunakan tag <dl>.
List jenis ini mungkin tidak sepopuler ordered list atau unordered list, namun jika anda membutuhkan struktur HTML untuk membuat list yang berisi penjelasan istilah-istilah dengan keterangannya, mungkin bisa menggunakan list jenis ini.
Berikut ini akan saya contohkan bagaimana cara membuat suatu list/daftar dengan menggunakan Description Lists.
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>
Belajar HTML list
</title>
</head>
<body>
Shared
Shared
Shared
Shared
