HTML ul Tag

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>

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>

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>

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>

Nilai atau value attribute ini adalah compact

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>

Nilai atau value attribute ini adalah disc, square, circle.

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;
}