Membuat Daftar atau List dalam HTML

By | 3 October 2017

Untuk membuat daftar atau list dalam dokumen html tidaklah sulit. List di sini maksudnya penulisan poin per poin baik dengan numbering yang disebut ordered list atau bullets yang biasa disebut unordered list. Tag yang digunakan untuk membuat daftar atu list adalah tag <ul><li>…</li></ul> untuk unordered list dan  tag <ol><li>…</li></ol> untuk ordered list.

Unordered dan ordered list

Unordered list mempunyai beberapa tipe yaitu disc, circle, square dan none. Berikut ini beberapa contoh penggunaan unordered list:

<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Disc Bullets</h2>
<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Circle Bullets</h2>
<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Square Bullets</h2>
<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List without Bullets</h2>
<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
</body>
</html>



Ordered list juga memiliki beberapa tipe list diantaranya 1, A, a, I, i. Berikut ini beberapa contoh penggunaan ordered list:

<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Numbers</h2>
<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Letters</h2>
<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Roman Numbers</h2>
<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  
</body>
</html>

Nested list:

<!DOCTYPE html>
<html>
<body>
<h2>A Nested List</h2>
<ol>
  <li>Coffee</li>
  <li>Tea
    <ul>
    <li>Black tea</li>
    <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ol>
</body>
</html>

Hasilnya:

  1. Coffee
  2. Tea
    • Black tea
    • Green tea
  3. Milk

Selain ordered list dan unordered list, ada juga description list, perhatikan contoh di bawah ini:

<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>
</body>
</html>

Hasilnya:

Coffee
– black hot drink
Milk
– white cold drink

Tag yang digunakan untuk membuat description list adalah <dl>, <dt> dan <dd>.