Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Cara Membuat List di HTML dengan Benar

Dipublikasikan Oleh: elfanmauludi 27 komentar
List adalah sebuah record dari pecahan kecil informasi, seperti nama seseorang, biasanya ditulis atau dicetak dengan tanda khusus pada setiap barisnya dan disusun dengan suatu cara tertentu sehingga muda untuk menemukan informasi spesifik yang terkandung dalam urutannya. 

Sebelum mempelajari materi tentang Cara Membuat List di HTML dengan Benar, terlebih dahulu pelajari materi tentang: Cara Membuat Teks Tebal Miring dan Garis Bawah pada HTML, Cara Membuat Kutipan pada HTML, dan Cara Membuat Tabel di HTML dengan Notepad.

Contoh list dalam hidupan sehari-hari:
  • List daftar belanja.
  • List aktifitas sehari-hari.

List pada HTML
HTML memberikan tiga cara untuk menampilkan informasi dalam bentuk list. Semua list tersebut harus mengandung satu atau lebih dari daftar list elemen.

Tipe dari list yang dapat digunakan pada HTML adalah:
  • ul: Unordered list. List ini akan menggunakan bentuk plain bullet sebagai penanda list.
  • ol: Ordered list. List ini akan menggunakan bentuk skema berbeda dari angka terhadap item list.
  • dl: Definition list. List ini akan mengarahkan item informasi sama seperti pengarahan pada sistem kamus.

Unordered List pada HTML: Anordered list dimulai dengan tag "ul", dimana setiap item list dimulai dengan tag "li" (list). Item list akan ditandai dengan bullet (titik khusus) seperti lingkaran hitam kecil secara otomatis.  Unordered List atau daftar tak terurut dalam HTML digunakan untuk menampilkan daftar item tanpa urutan atau hierarki tertentu. Biasanya ditampilkan dalam bentuk simbol-simbol seperti bulletpoints atau bullets untuk setiap item dalam daftar.

Untuk membuat sebuah Unordered List dalam HTML, pengembang dapat menggunakan elemen <ul> (Unordered List) bersama dengan elemen <li> (List Item) untuk setiap item di dalam daftar tersebut.

Contoh penggunaan Unordered List dalam HTML:
<ul>
<li>Item pertama dalam daftar tak terurut</li>
<li>Item kedua dalam daftar tak terurut</li>
<li>Item ketiga dalam daftar tak terurut</li>
</ul>

Dari contoh sebelumnya, elemen <ul> menandai awal dari daftar tak terurut, dan setiap elemen <li> atau List Item, didalamnya menandai item-item dalam daftar tersebut. Ketika ditampilkan di browser, item-item ini akan muncul dengan bullets atau simbol-simbol lainnya yang menandakan daftar tak terurut.

Catatan: Perancang web dapat menggunakan CSS untuk menyesuaikan tampilan daftar tak terurut ini, seperti mengubah jenis bullets, mengatur jarak antar item, atau memberikan gaya lainnya sesuai dengan desain halaman web yang diinginkan.

Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<h2>

Grocery list

</h2>

 

<ul>

<li>Bread</li>

<li>Eggs</li>

<li>Milk</li>

<li>Coffee</li>

</ul>

 

</body>

 

</html>

Output:

Grocery list

  • Bread
  • Eggs
  • Milk
  • Coffee

Item unordered list memiliki berbagai variasi HTML:
satu, Disc: Sekumpulan item list marker untuk tipe bullet default.

Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<h2>

Unordered List with Disc Bullets

</h2>

 

<h2>

Grocery List

</h2>

 

<ul style="list-style-type:disc">

<li>Bread</li>

<li>Eggs</li>

<li>Milk</li>

<li>Coffee</li>

</ul>

 

</body>

 

</html>

Output:

Unordered List with Disc Bullets

Grocery List

  • Bread
  • Eggs
  • Milk
  • Coffee

dua, Circle (lingkaran): Sekumpulan item list marker berbentuk tipe lingkaran.

Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<h2>

Unordered List with Circle Bullets

</h2>

 

<h2>

Grocery list

</h2>

 

<ul style="list-style-type:circle">

<li>Bread</li>

<li>Eggs</li>

<li>Milk</li>

<li>Coffee</li>

</ul>

 

</body>

 

</html>

Output:

Unordered List with Circle Bullets

Grocery list

  • Bread
  • Eggs
  • Milk
  • Coffee

tiga, Square (persegi): Sekumpulan item list marker berbentuk kotak.

Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<h2>

Unordered List with Square Bullets

</h2>

 

<h2>

Grocery list

</h2>

 

<ul style="list-style-type:square">

<li>Bread</li>

<li>Eggs</li>

<li>Milk</li>

<li>Coffee</li>

</ul>

 

</body>

 

</html>

Output:

Unordered List with Square Bullets

Grocery list

  • Bread
  • Eggs
  • Milk
  • Coffee

Ordered List pada HTML: Ordered list dimulai dengan tag "ol", dimana setiap list item dimulai dengan tag "li". Item list ditandai dengan angka dengan urutan yang otomatis. Ordered List atau daftar berurutan dalam HTML digunakan untuk menampilkan daftar item dengan urutan numerik atau alfabetik yang bermakna. Ordered List menggunakan angka, huruf, atau simbol lain untuk mengindikasikan urutan dari setiap item dalam daftar.

Untuk membuat Ordered List dalam HTML, perancang web dapat menggunakan elemen <ol> atau Ordered List bersamaan dengan elemen <li> atau List Item untuk setiap item yang terdapat di dalam daftar tersebut.

Contoh penggunaan Ordered List dalam HTML:
<ol>
<li>Item pertama dalam daftar terurut</li>
<li>Item kedua dalam daftar terurut</li>
<li>Item ketiga dalam daftar terurut</li>
</ol>

Baca Juga:

Dari contoh sebelumnya, elemen <ol> digunakan untuk menandai awal dari daftar berurutan, dan setiap elemen <li> atau List Item, didalamnya menandai item-item dalam daftar tersebut. Ketika ditampilkan di browser, item-item ini akan muncul dengan nomor urutan yang menandakan daftar terurut.

Catatan: Seperti halnya Unordered List, perancang atau pengembang web juga dapat menggunakan CSS untuk menyesuaikan tampilan Ordered List, seperti mengubah jenis angka atau huruf, mengatur jarak antar item, atau memberikan gaya lainnya sesuai dengan desain halaman web yang diinginkan.

Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<h2>

Grocery List

</h2>

 

<ol>

<li>Bread</li>

<li>Eggs</li>

<li>Milk</li>

<li>Coffee</li>

</ol>

 

</body>

 

</html>

Output:

Grocery List

  1. Bread
  2. Eggs
  3. Milk
  4. Coffee

Ordered list HTML memiliki berbagai variasi list item marker:
Tipe atribut dari tag <ol>, mendefinisikan tipe dari list item marker.

satu, tipe="1", item list akan ditandai dengan urutan angka secara otomatis.

Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<h2>

Ordered List with Numbers

</h2>

 

<ol type="1">

<li>Bread</li>

<li>Eggs</li>

<li>Milk</li>

<li>Coffee</li>

</ol>

 

</body>

 

</html>

Output:

Ordered List with Numbers

  1. Bread
  2. Eggs
  3. Milk
  4. Coffee

dua, type="A", item list akan ditandai dengan urutan huruf uppercase.

Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<h2>

Ordered List with Letters

</h2>

 

<ol type="A">

<li>Bread</li>

<li>Eggs</li>

<li>Milk</li>

<li>Coffee</li>

</ol>

 

</body>

 

</html>

Output:

Ordered List with Letters

  1. Bread
  2. Eggs
  3. Milk
  4. Coffee

tiga, type="a", item list akan ditandai dengan urutan huruf lowercase.

Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<h2>

Ordered List with Lowercase Letters

</h2>

 

<ol type="a">

<li>Bread</li>

<li>Eggs</li>

<li>Milk</li>

<li>Coffee</li>

</ol>

 

</body>

 

</html>

Output:

Ordered List with Lowercase Letters

  1. Bread
  2. Eggs
  3. Milk
  4. Coffee

empat, type="I", item list akan ditandai dengan urutan penomoran romawi uppercase.

Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<h2>

Ordered List with Roman Numbers

</h2>

 

<ol type="I">

<li>Bread</li>

<li>Eggs</li>

<li>Milk</li>

<li>Coffee</li>

</ol>

 

</body>

 

</html>

Output:

Ordered List with Roman Numbers

  1. Bread
  2. Eggs
  3. Milk
  4. Coffee

lima, type="i", item list akan ditandai dengan urutan penomoran romawi lowercase.

Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<h2>

Ordered List with Lowercase Roman Numbers

</h2>

 

<ol type="i">

<li>Bread</li>

<li>Eggs</li>

<li>Milk</li>

<li>Coffee</li>

</ol>

 

</body>

 

</html>

Output:

Ordered List with Lowercase Roman Numbers

  1. Bread
  2. Eggs
  3. Milk
  4. Coffee

Description List pada HTML
Description list adalah sebuah list dari istilah tertentu, yang disertai dengan deskripsi pada setiap istilah tersebut. Tag <dl> digunakan untuk mendefinisikan description list, yang digunakan untuk mendefinisikan nama istilah, dan tag <dd> digunakan untuk mendeskripsikan setiap istilah pada list. 

Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<h2>

A Description List

</h2>

 

<dl>

<dt>Coffee</dt>

<dd>- 500 gms</dd>

<dt>Milk</dt>

<dd>- 1 ltr Tetra Pack</dd>

</dl>

 

</body>

 

</html>

Output:

A Description List

Coffee
- 500 gms
Milk
- 1 ltr Tetra Pack

List bersarang pada HTML:
List bersarang adalah sekumpulan list yang terdapat di dalam sebuah list.

Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<h2>

A Nested List

</h2>

 

<ul>

<li>Coffee</li>

 

<li>Tea

<ul>

<li>Black tea</li>

<li>Green tea</li>

</ul>

</li>

 

<li>Milk</li>

</ul>

 

</body>

 

</html>

Output:

A Nested List

  • Coffee
  • Tea
    • Black tea
    • Green tea
  • Milk

Referensi Tambahan:

Artikel ini didedikasikan kepada: Nyawiji Rizki Lestari, Putri Safina Liestyana, Rafi' Alauddin, Risma Kusumawati, dan Seto Pribadhi.
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

27 komentar untuk "Cara Membuat List di HTML dengan Benar"

  1. AnonimJumat, 21 Mei 2021 pukul 21.51.00 WIB

    Apa fungsi dari penggunaan list atau daftar pada HTML?

    BalasHapus
    Balasan
    1. AnonimJumat, 21 Mei 2021 pukul 21.51.00 WIB

      List atau daftar HTML digunakan untuk menyajikan daftar informasi dalam bentuk yang baik dan sistematis. Ada tiga jenis list dalam HTML dan masing-masing penggunaannya memiliki tujuan dan arti tertentu.

      Hapus
  2. AnonimJumat, 21 Mei 2021 pukul 21.53.00 WIB

    Apa tujuan dari penggunaan list pada HTML?

    BalasHapus
    Balasan
    1. AnonimJumat, 21 Mei 2021 pukul 21.53.00 WIB

      List atau daftar digunakan untuk mengelompokkan informasi yang saling berkaitan, sehingga menjadi jelas hubungan antara satu dan lainnya dalam kumpulan informasi tersebut. Dalam pengembangan web modern, list merupakan elemen yang sering digunakan untuk navigasi serta pembuatan konten secara umum.

      Hapus
  3. AnonimJumat, 21 Mei 2021 pukul 21.55.00 WIB

    List merupakan daftar dari hal-hal seperti alamat ataupun sekumpulan dari data yang semuanya termasuk dalam kategori tertentu, dan ditulis secara berurutan dari urutan pertama hingga akhir.

    BalasHapus
  4. AnonimKamis, 04 Agustus 2022 pukul 14.22.00 WIB

    Apa yang dimaksud dengan unordered list pada laman html?

    BalasHapus
    Balasan
    1. AnonimKamis, 04 Agustus 2022 pukul 14.22.00 WIB

      Unordered list adalah titik-titik list dari sekumpulan item. Pada HTML 3.0 perancang web diberikan kemampuan untuk melakukan penyesuaian titik-titik tersebut, yang dapat dilakukan dengan atau tanpa menggunakan titik-titik (bullet) untuk membungkus daftar item secara horizontal ataupun secara vertikan (untuk daftar multikolom).

      Hapus
  5. AnonimKamis, 04 Agustus 2022 pukul 14.22.00 WIB

    Apa yang dimaksud dengan list pada html?

    BalasHapus
    Balasan
    1. AnonimKamis, 04 Agustus 2022 pukul 14.23.00 WIB

      List adalah istilah atau deksripsi relevan yang disusun dalam bentuk daftar. Daftar definisi list pada HTML dimulai dengan tag DL.

      Hapus
    2. AnonimKamis, 04 Agustus 2022 pukul 14.23.00 WIB

      Seperti halnya melakukan perubahan gaya penomoran untuk ordered list, perancang web juga bisa mengubah bullet style untuk daftar unordered list dengan atribut tipe. Tiga kemungkinan nilai untuk ordered list meliputi: disc - tipe default, yang diwakili oleh solid circle.

      Hapus
  6. AnonimKamis, 04 Agustus 2022 pukul 14.26.00 WIB

    Ordered list dibuat menggunakan elemen OL, dan setiap item list dimulai dengan elemen LI. Ordered list digunakan ketika urutan dari list tersebut penting. List item dalam ordered list ditandai dengan simbol angka.

    BalasHapus
  7. AnonimKamis, 04 Agustus 2022 pukul 14.27.00 WIB

    Jika seorang peranang web diminta untuk meletakkan item dalam sebuah daftar bernomor, maka daftar urutan atau ordered list pada HTML dapat digunakan untuk hal tersebut. Daftar ini dibuat dengan menggunakan tag OL, dimana penomoran dimulai dari satu dan bertambah satu untuk setiap elemen daftar berurutan yang diberi tag LI.

    BalasHapus
  8. AnonimKamis, 04 Agustus 2022 pukul 14.27.00 WIB

    Apakah perbedaan antara ordered list, unordered list, dan definition list pada laman html?

    BalasHapus
    Balasan
    1. AnonimKamis, 04 Agustus 2022 pukul 14.28.00 WIB

      Unordered list digunakan untuk membuat daftar item yang saling berkaitan, tanpa memerhatikan urutan list.

      Ordered list digunakan untuk membuat daftar item yang saling berkaitan, dalam dengan memerhatikan urutan list.

      Description list digunakan untuk membuat list dari kumpulan istilah-istilah beserta deskripsinya.

      Hapus
  9. AnonimKamis, 04 Agustus 2022 pukul 14.28.00 WIB

    Bagaimana cara tercepat untuk menampilkan list dalam satu baris penulisan pada laman html?

    BalasHapus
    Balasan
    1. AnonimKamis, 04 Agustus 2022 pukul 14.28.00 WIB

      Cara tercepat untuk menampilkan daftar list dalam satu baris adalah dengan memberikan elemen LI yang menampilkan nilai properti dari inline atau block-inline, dimana semua elemen LI ditempatkan dalan satu baris tunggal, dengan spasi tunggal yang ditempatkan antar tiap list.

      Hapus
  10. AnonimKamis, 04 Agustus 2022 pukul 14.31.00 WIB

    Apa yang dimaksud dengan definition list pada lama html?

    BalasHapus
    Balasan
    1. AnonimKamis, 04 Agustus 2022 pukul 14.32.00 WIB

      Definition list adalah sekumpulan list dari sebuah istilah beserta definisi terkait. Definition list umumnya diformat dengan istilah berada disebelah kiri dan definisi disebelah kanan. Definition teks biasanya diindentasi sehubungan dengan istilah tersebut.

      Hapus
  11. AnonimKamis, 04 Agustus 2022 pukul 14.32.00 WIB

    Apa yang dimaksud dengan DD pada laman html?

    BalasHapus
    Balasan
    1. AnonimKamis, 04 Agustus 2022 pukul 14.32.00 WIB

      Tag DD dalam html merupakan singkatan dari definition description dan digunakan untuk menunjukkan deskripsi atau definisi item dalam description list.

      Hapus
  12. AnonimKamis, 04 Agustus 2022 pukul 14.33.00 WIB

    Apa yang dimaksud dengan list pada laman html?

    BalasHapus
    Balasan
    1. AnonimKamis, 04 Agustus 2022 pukul 14.33.00 WIB

      Sebuah daftar atau list adalah sekumpulan informasi yang ditampilkan atau diatur dalam bentuk formasi yang sifatnya logis dan linier.

      Hapus
  13. AnonimKamis, 04 Agustus 2022 pukul 14.36.00 WIB

    Nested list atau sublist adalah bentuk dari list yang berada dalam sebuah list. Cara ini menandai list yang ada pada html dengan cara mengenali bahwa sublist sebenarnya dalah bagian dari child list namun bukan parent list.

    BalasHapus
  14. AnonimKamis, 04 Agustus 2022 pukul 14.37.00 WIB

    Ketika sebuah list disematkan dalam list lainnya, maka list tersebut disebut dengan nested list. List dikatakan sebagai sebuah nested list jika list tersebut disisipkan kedalam list lainnya.

    BalasHapus
  15. AnonimKamis, 04 Agustus 2022 pukul 14.37.00 WIB

    Nested list adalah list yang muncul sebagai bagian dari elemen list lain, atau sederhananya kita sebuat dengan list di dalam list.

    BalasHapus
  16. AnonimKamis, 04 Agustus 2022 pukul 14.38.00 WIB

    Apakah pembuatan nested list bermanfaat pada html?

    BalasHapus
    Balasan
    1. AnonimKamis, 04 Agustus 2022 pukul 14.38.00 WIB

      List adalah cara sederhana untuk mengatur daftar yang ditulis dalam sebuah artikel html. Dengan list rincian data menjadi lebih mudah dipantau, dikelola, dan dievaluasi. User juga dapat mengidentifikasi sekumpulan list dan pilihan yang terdapat dalam sebuah informasi supaya lebih mudah untuk dipahami baik rincian ataupun urutan datanya.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -