HTML Tag UL: Membuat Daftar Tidak Berurutan

Apa Itu HTML Tag UL?

HTML tag <ul> adalah elemen HTML yang digunakan untuk membuat daftar tak berurutan (unordered list) di dalam halaman web. Daftar ini biasanya menampilkan beberapa item yang tidak memiliki urutan tertentu dan setiap item dalam daftar tersebut ditandai dengan simbol bullet, seperti titik hitam kecil di depan teks.

Tag <ul> biasanya digunakan bersama dengan tag <li> (list item). Setiap item yang ingin dimasukkan ke dalam daftar harus ditempatkan di dalam tag <li>. Dengan cara ini, browser dapat menampilkan daftar secara terstruktur dan mudah dibaca oleh pengguna.

Daftar tak berurutan sering digunakan untuk menampilkan berbagai jenis informasi, seperti daftar fitur produk, menu navigasi website, daftar kategori, langkah-langkah sederhana, atau kumpulan poin penting dalam sebuah artikel. Karena tampilannya yang rapi dan sederhana, elemen <ul> sangat membantu dalam menyusun konten agar lebih terorganisir.

Secara default, browser akan menampilkan tanda bullet pada setiap item dalam daftar <ul>. Namun, tampilan ini dapat diubah menggunakan CSS. Misalnya, pengembang dapat mengganti bentuk bullet, menghapus bullet, atau mengubahnya menjadi ikon khusus sesuai dengan desain website.

Selain itu, <ul> juga sering digunakan dalam pembuatan menu navigasi website. Dengan bantuan CSS dan JavaScript, daftar <ul> dapat diubah menjadi menu horizontal, dropdown menu, atau bahkan menu navigasi yang responsif untuk perangkat mobile.

Karena kemampuannya dalam menyusun informasi secara terstruktur, tag <ul> menjadi salah satu elemen dasar yang sangat penting dalam pembuatan halaman web yang rapi, mudah dipahami, dan nyaman dibaca oleh pengguna.

Fungsi HTML Tag <ul>

Membuat daftar tidak berurutan
Digunakan ketika urutan item tidak penting.
Mengorganisasi informasi
Membantu membuat daftar agar lebih rapi dan mudah dibaca.
Digunakan bersama tag <li>
Setiap item dalam daftar harus ditulis menggunakan <li>.
Bisa diubah tampilannya dengan CSS
Tampilan bullet dapat diatur menggunakan CSS.

Struktur Dasar HTML Tag UL

<ul>
  <li>Item pertama</li>
  <li>Item kedua</li>
  <li>Item ketiga</li>
</ul>

Contoh Penggunaan HTML Tag UL

1. List Sederhana

Tag <ul> digunakan bersama tag <li> untuk membuat daftar item yang tidak memiliki urutan angka.

<!DOCTYPE html>
<html>
<head>
    <title>List Sederhana</title>
</head>
<body>

<ul>
    <li>Apel</li>
    <li>Jeruk</li>
    <li>Mangga</li>
</ul>

</body>
</html>

penjelasan: Tag ul membuat daftar dengan bullet dan li berisi item.

2. List dengan Banyak Item

Tag <ul> dapat berisi banyak item list yang ditulis menggunakan tag <li>.

<!DOCTYPE html>
<html>
<head>
    <title>List Banyak Item</title>
</head>
<body>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>PHP</li>
</ul>

</body>
</html>

penjelasan: Setiap li akan ditampilkan sebagai item daftar.

3. List di Dalam Paragraf

Tag <ul> dapat digunakan untuk menampilkan daftar informasi yang berkaitan dengan teks di halaman web.

<!DOCTYPE html>
<html>
<head>
    <title>List Informasi</title>
</head>
<body>

<p>Bahasa pemrograman web:</p>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

</body>
</html>

penjelasan: List membantu menampilkan informasi secara terstruktur.

4. List dengan CSS Styling

Tag <ul> dapat diberi style menggunakan CSS untuk mengubah tampilan bullet atau jarak list.

<!DOCTYPE html>
<html>
<head>
    <title>List CSS</title>
    <style>
        ul{
            color:blue;
        }
    </style>
</head>
<body>

<ul>
    <li>Item Pertama</li>
    <li>Item Kedua</li>
</ul>

</body>
</html>

penjelasan: CSS dapat mengubah warna atau tampilan daftar.

5. List dengan Type Bullet

Tag <ul> dapat menggunakan CSS untuk mengubah jenis bullet seperti lingkaran atau kotak.

<!DOCTYPE html>
<html>
<head>
    <title>List Bullet</title>
    <style>
        ul{
            list-style-type:square;
        }
    </style>
</head>
<body>

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

</body>
</html>

penjelasan: List-style-type mengubah bentuk bullet list.

6. List di Dalam List

Tag <ul> dapat digunakan di dalam item list untuk membuat daftar bertingkat.

<!DOCTYPE html>
<html>
<head>
    <title>List Bertingkat</title>
</head>
<body>

<ul>
    <li>Buah
        <ul>
            <li>Apel</li>
            <li>Mangga</li>
        </ul>
    </li>
</ul>

</body>
</html>

penjelasan: List bertingkat membantu membuat struktur daftar.

7. List dengan Class CSS

Tag <ul> dapat menggunakan class agar style CSS dapat digunakan kembali.

<!DOCTYPE html>
<html>
<head>
    <title>List Class</title>
    <style>
        .menu{
            background:lightgray;
            padding:10px;
        }
    </style>
</head>
<body>

<ul class="menu">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
</ul>

</body>
</html>

penjelasan: Class memudahkan penggunaan style yang sama.

8. List sebagai Menu Navigasi

Tag <ul> sering digunakan untuk membuat menu navigasi pada website.

<!DOCTYPE html>
<html>
<head>
    <title>Menu Navigasi</title>
</head>
<body>

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Kontak</a></li>
</ul>

</body>
</html>

penjelasan: List sering digunakan untuk membuat menu website.

Contoh HTML, CSS dan JS Lengkap: Responsive Menu

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glass Responsive Menu</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<nav class="glass-nav">

<div class="logo">Selamat Datang</div>

<div class="hamburger" onclick="toggleMenu()">
<span></span>
<span></span>
<span></span>
</div>

<ul class="menu" id="menu">
<li><a href="#">Beranda</a></li>
<li><a href="#">Tentang</a></li>
<li><a href="#">Layanan</a></li>
<li><a href="#">Portofolio</a></li>
<li><a href="#">Kontak</a></li>
</ul>

</nav>

<script>
function toggleMenu(){
document.getElementById("menu").classList.toggle("active");
}
</script>

</body>
</html>

Atribut Penting HTML Tag UL

Tag <ul> tidak memiliki atribut khusus selain atribut global. Semua kontrol lebih ke arah styling atau identifikasi melalui CSS dan atribut global.

Atribut Global yang Didukung HTML Tag UL

Atribut	Fungsi	Contoh
id	Identitas unik	`<ul id="daftar1">`
class	Kelas CSS	`<ul class="highlight">`
style	Styling inline	`<ul style="color:red">`
title	Keterangan tambahan	`<ul title="Daftar Buah">`
lang	Bahasa teks	`<ul lang="en">`
dir	Arah teks	`<ul dir="ltr">`
hidden	Menyembunyikan elemen	`<ul hidden>`
data-*	Data kustom tambahan	`<ul data-type="menu">`

Manfaat Menggunakan HTML Tag UL

Menyajikan daftar item secara rapi dan mudah dibaca
Membantu struktur halaman lebih semantik
Dapat digabungkan dengan CSS untuk styling daftar
Memudahkan navigasi dan identifikasi konten
Mendukung daftar bersarang (nested list) untuk hierarki

Best Practice Penggunaan Tag UL

Gunakan untuk daftar tak berurutan, bukan untuk layout
Gunakan <li> untuk setiap item
Gunakan CSS untuk mengubah bullet atau orientasi daftar
Hindari penggunaan tabel untuk daftar sederhana
Gunakan nested list jika ada hierarki item

Kesimpulan

HTML tag <ul> digunakan untuk membuat daftar tak berurutan. Tag ini membantu menstrukturkan konten secara semantik dan memudahkan styling dengan CSS.

Untuk memahami dasar tag HTML lebih lengkap, silakan baca dokumentasi tag HTML lengkap.

Panduan Menggunakan Tag ul