Mengenal List Element dalam HTML

List Element

Halo, teman-teman!

Kalian pasti pernah melihat berbagai daftar di internet, bukan? Mulai dari daftar resep masakan, langkah-langkah DIY, hingga "10 Hal yang Harus Dicoba Sebelum Usia 30." Semua itu dibuat menggunakan elemen list di HTML. Pada artikel ini, kita akan belajar cara membuat daftar menggunakan Ordered List (ol) dan Unordered List (ul). Siap? Yuk, kita mulai!

Apa Itu List Element di HTML?

Elemen list adalah cara HTML untuk membuat daftar. Ada dua jenis utama:

  1. Unordered List (ul): Daftar tanpa urutan tertentu, biasanya dengan simbol bullet point.
  2. Ordered List (ol): Daftar dengan urutan tertentu, biasanya diberi nomor.

Cara Membuat Unordered List

Unordered list digunakan saat urutan tidak penting, seperti daftar belanja. Berikut caranya:

  1. Gunakan tag <ul> untuk membuka daftar.
  2. Setiap item dalam daftar ditulis menggunakan <li>.
  3. Tutup daftar dengan tag </ul>.

Contoh kode:

<ul>
  <li>Roti</li>
  <li>Keju</li>
  <li>Susu</li>
</ul>

Hasilnya di browser akan tampak seperti ini:

  • Roti
  • Keju
  • Susu

Cara Membuat Ordered List

Ordered list cocok untuk menampilkan langkah-langkah atau daftar yang butuh urutan tertentu. Langkahnya:

  1. Gunakan tag <ol> untuk membuka daftar.
  2. Tulis setiap item dengan tag <li>.
  3. Tutup daftar dengan tag </ol>.

Contoh kode:

<ol>
  <li>Campur bahan</li>
  <li>Panggang adonan</li>
  <li>Sajikan</li>
</ol>

Hasil di browser:

  1. Campur bahan
  2. Panggang adonan
  3. Sajikan

Praktik Membuat Website Resep Sederhana

Untuk memahami lebih jauh, mari kita coba membuat halaman HTML sederhana untuk resep cinnamon roll:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Resep Cinnamon Roll</title>
</head>
<body>
  <h1>Resep Cinnamon Roll</h1>
  <h2>Bahan-Bahan</h2>
  <h3>Dough:</h3>
  <ul>
    <li>250g Tepung</li>
    <li>50g Gula</li>
    <li>1 sdt Ragi</li>
  </ul>
  <h3>Filling:</h3>
  <ul>
    <li>50g Mentega</li>
    <li>100g Gula Coklat</li>
    <li>1 sdm Kayu Manis</li>
  </ul>
  <h2>Instruksi</h2>
  <ol>
    <li>Campurkan bahan dough hingga kalis.</li>
    <li>Diamkan adonan selama 1 jam.</li>
    <li>Gulung dengan isian, lalu panggang.</li>
  </ol>
</body>
</html>

Penjelasan

  1. Dough dan Filling: Ditampilkan sebagai unordered list karena urutannya tidak penting.
  2. Instruksi: Ditampilkan sebagai ordered list untuk menampilkan langkah-langkah.

Tips Tambahan

  • Jika ingin menambahkan elemen baru ke dalam daftar, cukup tambahkan <li> di antara tag <ul> atau <ol>.
  • Gunakan indentasi yang rapi untuk mempermudah membaca kode.

Selanjutnya

Pada pelajaran berikutnya, kita akan membahas nested list dan bagaimana cara membuat daftar yang lebih kompleks. Jika ada pertanyaan, jangan ragu untuk berdiskusi di kolom komentar atau forum komunitas.

Selamat mencoba! 😊

Comments

Postingan Populer

Image

Superingan is a Blogger template designed with simplicity and functionality in mind, offering a clean and user-friendly platform for professional websites. This theme is perfect for various website types, including personal blogs, online magazines, news websites, and portfolios. Features: Responsive Design: Your website will look its best across all devices, from desktops and laptops to tablets and smartphones. Customizable Colors: Easily change the template's colors to match your branding or preferences. Custom Headers: Upload your own header image to add a personal touch to your website. Custom Menus: Create and manage your website's navigation menus with ease. Widget Areas: Add widgets to display additional content and features on your website's sidebar. Clean HTML & CSS Code: The template is built with clean and well-structured code, making it easy to learn and customize further. Superingan is an ideal choice for those seeking a professional website with a sim...

Image

If you’ve ever struggled to align elements neatly in CSS—or tried to make a layout look good on both desktop and mobile— Flexbox CSS is your new best friend. Short for "Flexible Box Layout," Flexbox is a layout module in CSS3 that provides an efficient way to distribute space and align items in a container, even when their sizes are dynamic. In this flexbox tutorial for beginners , we’ll guide you step-by-step through what Flexbox is, why it’s essential for responsive design, and how to use it to build clean, adaptable layouts. By the end of this guide, you’ll be able to use Flexbox confidently to build elements like navigation bars, feature sections, and even a CSS flexbox pricing table example . Whether you're a self-taught developer, a student, or someone shifting into a front-end career, Flexbox will become one of your most powerful tools in building responsive, user-friendly websites. Before diving into the code, if you're not yet familiar with CSS fundamenta...

Hello friends, how are you doing? If you own a blog or website and want to earn more revenue through Google AdSense, you’ve come to the right place. In this comprehensive article, we’re going to explore a variety of methods to increase your Cost Per Click (CPC) and Click-Through Rate (CTR), two crucial metrics that greatly influence how much you earn from ads on your blog. We will dig into how to make your blog more appealing to advertisers so that the monetary value of each ad click (CPC) goes up, and the percentage of people who click on your ads (CTR) also rises. We’ll discuss why these two factors matter, how to optimize your content, strategies for choosing the right topics, and how to place ads strategically. We’ll also highlight the importance of SEO so that your blog becomes easier for people to find through search engines. With increased visibility in search results, you can attract more visitors—and with more visitors, your opportunities for higher ad clicks multiply, which ...