HTML

Unordered List di HTML : Contoh dan Sintaknya

Tag <ul> HTML mendefinisikan unordered list. Unordered list merupakan list/daftar yang tidak berurut yang menggunakan simbil-simbol pada itemnya.

Unordered List

Unordered list dibuat menggunakan tag <ul> dan itemnya menggunakan tag <li>

Item unordered list akan ditandai dengan peluru (lingkaran hitam kecil) secara default:

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>An unordered HTML list</h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

</body>
</html>

Unordered List – Atribut Item

Properti CSS list-style-type digunakan untuk menentukan style penanda item daftar(list). Berikut style yang bisa digunakan pada unordered list :

ValueDescription
discBerbentuk lingkaran hitam kecil(default)
circleBerbentuk lingkaran
squareBerbentuk kotak
noneTidak menggunakan simbol

Contoh 1- Disc(default)

<!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>

Contoh 2 – Circle(Lingkaran)

<!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>

Contoh 3 – Square(Kotak)

<!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>

Contoh 4 – None(Tidak Pakai Simbol)

<!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>

List HTML Bersarang

List dalam HTML bisa disarangkan (daftar di dalam daftar), lihatlah contoh di bawah ini :

Contoh :

<!DOCTYPE html>
<html>
<body>

<h2>A Nested List</h2>
<p>Lists can be nested (list inside list):</p>

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>

Catatan: Item list (<li>) dapat berisi list baru, dan elemen HTML lainnya, seperti gambar dan tautan, dll.

List Horizontal dengan CSS

List HTML bisa menggunakan CSS agar terlihat lebih menarik. Salah satunya yang biasa digunakan adalah style list secara horizontal untuk membuat menu navigasi. Seperti conoth di bawah ini :

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}
</style>
</head>
<body>

<h2>Navigation Menu</h2>
<p>In this example, we use CSS to style the list horizontally, to create a navigation menu:</p>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Rangkuman

  • Gunakan elemen HTML <ul> untuk membuat unordered list
  • Gunakan properti CSS list-style-type untuk menggunakan beberapa penanda item
  • Gunakan elelem HTML <li> untuk mendefinisikan list item
  • List dapat di sarangkan(daftar di dalam daftar)
  • List item dapat di gabungkan dengan elemen HTML lain
  • Gunakan propreti CSS float:left untuk membuat list secara horizontal

Hanifah Nurbaeti

Share
Tags: html