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. Penggunaan elemen ini biasanya untuk daftar/list yang bersifat non-formal atau tak resmi.
HTML element <ul> (un-ordered list) ini juga bisa disebut sebagai daftar acak untuk menampilkan daftar item secara acak tanpa penomoran yang formal. Penulisan elemen ini dibuka dengan tag <ul> dan ditutup dengan </ul>. Isi butir-butir daftar dimasukkan di dalam <li> (list item) di antara tag <li> dan <li>. Setiap item daftar nantinya akan ditampilkan dalam bentuk butir-butir bulet oleh HTML.
Berikut ini contoh penggunaan <ul> (un-ordered list) :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<title>Latihan Menggunakan HTML Element UL (Un-ordered List)</title>
</head>
<body>
<h1>Belajar Menggunakan HTML Element UL</h1>
<p>Nama jenis buah :</p>
<ul>
<li>Apel</li>
<li>Durian</li>
<li>Pepaya</li>
<li>Pisang</li>
<li>Jeruk</li>
</ul>
</body>
</html>
Jika dijalankan, maka akan menghasilkan tampilan:
Menggunakan Atribut "TYPE"
Secara default, HTML element <ul> (un-ordered list) ditampilkan dalam bentuk bulatan kecil dengan type "disc". Nilai "disc" ini merupakan bulet berupa titik hitam bulat yang melingkar di depan setiap daftar. Atribut type pada HTML element <ul> memiliki 3 buah nilai yaitu "disc" (bulatan solid), "square" (kotak), dan "circle" (lingkaran berlubang). Untuk melihat nilai tampilan bentuk butir-butir bulet lainnya, berikut ini kode berbagai type daftar <ul> (un-ordered list) :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
<title>Latihan Menggunakan HTML Element UL (Un-ordered List)</title>
</head>
<body>
<h1>Belajar Menggunakan HTML Element UL</h1>
<p>HTML Element UL (Un-ordered List) dengan berbagai type tampilan</p>
<ul type="disc">
<li>Apel</li>
<li>Durian</li>
<li>Pepaya</li>
<li>Pisang</li>
<li>Jeruk</li>
</ul>
<ul type="square">
<li>Apel</li>
<li>Durian</li>
<li>Pepaya</li>
<li>Pisang</li>
<li>Jeruk</li>
</ul>
<ul type="circle">
<li>Apel</li>
<li>Durian</li>
<li>Pepaya</li>
<li>Pisang</li>
<li>Jeruk</li>
</ul>
</body>
</html>
Jika dijalankan, maka akan menghasilkan halaman seperti dibawah ini :
Browser Pendukung :
| Elemen |  |  |  |  |  |
| <ul> | ya | ya | ya | ya | ya |
Global Attributes :
Tag <ul> mendukung Global Atribut di dalam HTML yang artinya bahwa pada tag ini dapat sisipkan atribut yang bersifat global yang secara umum berlaku pada semua komponen tag HTML.
Silahkan kunjungi Atribut Global Pada HTML untuk mengetahui detail global atribut pada HTML
Event Attributes :
Tag <ul> mendukung Event Atribut atau atribut acara (kejadian). Atribut acara ini merupakan wilayah javascript tentang bagaimana menampilkan halaman web. Misalnya saat halaman web sedang loading (onload) sampai interaksi user pada halaman web tersebut seperti scrolling layar (onscroll), menekan tombol pada keyboard (onkeypress, onkeydown), mengarahkan mouse (onmouseover) dan lainnya.
Silahkan kunjungi Event Atribut Pada HTML untuk mengetahui detail event atribut pada HTML.
Pengaturan Default CSS :
Nilai default pengaturan gaya untuk elemen <ul> pada HTML:
CSS
1
2
3
4
5
6
7
8
9
Previous Pageul{
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
Tutorial HTML
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
