130

専用の<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レベルが必要ないと仮定すると、どのような方法が推奨されますか。また、その理由は何ですか。

4

9 に答える 9

72

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

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

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

http://w3c.github.io/html/sections.html#the-nav-elementで、nav要素にも散文が含まれている可能性があることがわかります。

そうです、nav要素内にリストがあると意味が追加されます。

于 2011-04-05T09:38:38.083 に答える
3

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

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

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

于 2012-06-21T17:56:13.523 に答える
3

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

たとえば、<header>タグを使用して問題が発生しました。ChromeとFFは魅力のように機能しましたが、Operaは失敗しました。

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

于 2011-04-04T22:09:07.037 に答える
2

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

于 2011-04-05T08:22:10.500 に答える
2

のよりクリーンなマークアップnav > aは確かに魅力的ですが、サブメニューとドロップダウンメニュー（他の回答では言及されていないもの）の質問を検討してください。HTMLを使用すると、あるリストを別のリスト内にネストできます。これは、このようなメニューを構成するためのエレガントな（そして、あえてセマンティックな）方法です。

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

a要素をネストすることはできないため、次のようnav > aにラッピングを開始しない限り、除外されますdiv。

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

いくつかの人気のあるCSSフレームワーク（BulmaやSemantic / Fomantic UIなど）は、ドロップダウンのあるナビゲーションバーに対してこのようなことを行います。ですから、それは可能ですが、私にはちょっと不格好な感じがします。最初の例のように、実際には内部にネストされquxてquuxいません。bar

于 2021-04-01T05:53:02.587 に答える
1

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

ブラウザに関する下位互換性が心配な場合は、やなどのタグの機能を提供するために、このシムを必ず含めてください。<nav><article>

于 2011-04-04T22:08:34.007 に答える
1

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

于 2011-04-04T22:08:45.183 に答える
1

<ul><li>新しいタグ（、、など）はsのよりセマンティックなバージョンであるため、タグ<nav>は<section>保持<article>します<div>。

同じ理由で、リンクがたくさんあるだけでなく、タグ<div>内で構造化する必要があります。<nav>

于 2011-04-05T10:46:46.430 に答える
1

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

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

于 2013-11-30T23:59:00.507 に答える