Mengapa saya harus menggunakan 'li' daripada 'div'?

Saya tidak yakin mengapa saya perlu menggunakan ul-li vs hanya menggunakan div saat mendaftar item. Saya dapat membuat keduanya terlihat persis sama, jadi di mana keuntungan fungsional untuk membuat daftar tidak berurutan vs berbaris div?

Untuk ketepatan semantik. HTML memiliki kemampuan untuk mengekspresikan daftar hal-hal, dan ini membantu robot Google, pembaca layar, dan semua jenis pengguna yang tidak hanya peduli dengan presentasi situs untuk memahami konten Anda dengan lebih baik.

Saya tidak yakin mengapa saya perlu menggunakan ul-li vs hanya menggunakan divs saat membuat daftar item. Saya bisa membuat keduanya terlihat sama persis

Itulah kata kunci dalam pertanyaan Anda: "lihat". Bisakah Anda juga membuat mereka mengetik sama untuk tunanetra menggunakan pembaca Braille? Dapatkah Anda membuatnya terdengar sama untuk orang buta menggunakan penyintesis teks-ke-ucapan? Apakah Anda masih dapat membuatnya terlihat sama untuk orang yang memiliki gangguan penglihatan dengan menggunakan lembar gaya pengguna CSS sisi klien khusus?

Kata, "lihat", adalah kata yang sangat berbahaya - jika Anda menggunakannya dalam kaitannya dengan HTML, semua alarm akan berbunyi di kepala Anda. HTML adalah bahasa untuk mendeskripsikan struktur semantik dari sebuah dokumen hypermedia. Struktur semantik tidak memiliki "tampilan", ini adalah konsep abstrak.

Bahkan jika Anda tidak peduli dengan semua fokus semantik ini dan Anda tidak peduli dengan orang buta, pertimbangkan ini: Google, Yahoo, MSN dan Co. tidak memiliki mata, mereka tidak "melihat" pada CSS yang Anda berikan .

Dengan menggunakan markup yang benar secara semantik, Anda menyematkan informasi tambahan dalam teks Anda. Dengan menggunakan ul / li Anda berkomunikasi dengan aplikasi konsumsi bahwa informasi adalah daftar, dan bukan hanya "sesuatu" (siapa yang tahu apa) yaitu beberapa teks di dalam elemen yang berubah-ubah.

Jawaban langsung untuk pertanyaan Anda: Keuntungan fungsionalnya adalah bahwa div memiliki arti yang kecil, sedangkan ul lis secara eksplisit berarti "ini adalah daftar item yang tidak terurut".

Istilah "semantik" mengacu pada cara Anda menggunakan makna inheren dari struktur yang ada untuk menciptakan makna eksplisit. HTML terdiri dari tag yang memiliki arti tertentu sendiri. Dan ada aturan / pedoman / cara yang ditetapkan untuk menggunakannya sehingga dokumen HTML yang Anda terbitkan menyampaikan apa yang Anda inginkan.

Jika Anda mencantumkan sesuatu di dokumen Anda, tambahkan daftar pesanan (UL) atau daftar tak berurutan (OL). Di sisi lain, elemen pembagian halaman (DIV) digunakan untuk membuat konten tertentu & terpisah.

The div elemen "membagi." Saat Anda melihat halaman, ada bagian tertentu seperti badan konten, footer, header, navigasi, menu, formulir, dll. Dan Anda dapat menggunakan tag div untuk membuat divisi ini. Seringkali, bagian halaman sesuai dengan tata letak visual, jadi menggunakan pembagian halaman eksplisit (DIV) untuk memotong tata letak Anda di CSS adalah hal yang wajar. Dengan cara ini tag div menjadi struktural.

Jika Anda menyalahgunakan atau menggunakan tag div secara berlebihan , itu dapat membuat makna yang tidak diinginkan & kode membengkak.

Untuk membingungkan: Google menggunakan h3 dan div untuk "membagi" hasil pencarian terdaftar mereka. ul> li> h3 + div

Jadi, ketika Anda mematikan semua gaya (Shift + Cmd / Crtl + S di Firefox w / webdeveloper toolbar), yang divs harus pergi, dan tumpukan secara alami. HTML polos Anda harus tetap menampilkan halaman yang bagus dengan hierarki yang jelas: atas ke bawah, konten terpenting terlebih dahulu, dan daftar dengan poin & nomor untuk item yang terdaftar. Dan ada baiknya untuk menambahkan tautan di dekat bagian atas (untuk pengguna non-visual) yang memungkinkan Anda untuk melompat ke bawah ke: konten utama, formulir penting, atau judul utama (seperti daftar isi).

Terakhir, perlu diingat bahwa Anda sedang membuat dokumen. Tanpa semua efek visual, itu harus tetap menjadi dokumen yang meyakinkan.

Ada banyak pembicaraan tentang penggunaan <li>atau penggunaan <div>tetapi tidak ada satu komentar pun yang memberikan contoh kuat tentang konten yang masuk ke dalam tag ini. Perasaan saya adalah itu <ul>dan <li>tidak terlalu penting karena saya tidak dapat memberi tahu Anda kapan terakhir kali saya benar-benar membaca "daftar" hal-hal di situs web, koran atau majalah - online atau di media cetak.

<div>jauh lebih serbaguna. Jika Anda mencantumkan bahan-bahan untuk kue, ya itu daftarnya. Jika Anda membuat daftar hal-hal untuk dikemas untuk perjalanan hiking, ya itu daftarnya.

Tapi bagaimana dengan bentuk pengguna, misalnya, yang mencantumkan beberapa hal acak yang sebenarnya bukan daftar, atau rangkaian paragraf, atau semua "tajuk". Beberapa hal adalah tanggal, beberapa kotak centang dan beberapa adalah teks. Bagikan, jika Anda bertanya kepada saya. Seorang tunanetra akan salah informasi jika itu ditandai dengan <ul>dan <li>dan mereka mendengar "Ini daftar ..." padahal itu hanya isapan jempol belaka, bukan daftar sebenarnya.

Anda harus menggunakan tag yang sesuai untuk konten yang ingin Anda masukkan ke dalamnya. Ini tidak hanya berarti bahwa ul / li lebih cocok untuk daftar. Ini juga berarti Anda harus mempertimbangkan konten daftar Anda dan melihat apakah itu daftar yang tidak berurutan / teratur atau definisi.

Argumen lain adalah ketika Anda menonaktifkan css. Browser akan membuat gaya defaultnya yang membuatnya lebih baik untuk dilihat jika perangkat penelusuran alternatif digunakan. Ini juga meningkatkan aksesibilitas.

Jika Anda menggunakan div, lynx tidak akan dapat merender halaman dengan cara yang dapat dibaca.

Saya pribadi suka li untuk semantik. Saat melihat sumber Anda segera melihat bahwa Anda memiliki daftar sesuatu jika mereka dibungkus oleh li. Koleksi div tidak memberikan arti semantik, dan biasanya satu-satunya semantik ke daftar diperkenalkan oleh kelas css seperti "listItem". Yang jelas menunjukkan fakta bahwa li seharusnya digunakan sejak awal.

Jika Anda memiliki loop dalam logika presentasi Anda, saya selalu lebih menyukai li daripada div.

<li> berarti item dalam daftar dan memungkinkan pengurai (browser, mesin telusur, spider) mengetahui bahwa Anda mencantumkan item. Anda dapat menggunakan DIV, bukan LI, tetapi pengurai tersebut tidak akan pernah tahu bahwa item tersebut dicantumkan dan DIV tidak benar-benar menjelaskan apa pun kecuali bahwa itu adalah blok.

Itu tergantung proyeknya. Saya baru-baru ini melakukan proyek yang memiliki menu yang dirancang menggunakan daftar. Mereka ingin menambahkan banyak efek, seperti sliding / fading, dan juga ingin membuatnya dapat dilipat dengan berbagai level.

Dalam hal ini, DIV jauh lebih cocok. Saya bisa membuat wadah untuk div anak dan menerapkan jQuery untuk mencapai efek yang diinginkan.

Meskipun proyek Anda belum memiliki persyaratan ini, mungkin lebih bijaksana untuk memikirkan bagaimana Anda dapat mengubahnya di masa depan ...

Menggunakan <li>(jika sesuai) mengurangi <div>sup tag yang sering Anda lihat di halaman web, yang sangat membantu developer.

Bukan berarti <div>buruk, tetapi setiap kali sebuah tag digunakan secara berlebihan (seperti yang <div>sering terjadi), itu melemahkan arti semantik dari tag tersebut hingga menjadi sama sekali tidak berguna. Saya baru-baru ini mempelajarinya dari kontraktor yang kami sewa untuk membantu dengan CSS / UI aplikasi web kami, dan perbedaan yang dibuatnya pada keterbacaan / pemeliharaan kode HTML sangat terlihat bagi saya.

Jika yang Anda pedulikan hanyalah membuat daftar terlihat dengan cara tertentu dengan sedikit usaha, maka ini sudah tidak perlu dipikirkan lagi: <li>apakah satu karakter kurang untuk diketik daripada <div> dan tag penutupnya opsional dalam HTML.

Dan itu sebagai tambahan dari apa yang orang lain katakan tentang semantik.

Untuk merender dengan benar di browser atau perangkat seluler primitif

Pertanyaan Anda sudah dijawab oleh saya ingin menambahkan dua sen saya di sini. Saya sedang mengerjakan sebuah proyek di mana saya melakukan logika backend dan data saya dikumpulkan menjadi templat halaman yang dibuat oleh desainer saya. dia menggunakan tag ul dan li untuk mewakili setiap jenis daftar di halaman, beberapa di antaranya adalah widget. Datanya berasal dari cms tempat pengguna dapat memasukkan teks kaya melalui tag html. ketika pengguna mulai membuat daftar di konten mereka, daftar tersebut tidak lagi tampak seperti daftar berpoin, melainkan mengacaukan seluruh halaman.

pelajaran yang didapat: jangan gunakan tag daftar dengan pemilih css generik jika konten Anda dapat berisi html itu sendiri.

hal lain tentang ul li adalah; Anda dapat menggunakan ul sebagai wadah yang membantu Anda mengatur kelas Style

<ul class="myHebe">
  <li><a href="#">.net</a></li>
  <li><a href="#">.net</a></li>
</ul>

Saya suka pola ini ketika saya menggunakan ul

.myHebe{} // container
.myHebe li {} // items
.myHebe li a {} // subitems

Tentu itu tergantung bagaimana kita ingin menggunakannya dan bagaimana kita menyukainya. Ini adalah cara yang saya suka

Semoga membantu Terima kasih