web-dev-qa-db-ja.com

<nav>内で<ul>と<li>を使用する必要がありますか？

タイトルはほとんどそれを説明しています。

専用の<nav>タグ、

これは：

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

以下よりも優れていますか？

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

つまり、CSSのポジショニング/パディングに余分なDOMレベルは必要ないと仮定すると、推奨される方法は何ですか？その理由は何ですか？

html5html-listsnav
107
kikito

nav要素とリストは異なる意味情報を提供します：

  • Nav要素は、主要なナビゲーションブロックを扱っていることを伝えます

  • リストは、このナビゲーションブロック内のリンクがアイテムのリストを形成することを伝えます

http://w3c.github.io/html/sections.html#the-nav-element で、nav要素にも散文を含めることができることがわかります。

そのため、nav要素内にリストを持つことは意味を追加します。

61
Thomas Maas

この時点で、<ul><li>要素を保持します。これは、すべてのブラウザーがまだHTML5タグをサポートしているわけではないためです。

たとえば、<header>タグを使用して問題に遭遇しました-ChromeとFFはチャームのように機能しましたが、Opera borked。

すべてのブラウザーがHTMLを完全にサポートするまで、私はそれらを使い続けますが、後方互換性のために古いブラウザーに依存しています。

3
Demian Brecht

本当にあなた次第です。通常、ナビゲーションメニューをマークアップするために順序付けられていないリストを使用している場合は、<nav>要素内でマークアップを続行します。 <nav>要素のポイントは、たとえばコンピューターリーダーへのサイトのナビゲーションを識別することです。そのため、リストを使用するか、単にリンクを使用するかは重要ではありません。

2
Ian Devlin

新しいタグ（<ul><li>、<nav>、<section>など）は<article>sのより意味的なバージョンであるため、<div>タグを保持します。

同じ理由で、あなたは<div>に大量のリンクがあるだけでなく、<nav>タグ内にリンクを構築する必要があります。

1
whostolemyhat

私にとって、順序付けられていないリストは、実際には必要ではない追加のマークアップです。 HTMLドキュメントを見るときは、できるだけきれいで読みやすいものにする必要があります。適切なインデントが使用されている場合、リストが表示されていることは視聴者にとってすでに明らかです。したがって、これらのタグにULを追加する必要はなく、ドキュメントの読み取りがより困難になります。

ある程度の柔軟性は得られるかもしれませんが、セマンティックなulクラスでマークアップを肥大化させず、一気にa要素をスタイルする方が良いと思います。そして言い訳はありません：疑似セレクター：beforeと：afterを使用してください。

編集：一部のARIAスクリーンリーダーは、リストを単純なアンカータグとは異なる方法で処理することを認識しています。あなたのウェブサイトが障害者向けである場合、リストベースのアプローチの使用を検討するかもしれません。

1
user1429980

この正確な質問については、CSSトリックに関する非常に詳細な投稿があります。これは明らかに熱く議論されている問題です。投稿には200以上のコメントがあります。

リスト内のナビゲーション：あるべきかどうか（CSSトリック、2013年1月）

1
Astrotim

いいえ、それらは同等です。 HTML 5はHTML 4リストと下位互換性があるため、同じ点で自由に使用できます。トレードオフは、2番目のバージョンのコードが少なくなることです。

ブラウザーに関する後方互換性が心配な場合は、 this shim を含めて、<nav>や<article>などのタグの機能を提供してください。

1
acconrad

「本で」と話しているなら、いいえ。リストを使用してナビゲーションをマークアップする必要はありません。彼らが提供する唯一の本当の利点は、スタイリングの際により良い柔軟性を提供することです。

1
Phil.Wheeler