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

114

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?

html html-lists nav kikito
sumber
Itu pertanyaan yang bagus ... Dengan tag yang tidak masuk akal untuk HTML 4, apakah praktik terbaik sebelumnya berlaku?
Guffa

Jawaban:

63

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.

Thomas Maas
sumber
Terima kasih banyak, inilah yang saya butuhkan! Selain itu, komentar robertc tentang pembaca layar yang mengumumkan "daftar 3 item" di bawah ini sangat berguna.
kikito
7
Sepertinya tag UL tidak membantu apa pun: css-tricks.com/navigation-in-lists-to-be-or-not-to-be
psiko brm
2
Tautan tampaknya berfungsi untuk saya. Pastikan untuk membaca tindak lanjut, yang menyatakan daftar dan tidak ada daftar seri. css-tricks.com/wrapup-of-navigation-in-lists
RobW
Menurut saya, <nav>tanpa <ul><li>tampaknya menu anak akan lebih dinamis. Bagaimana jika Anda memiliki beberapa daftar menu yang jenis dan pemosisiannya berbeda <nav>? Saya akan mengelompokkan daftar menu tersebut seperti <ul><li>pada <nav>. Jadi jika menu Anda biasa, saya akan pergi dengan <ul><li>.
wonsuc
3

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.

Demian Brecht
sumber
3
Gunakan file javascript HTML 5 Shim ( remysharp.com/2009/01/07/html5-enabling-script ) untuk mengurangi kemungkinan kesalahan kompatibilitas mundur dengan browser seperti Opera dan IE.
acconrad
Tapi kemudian situs Anda tidak ramah terhadap skrip yang tidak mengganggu :)
Demian Brecht
1
Maksud Anda seperti sampai IE8 keluar dari pasar ... begitu juga sampai 2016 ...:)
Šime Vidas
@ Šime - tepatnya :) Dan mematikan Javascript tidak lagi menjadi pilihan di browser;)
Demian Brecht
@ Agent_9191 akan - Saya benar-benar terkejut hari ini ketika saya hanya ingin memeriksa berapa banyak orang yang masih menggunakan IE7 dan coba tebak - di kebanyakan negara ada lebih banyak orang yang menggunakan browser seperti Safari atau iPad safari daripada di IE7. Saya sangat senang saya dapat menghentikan dukungan untuk IE7 sekarang! Dan IE8 akan menghilang cepat atau lambat. Ini adalah browser keras kepala terakhir yang harus kita hadapi (IE9 tidak terlalu buruk untuk dikodekan).
Camilo Martin
2

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.

Ian Devlin
sumber
+1 karena menyebutkan bahwa untuk pembaca layar, navs dan as sama baiknya dengan daftar sekarang.
Camilo Martin
2

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.

pengguna1429980
sumber
1

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>.

acconrad
sumber
8
Daftar tautan memberikan semantik dan aksesibilitas tambahan (misalnya, pembaca layar akan mengumumkan 'Daftar tiga item' saat Anda memasuki navigasi).
robertc
@robertc Poin pembaca layar sangat bagus. Anda seharusnya memberikan jawaban! Saya akan menandainya sebagai benar. +1 dalam hal apapun.
kikito
1

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.

Phil.Wheeler
sumber
1

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.

whostolemyhat
sumber
Alasan saya menggunakan <ul> daripada banyak tautan di <div> di masa lalu justru karena <ul> lebih semantik. Tapi sekarang <nav> lebih semantik. Saya bingung.
kikito
2
<ul> masih lebih semantik daripada tautan <a> biasa, tetapi <nav> lebih semantik daripada <div>. <ul> vs <a> terpisah dari <nav> vs <div>
whostolemyhat
Tidak peduli tentang semantik bukanlah cara yang tepat saat menulis HTML.
Andrew Marshall