Haruskah saya menggunakan <ul> dan <li> di dalam <nav> saya?

Judulnya cukup banyak menjelaskannya.

Sekarang kami memiliki <nav>tag khusus ,

Apakah ini:

<nav>
  <ul>
    <li><a href="#foo">foo</a></li>
    <li><a href="#bar">bar</a></li>
    <li><a href="#baz">baz</a></li>
  </ul>
</nav>

ada yang lebih baik dari yang berikut ini?

<nav>
  <a href="#foo">foo</a>
  <a href="#bar">bar</a>
  <a href="#baz">baz</a>
</nav>

Maksud saya, dengan asumsi bahwa saya tidak memerlukan level DOM tambahan untuk beberapa pemosisian / padding CSS, cara apa yang lebih disukai, dan mengapa?

elemen nav dan daftar memberikan informasi semantik yang berbeda:

• Elemen nav mengkomunikasikan bahwa kita berurusan dengan blok navigasi utama

• Daftar tersebut memberitahukan bahwa tautan di dalam blok navigasi ini membentuk daftar item

Di http://w3c.github.io/html/sections.html#the-nav-element Anda dapat melihat bahwa elemen navigasi juga dapat berisi prosa.

Jadi ya, memiliki daftar di dalam elemen nav memang menambah makna.

Pada titik ini, saya akan menyimpan <ul><li>elemennya, karena belum semua browser mendukung tag HTML5.

Misalnya, saya mengalami masalah saat menggunakan <header> tag - Chrome dan FF bekerja dengan sangat baik, tetapi Opera gagal.

Sampai semua browser mendukung HTML sepenuhnya, saya akan tetap menggunakannya, tetapi mengandalkan yang lama untuk kompatibilitas mundur.

Terserah kamu kok. Jika Anda biasanya menggunakan daftar tidak berurutan untuk menandai menu navigasi Anda, maka saya akan mengatakan terus melakukannya dalam elemen <nav>. Inti dari elemen <nav> adalah untuk mengidentifikasi navigasi situs ke pembaca komputer misalnya, jadi apakah Anda menggunakan daftar atau hanya tautan tidak penting.

Bagi saya, daftar tidak berurutan adalah markup tambahan yang sebenarnya tidak diperlukan. Saat saya melihat dokumen HTML, saya ingin dokumen itu sebersih dan semudah mungkin. Sudah jelas bagi pemirsa bahwa daftar akan disajikan jika indentasi yang tepat digunakan. Jadi, menambahkan UL ke tag ini tidak diperlukan dan membuat pembacaan dokumen menjadi lebih sulit.

Meskipun Anda mungkin mendapatkan beberapa fleksibilitas, saya percaya itu adalah ide yang lebih baik untuk tidak membengkak markup dengan kelas ul yang tidak semantik dan menata elemen a dalam satu gerakan. Dan Anda tidak punya alasan: gunakan pseudo-selector: before dan: after.

Sunting : Saya telah diberi tahu bahwa beberapa pembaca layar ARIA memperlakukan daftar secara berbeda dari tag jangkar sederhana. Jika situs web Anda ditujukan untuk orang-orang cacat, saya mungkin mempertimbangkan untuk menggunakan pendekatan berbasis daftar.

Tidak, mereka setara. Ingat, HTML 5 kompatibel mundur dengan daftar HTML 4, jadi Anda bebas menggunakannya dengan cara yang sama. Pengorbanannya adalah lebih sedikit kode untuk versi ke-2.

Jika Anda khawatir tentang kompatibilitas mundur sehubungan dengan browser, pastikan untuk menyertakan shim ini untuk menyediakan fungsionalitas tag seperti <nav>dan <article>.

Jika kita berbicara "menurut buku", maka tidak; Anda tidak perlu menggunakan daftar untuk menandai navigasi Anda. Satu-satunya keuntungan nyata yang mereka tawarkan adalah memberikan tingkat fleksibilitas yang lebih baik saat menata.

Aku akan menjaga <ul><li>tag, karena tag baru ( <nav>, <section>, <article>dan sebagainya) hanya versi yang lebih semantik<div> s.

Untuk alasan yang sama Anda tidak hanya memiliki pemuatan tautan di <div>, mereka juga harus terstruktur di dalam <nav>tag.

Ada posting yang sangat rinci tentang Trik CSS tentang pertanyaan yang tepat ini. Ini jelas merupakan masalah yang diperdebatkan dengan hangat; posting memiliki lebih dari 200 komentar.

Navigasi dalam Daftar: Menjadi atau Tidak (Trik CSS, Jan 2013)