Dalam HTML 5, penulisan daftar atau list adalah cara yang efektif untuk mengorganisir informasi dan membuatnya mudah dibaca oleh pengguna. Ada dua jenis daftar utama yang sering digunakan, yaitu daftar tidak terurut (unordered list) dan daftar terurut (ordered list). Artikel ini akan menjelaskan penggunaan dan cara membuat kedua jenis daftar tersebut dengan detail.
Daftar Tidak Terurut (Unordered List)
Daftar tidak terurut digunakan untuk menyajikan item yang tidak memiliki urutan tertentu. Setiap item dalam daftar ini biasanya ditandai dengan bullet point atau simbol lain yang tidak menunjukkan urutan tertentu.
Penggunaan Tag <ul> dan <li>
Untuk membuat daftar tidak terurut, digunakan tag <ul> (unordered list) sebagai wadah untuk seluruh item daftar, dan tag <li> (list item) untuk setiap item dalam daftar.
Membuat Daftar Tidak Terurut
Berikut adalah contoh sederhana cara membuat daftar tidak terurut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Daftar Tidak Terurut</title>
</head>
<body>
<h1>Daftar Belanja</h1>
<ul>
<li>Apel</li>
<li>Pisang</li>
<li>Jeruk</li>
<li>Anggur</li>
</ul>
</body>
</html>
Pada contoh di atas, tag <ul> digunakan untuk membungkus seluruh daftar, dan setiap item dalam daftar ditulis menggunakan tag <li>. Hasilnya adalah daftar yang tidak terurut dengan setiap item ditandai dengan bullet point.
Daftar Terurut (Ordered List)
Daftar terurut digunakan untuk menyajikan item yang memiliki urutan tertentu, seperti langkah-langkah dalam sebuah instruksi atau daftar peringkat. Setiap item dalam daftar ini ditandai dengan angka atau huruf yang menunjukkan urutan.
Penggunaan Tag <ol> dan <li>
Untuk membuat daftar terurut, digunakan tag <ol> (ordered list) sebagai wadah untuk seluruh item daftar, dan tag <li> untuk setiap item dalam daftar.
Membuat Daftar Terurut
Berikut adalah contoh sederhana cara membuat daftar terurut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Daftar Terurut</title>
</head>
<body>
<h1>Langkah-langkah Membuat Kopi</h1>
<ol>
<li>Didihkan air</li>
<li>Masukkan bubuk kopi ke dalam cangkir</li>
<li>Tuangkan air panas ke dalam cangkir</li>
<li>Aduk kopi hingga merata</li>
<li>Tambahkan gula sesuai selera</li>
</ol>
</body>
</html>
Pada contoh di atas, tag <ol> digunakan untuk membungkus seluruh daftar, dan setiap item dalam daftar ditulis menggunakan tag <li>. Hasilnya adalah daftar yang terurut dengan setiap item ditandai dengan angka yang menunjukkan urutan.
Kesimpulan
Memahami dan menggunakan daftar dalam HTML 5 adalah keterampilan dasar yang sangat berguna dalam pengembangan situs web. Daftar tidak terurut (<ul>) digunakan untuk item yang tidak memiliki urutan tertentu, sementara daftar terurut (<ol>) digunakan untuk item yang memiliki urutan tertentu. Dengan menggunakan tag <li>, setiap item dalam daftar dapat dengan mudah ditambahkan dan diorganisir sesuai kebutuhan.
Contoh Penggunaan dalam Artikel Blog
Daftar sering digunakan dalam artikel blog untuk menyajikan informasi secara terstruktur dan mudah dibaca. Misalnya, dalam artikel tentang tips kesehatan, Anda bisa menggunakan daftar terurut untuk menyajikan langkah-langkah mengikuti rutinitas sehat atau daftar tidak terurut untuk menyajikan makanan sehat yang direkomendasikan.
Contoh Artikel Blog
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="daftar di html5, list di html 5">
<title>Tips Kesehatan Harian</title>
</head>
<body>
<h1>Tips Kesehatan Harian</h1>
<h2>Langkah-langkah Menjaga Kesehatan</h2>
<ol>
<li>Minum air putih minimal 8 gelas sehari</li>
<li>Olahraga secara rutin minimal 30 menit sehari</li>
<li>Makan makanan sehat dan seimbang</li>
<li>Istirahat yang cukup</li>
<li>Hindari stres</li>
</ol>
<h2>Makanan Sehat yang Direkomendasikan</h2>
<ul>
<li>Buah-buahan segar</li>
<li>Sayuran hijau</li>
<li>Kacang-kacangan</li>
<li>Ikan berlemak</li>
<li>Gandum utuh</li>
</ul>
</body>
</html>
Artikel ini menggunakan daftar terurut untuk menyajikan langkah-langkah menjaga kesehatan dan daftar tidak terurut untuk menyajikan makanan sehat yang direkomendasikan, membuat informasi lebih terstruktur dan mudah dipahami oleh pembaca
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.