tRikSonic
Tema
  • Original
  • Translate

HTML ul Tag

Terakhir diperbarui : 23 Mei 2018 - 16.12

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.
background html
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

ChromeYa
SafariYa
FirefoxYa
OperaYa
IEYa
EdgeYa

Mobile

Android WebviewYa
Chrome AndroidYa
Edge MobileYa
Firefox AndroidYa
Opera AndroidYa
iOs SafariYa
Samsung InternetYa

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;
}
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.