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>
compact
Attribute 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-height
Contoh :
<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>
type
Catatan : Attibute ini sudah tidak berlaku lagi pada HTML5.
Tips : Gunakan CSS untuk menggantikannya dengan syntax
list-style-type
Attribute 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;
}