Tuliskan cara membuat daftar/list bersarang dengan html

Dalam sebuah website List paling sering digunakan untuk membuat menu dan tag list juga dapat digunakan untuk nested list atau list bersarang. Dalam HTML, tag list terdiri dari tiga jenis, ordered list (berurutan), unordered list (tidak berurutan) dan Description List. Ordered list akan ditampilkan dengan angka atau huruf, sedangkan unordered list dengan bulatan atau kotak. Ordered list menggunakan tag <ol>, dan unordered list menggunakan tag <ul>, sedangkan untuk list sendiri menggunakan tag <li>. Untuk membuat Description List, seluruh list harus berada di dalam pasangan tag <dl> dan </dl>.Untuk setiap deskripsi atau judul istilah, menggunakan tag <dt>. Sedangkan untuk penjelasan istilah tersebut, kita menggunakan tag <dd>. Untuk memudahkan teman-teman saya sudah membuat contoh-contoh untuk setiap list di atas.


Berikut adalah contoh kode HTML untuk membuat ordered list menggunakan tag <ol> :


<!DOCTYPE html>

<html>

<head>

 <title>Point Website</title>

</head>

<body>

  <h1>Daftar Buku</h1>

  <ol>

                <li>Buku Biologi</li>

                <li>Buku Matematika</li>

                <li>Buku Bahasa Inggris</li>

                <li>Buku Sejarah</li>

                <li>Buku Bahasa Arab</li>

  </ol>

</body>

</html>


Jika dijalankan pada web browser maka hasilnya akan seperti berikut ini :


Tuliskan cara membuat daftar/list bersarang dengan html


Untuk membuat unordered list, tinggal ganti tag <ol> menjadi <ul>. Berikut adalah contoh kode HTML untuk membuat unordered list menggunakan tag <ul> :


<!DOCTYPE html>

<html>

<head>

  <title>Point Website</title>

</head>

<body>

  <h1>Daftar Buku</h1>

  <ul>

                <li>Buku Biologi</li>

                <li>Buku Matematika</li>

                <li>Buku Bahasa Inggris</li>

                <li>Buku Sejarah</li>

                <li>Buku Bahasa Arab</li>

  </ul>

</body>

</html>


Jika dijalankan pada web browser maka hasilnya akan seperti berikut ini :


Tuliskan cara membuat daftar/list bersarang dengan html


Penggunaan tag list pada HTML tidak hanya untuk membuat daftar saja. Dengan CSS, tag list dapat digunakan untuk membuat menu navigasi di dalam halaman web, seperti menu Home, Contact us, About, dll. Tag list juga dapat digunakan untuk nested list, atau list bersarang, yang artinya sebuah list yang berada di dalam list lainnya.


Selanjutnya kita akan membuat Description List. Berikut adalah contoh kode HTML untuk membuat Description.


<!DOCTYPE html>

<html>

<head>

<title>Point Website</title>

</head>

<body>

                <h1>Daftar list dalam HTML</h1>

                                <dl>

                                       <dt>Ordered List</dt>

                                        <dd>Ordered list akan ditampilkan dengan angka.</dd>

                                        <dt>Unordered List</dt>

                                        <dd>Unordered list akan ditampilkan dengan bulatan atau kotak</dd>

                                        <dt>Description List </dt>

                                        <dd>Gambar ini hasil dari Description List.</dd>

                                </dl>

</body>

</html>


Silahkan teman-teman jalankan pada web browser, maka hasilnya akan seperti berikut :


Tuliskan cara membuat daftar/list bersarang dengan html


Dari hasil gambar diatas dapat kita lihat bahwa isi dari penjelasan pada tag <dd> akan ditampilkan dengan sedikit menjorok (indent) dari bagian istilahnya.


Sekian tutorial saya tentang Cara Membuat List Dalam HTML, semoga dapat membantu teman-teman dalam mempelajari HTML. Untuk tutorial yang lain akan saya bahas pada tutorial selanjutnya.

Manakah tag HTML yang digunakan untuk membuat daftar list berurutan?

Ordered List di HTML. Ordered list dibuat dengan tag <ol> .

Apa itu list dalam HTML?

list atau yang kita kenal dengan daftar berurutan merupakan fungsi dalam HTML yang digunakan untuk menampilkan data secara berurutan ke bawah. Dalam HTML penilisan list menggunakan tag <li>. dalam membuat list pada HTML ini terdapat dua jenis tampilan list yang bisa di gunakan yaitu ordered list dan unordered list.

Tag apa yang digunakan untuk membuat list Ordered?

Ordered list dibuat dengan tag <ol> . Lalu di dalamnya diisi dengan item-item yang akan dimasukkan ke dalam list. Item dibuat dengan tag <li> (list item).

Apa itu Nested HTML?

List bersarang atau nested list merupakan daftar list yang memiliki daftar list anakan di dalam list tersebut. Penggunaan list pada HTML biasanya menggunakan HTML tag element OL (ordered list) maupun UL (un-ordered list).