Tutorial HTML <ul>
HTML ul Tag - belajar html
<ul>. HTML ul mempunyai definisi sebagai daftar bullet / berbutir / berpoint. Dalam penulisan pada html, element ini biasanya diikutsertakan element <li> sebagai element pembuat daftar.
Element
<ul> didalam html, bisa ditulis secara berulang atau bercabang tanpa ada batasan jumlah penulisan, asal setiap panambahan element <ul>didalam element <ul> itu sendiri, selalu ditutup dengan tag penutup html yang benar.Contoh HTML <ul>
<ul>
<li>Daftar List 1</li>
<li>Daftar List 2</li>
<li>Daftar List 3</li>
<li>Daftar List 4</li>
<li>Daftar List 5</li>
</ul>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <ul> <li>Daftar List 1</li> <li>Daftar List 2</li> <li>Daftar List 3</li> <li>Daftar List 4</li> <li>Daftar List 5</li> </ul> </body> </html>
Contoh HTML <ul>
Contoh berikut penulisan element
<ul> dengan cara bercabang, dengan tingkat level 2<ul>
<li>Daftar List 1</li>
<li>Daftar List 2</li>
<li>Daftar List 3
<ul>
<li>Sub List 1</li>
<li>Sub List 2</li>
<li>Sub List 3</li>
</ul>
</li>
<li>Daftar List 4</li>
<li>Daftar List 5</li>
</ul>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>
<ul>
<li>Daftar List 1</li>
<li>Daftar List 2</li>
<li>Daftar List 3
<ul>
<li>Sub List 1</li>
<li>Sub List 2</li>
<li>Sub List 3</li>
</ul>
</li>
<li>Daftar List 4</li>
<li>Daftar List 5</li>
</ul>
</body>
</html>
Contoh HTML <ul>
Contoh berikut penulisan element
<ul> dengan cara bercabang, dengan tingkat level 3<ul>
<li>Daftar List 1</li>
<li>Daftar List 2</li>
<li>Daftar List 3
<ul>
<li>Sub List 1</li>
<li>Sub List 2</li>
<li>Sub List 3
<ul>
<li>Sub.sub List</li>
<li>Sub.sub List</li>
<li>Sub.sub List</li>
</ul>
</li>
</ul>
</li>
<li>Daftar List 4</li>
<li>Daftar List 5</li>
</ul>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>
<ul>
<li>Daftar List 1</li>
<li>Daftar List 2</li>
<li>Daftar List 3
<ul>
<li>Sub List 1</li>
<li>Sub List 2</li>
<li>Sub List 3
<ul>
<li>Sub.sub List</li>
<li>Sub.sub List</li>
<li>Sub.sub List</li>
</ul>
</li>
</ul>
</li>
<li>Daftar List 4</li>
<li>Daftar List 5</li>
</ul>
</body>
</html>
Attribute HTML <ul>
compactAttribute ini digunakan untuk mengatur jarak antara daftar list yang ada didalamnya.
Catatan : Attibute ini sudah tidak berlaku lagi pada HTML5, dan browser seperti
Chrome, Safari, Firefox, Opera, dan IE tidak support attribute ini.Tips : gunakan CSS untuk menggantikannya dengan syntax
line-heightContoh :
<ul compact="compact">
<li>Daftar List 1</li>
<li>Daftar List 2</li>
<li>Daftar List 3</li>
<li>Daftar List 4</li>
<li>Daftar List 5</li>
</ul>
<hr/>
<ul style="line-height: 3em">
<li>Daftar List 1</li>
<li>Daftar List 2</li>
<li>Daftar List 3</li>
<li>Daftar List 4</li>
<li>Daftar List 5</li>
</ul>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <ul compact="compact"> <li>Daftar List 1</li> <li>Daftar List 2</li> <li>Daftar List 3</li> <li>Daftar List 4</li> <li>Daftar List 5</li> </ul> <hr/> <ul style="line-height: 3em"> <li>Daftar List 1</li> <li>Daftar List 2</li> <li>Daftar List 3</li> <li>Daftar List 4</li> <li>Daftar List 5</li> </ul> </body> </html>
typeCatatan : Attibute ini sudah tidak berlaku lagi pada HTML5.
Tips : Gunakan CSS untuk menggantikannya dengan syntax
list-style-typeAttribute ini digunakan untuk menentukan hasil penanda dari daftar list yang dibuat.
Contoh :
<ul type="disc">
<li>Daftar List 1</li>
<li>Daftar List 2</li>
<li>Daftar List 3</li>
</ul>
<ul type="square">
<li>Daftar List 1</li>
<li>Daftar List 2</li>
<li>Daftar List 3</li>
</ul>
<ul type="circle">
<li>Daftar List 1</li>
<li>Daftar List 2</li>
<li>Daftar List 3</li>
</ul>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <ul type="disc"> <li>Daftar List 1</li> <li>Daftar List 2</li> <li>Daftar List 3</li> </ul> <ul type="square"> <li>Daftar List 1</li> <li>Daftar List 2</li> <li>Daftar List 3</li> </ul> <ul type="circle"> <li>Daftar List 1</li> <li>Daftar List 2</li> <li>Daftar List 3</li> </ul> <hr/> <h2>Menggunakan syntax CSS <code>list-style-type</code></h2> <ul style="list-style-type: disc"> <li>Daftar List 1</li> <li>Daftar List 2</li> <li>Daftar List 3</li> </ul> <ul style="list-style-type: square"> <li>Daftar List 1</li> <li>Daftar List 2</li> <li>Daftar List 3</li> </ul> <ul style="list-style-type: circle;"> <li>Daftar List 1</li> <li>Daftar List 2</li> <li>Daftar List 3</li> </ul> </body> </html>
Global Attributes:
Element
<ul> mencakup Global Attributes HTML.
Event Attributes:
Element
<ul> mencakup Event Attributes HTML.
Browser Support :
Desktop
| Chrome | Ya |
|---|---|
| Safari | Ya |
| Firefox | Ya |
| Opera | Ya |
| IE | Ya |
| Edge | Ya |
Mobile
| Android Webview | Ya |
|---|---|
| Chrome Android | Ya |
| Edge Mobile | Ya |
| Firefox Android | Ya |
| Opera Android | Ya |
| iOs Safari | Ya |
| Samsung Internet | Ya |
Default CSS :
Browser yang support dengan element
<ul>, mempunyai nilai default :ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}