List (daftar)<\/strong> dalam HTML digunakan untuk menampilkan sekumpulan data dalam bentuk:<\/p>\n\n\n\n List sangat sering digunakan dalam:<\/p>\n\n\n\n HTML memiliki 3 jenis list:<\/p>\n\n\n\n Digunakan untuk daftar yang berurutan (ada nomor)<\/strong>.<\/p>\n\n\n\n Pilihan:<\/p>\n\n\n\n \ud83d\udc49 Digunakan untuk step-by-step<\/strong><\/p>\n\n\n\n Digunakan untuk daftar tanpa urutan (bullet)<\/strong>.<\/p>\n\n\n\n Jenis:<\/p>\n\n\n\n \ud83d\udc49 Ini contoh real di website restoran<\/p>\n\n\n\n Digunakan untuk menjelaskan istilah<\/strong>.<\/p>\n\n\n\n List bisa dibuat bertingkat.<\/p>\n\n\n\n \ud83d\udc49 Digunakan untuk:<\/p>\n\n\n\n Ini bagian paling penting \ud83d\udd25<\/p>\n\n\n\n \ud83d\udc49 Ini struktur navbar website asli<\/strong><\/p>\n\n\n\n \ud83d\udc49 Ini dasar dari:<\/p>\n\n\n\n Karena tidak butuh urutan<\/p>\n\n\n\n Misalnya:<\/p>\n\n\n\n \ud83d\udc49 Salah<\/p>\n\n\n\n \ud83d\udc49 Menu \u2192 harusnya Buat:<\/p>\n\n\n\n Buat:<\/p>\n\n\n\n Buat:<\/p>\n\n\n\n Isi:<\/p>\n\n\n\n List HTML digunakan untuk:<\/p>\n\n\n\n Tag utama:<\/p>\n\n\n\n 1. Pengertian List List (daftar) dalam HTML digunakan untuk menampilkan sekumpulan data dalam bentuk: List sangat sering digunakan dalam: 2….<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[5],"tags":[32],"class_list":["post-483","post","type-post","status-publish","format-standard","hentry","category-tutorial-html","tag-tutorial-html"],"_links":{"self":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/483","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/comments?post=483"}],"version-history":[{"count":1,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/483\/revisions"}],"predecessor-version":[{"id":484,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/posts\/483\/revisions\/484"}],"wp:attachment":[{"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/media?parent=483"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/categories?post=483"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bisasoftware.id\/2026\/wp-json\/wp\/v2\/tags?post=483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
\n
\n\n\n\n2. Jenis-Jenis List di HTML<\/h2>\n\n\n\n
Jenis<\/th> Tag<\/th><\/tr><\/thead> Ordered List<\/td> <ol><\/code><\/td><\/tr>Unordered List<\/td> <ul><\/code><\/td><\/tr>Description List<\/td> <dl><\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\n3. Ordered List (
<ol><\/code>)<\/h1>\n\n\n\n3.1 Pengertian<\/h2>\n\n\n\n
3.2 Contoh<\/h2>\n\n\n\n
<ol>
<li>Bangun tidur<\/li>
<li>Sarapan<\/li>
<li>Berangkat sekolah<\/li>
<\/ol><\/code><\/pre>\n\n\n\n
\n\n\n\n3.3 Atribut Ordered List<\/h2>\n\n\n\n
Type angka\/format:<\/h3>\n\n\n\n
<ol type=\"A\">
<li>Item<\/li>
<\/ol><\/code><\/pre>\n\n\n\n\n
1<\/code> \u2192 angka (default)<\/li>\n\n\n\nA<\/code> \u2192 huruf besar<\/li>\n\n\n\na<\/code> \u2192 huruf kecil<\/li>\n\n\n\nI<\/code> \u2192 romawi besar<\/li>\n\n\n\ni<\/code> \u2192 romawi kecil<\/li>\n<\/ul>\n\n\n\n
\n\n\n\n3.4 Studi Kasus (Langkah Tutorial)<\/h2>\n\n\n\n
<h2>Cara Membuat Akun<\/h2>
<ol>
<li>Buka website<\/li>
<li>Klik daftar<\/li>
<li>Isi data<\/li>
<li>Klik submit<\/li>
<\/ol><\/code><\/pre>\n\n\n\n
\n\n\n\n4. Unordered List (
<ul><\/code>)<\/h1>\n\n\n\n4.1 Pengertian<\/h2>\n\n\n\n
4.2 Contoh<\/h2>\n\n\n\n
<ul>
<li>Nasi Goreng<\/li>
<li>Mie Ayam<\/li>
<li>Sate<\/li>
<\/ul><\/code><\/pre>\n\n\n\n
\n\n\n\n4.3 Atribut Bullet Style<\/h2>\n\n\n\n
<ul type=\"square\">
<li>Item<\/li>
<\/ul><\/code><\/pre>\n\n\n\n\n
\n\n\n\n4.4 Studi Kasus (Menu Makanan)<\/h2>\n\n\n\n
<h2>Menu Restoran<\/h2>
<ul>
<li>Nasi Goreng<\/li>
<li>Ayam Bakar<\/li>
<li>Es Teh<\/li>
<\/ul><\/code><\/pre>\n\n\n\n
\n\n\n\n5. Description List (
<dl><\/code>)<\/h1>\n\n\n\n5.1 Pengertian<\/h2>\n\n\n\n
5.2 Struktur<\/h2>\n\n\n\n
<dl>
<dt>HTML<\/dt>
<dd>Bahasa markup<\/dd>
<\/dl><\/code><\/pre>\n\n\n\n
\n\n\n\n5.3 Studi Kasus (Istilah IT)<\/h2>\n\n\n\n
<dl>
<dt>HTML<\/dt>
<dd>Bahasa untuk membuat website<\/dd>
<dt>CSS<\/dt>
<dd>Untuk desain tampilan<\/dd>
<\/dl><\/code><\/pre>\n\n\n\n
\n\n\n\n6. Nested List (List di dalam List)<\/h1>\n\n\n\n
6.1 Pengertian<\/h2>\n\n\n\n
6.2 Contoh (Menu Kategori)<\/h2>\n\n\n\n
<ul>
<li>Makanan
<ul>
<li>Nasi Goreng<\/li>
<li>Mie Ayam<\/li>
<\/ul>
<\/li>
<li>Minuman
<ul>
<li>Es Teh<\/li>
<li>Jus<\/li>
<\/ul>
<\/li>
<\/ul><\/code><\/pre>\n\n\n\n\n
\n\n\n\n7. Studi Kasus Utama (NAVIGASI WEBSITE)<\/h1>\n\n\n\n
7.1 Navigasi Sederhana<\/h2>\n\n\n\n
<ul>
<li>Home<\/li>
<li>Profil<\/li>
<li>Kontak<\/li>
<\/ul><\/code><\/pre>\n\n\n\n
\n\n\n\n7.2 Navigasi dengan Link<\/h2>\n\n\n\n
<ul>
<li><a href=\"index.html\">Home<\/a><\/li>
<li><a href=\"profil.html\">Profil<\/a><\/li>
<li><a href=\"kontak.html\">Kontak<\/a><\/li>
<\/ul><\/code><\/pre>\n\n\n\n
\n\n\n\n7.3 Navigasi Dropdown (Dasar)<\/h2>\n\n\n\n
<ul>
<li>Produk
<ul>
<li><a href=\"#\">Laptop<\/a><\/li>
<li><a href=\"#\">HP<\/a><\/li>
<\/ul>
<\/li>
<\/ul><\/code><\/pre>\n\n\n\n\n
\n\n\n\n8. Contoh Program Lengkap (Menu + Navigasi)<\/h1>\n\n\n\n
<!DOCTYPE html>
<html>
<head>
<title>Menu Website<\/title>
<\/head>
<body>
<h1>Website Restoran<\/h1>
<h2>Navigasi<\/h2>
<ul>
<li><a href=\"#\">Home<\/a><\/li>
<li><a href=\"#\">Menu<\/a><\/li>
<li><a href=\"#\">Kontak<\/a><\/li>
<\/ul>
<h2>Menu Makanan<\/h2>
<ul>
<li>Nasi Goreng<\/li>
<li>Ayam Bakar<\/li>
<\/ul>
<h2>Menu Minuman<\/h2>
<ul>
<li>Es Teh<\/li>
<li>Jus Jeruk<\/li>
<\/ul>
<\/body>
<\/html><\/code><\/pre>\n\n\n\n
\n\n\n\n9. Best Practice Industri<\/h1>\n\n\n\n
\u2714 Gunakan
<ul><\/code> untuk navigasi<\/h3>\n\n\n\n
\n\n\n\n\u2714 Gunakan
<ol><\/code> untuk langkah<\/h3>\n\n\n\n\n
\n\n\n\n\u2714 Gunakan nested list untuk menu kompleks<\/h3>\n\n\n\n
\n\n\n\n\u2714 Gabungkan dengan
<a><\/code> untuk link<\/h3>\n\n\n\n
\n\n\n\n10. Kesalahan Umum Siswa<\/h1>\n\n\n\n
\u274c Tidak menggunakan
<li><\/code><\/h3>\n\n\n\n<ul>
Nasi Goreng
<\/ul><\/code><\/pre>\n\n\n\n
\n\n\n\n\u274c Salah memilih jenis list<\/h3>\n\n\n\n
<ul><\/code>, bukan <ol><\/code><\/p>\n\n\n\n
\n\n\n\n\u274c Struktur tidak rapi<\/h3>\n\n\n\n
\n\n\n\n11. Latihan Siswa<\/h1>\n\n\n\n
Latihan 1<\/h3>\n\n\n\n
\n
\n\n\n\nLatihan 2<\/h3>\n\n\n\n
\n
\n\n\n\nLatihan 3<\/h3>\n\n\n\n
\n
\n\n\n\n12. Mini Project<\/h1>\n\n\n\n
\ud83c\udfaf Buat Halaman: \u201cWebsite Restoran\u201d<\/h2>\n\n\n\n
\n
\n\n\n\n13. Kesimpulan<\/h1>\n\n\n\n
\n
<ul>, <ol>, <li>, <dl><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"