<nav> ’larımın içinde <ul>’ leri ve <li> ’leri kullanmalı mıyım?

Başlık bunu hemen hemen açıklıyor.

Artık özel bir etiketimiz olduğuna göre <nav>,

Bu:

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

aşağıdakilerden daha iyisi var mı?

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

Demek istediğim, bazı CSS konumlandırma / dolgusu için fazladan bir DOM seviyesine ihtiyacım olmadığını varsayarsak, tercih edilen yol nedir ve neden?

nav öğesi ve liste farklı anlamsal bilgiler sağlar:

• Gezinme öğesi, büyük bir gezinme bloğuyla uğraştığımızı bildiriyor

• Liste, bu gezinme bloğunun içindeki bağlantıların bir öğe listesi oluşturduğunu bildirir

At http://w3c.github.io/html/sections.html#the-nav-element Bir nav elemanı da düzyazı içerebilir görebilirsiniz.

Yani evet, bir nav öğesinin içinde bir listeye sahip olmak anlam katıyor.

Bu noktada, <ul><li>tüm tarayıcıların henüz HTML5 etiketlerini desteklememesinin nedeni , öğeleri saklayacağım .

Örneğin, <header>etiketini kullanarak bir sorunla karşılaştım - Chrome ve FF bir cazibe gibi çalıştı, ancak Opera boğuldu.

Tüm tarayıcılar HTML'yi tamamen destekleyene kadar, onları yapıştırırdım, ancak geriye dönük uyumluluk için eskilere güvenirim.

Gerçekten size kalmış. Gezinme menünüzü işaretlemek için genellikle sırasız bir liste kullandıysanız, <nav> öğesi içinde bunu yapmaya devam edin derim. <nav> öğesinin amacı, sitenin gezinmesini örneğin bir bilgisayar okuyucusuna tanımlamaktır, bu nedenle bir liste veya basitçe bağlantılar kullanmanız önemsizdir.

Benim için sırasız listeler, gerçekten gerekli olmayan fazladan işaretlemedir. Bir HTML belgesine baktığımda, olabildiğince temiz ve okunması kolay olmasını istiyorum. İzleyici, uygun girinti kullanılırsa bir listenin sunulduğu zaten açıktır. Bu nedenle, bu etiketlere UL eklemek gereksizdir ve belgenin okunmasını daha zor hale getirir.

Biraz esneklik kazanmış olsanız da, anlamsız ul sınıflarıyla işaretlemeyi şişirmemenin ve a öğelerini tek bir hamlede biçimlendirmenin daha iyi bir fikir olduğuna inanıyorum. Ve hiçbir mazeretiniz yok: sözde seçicilerden önce ve: sonra kullanın.

Düzenleme : Bazı ARIA ekran okuyucularının listeleri basit bağlantı etiketlerinden farklı şekilde ele aldığı konusunda bilgilendirildim. Web siteniz engelli kişilere yönelikse, listeye dayalı yaklaşımı kullanmayı düşünebilirim.

Hayır, eşdeğerler. Unutmayın, HTML 5, HTML 4 listeleriyle geriye doğru uyumludur, bu nedenle bunları aynı şekilde kullanmakta özgürsünüz. Takas, 2. sürüm için daha az koddur.

Tarayıcılarla ilgili geriye dönük uyumluluk konusunda endişeleriniz varsa , ve gibi etiketlerin işlevselliğini sağlamak için bu şimi eklediğinizden emin olun .<nav><article>

"Kitaba göre" konuşuyorsak, hayır; navigasyonunuzu işaretlemek için listeleri kullanmanız gerekmez. Sundukları tek gerçek avantaj, şekillendirme sırasında daha iyi bir esneklik derecesi sağlamaktır.

Ben devam ederdim <ul><li>yeni etiketler (çünkü etiketleri <nav>, <section>, <article>vb) sadece daha fazla anlamsal sürümleridir <div>s.

Aynı nedenden ötürü, a'da bir sürü bağlantıya sahip olmayacağınız gibi <div>, bunlar da bir <nav>etiket içinde yapılandırılmalıdır .

Bu tam soru hakkında CSS Püf Noktaları hakkında gerçekten ayrıntılı bir yazı var. Açıkçası hararetle tartışılan bir konu; yayında 200'den fazla yorum var.

Listelerde Gezinme: Olmak ya da Olmamak (CSS Tricks, Ocak 2013)