<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レベルが必要ない場合、どのような方法が推奨されますか？

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

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

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

でhttp://w3c.github.io/html/sections.html#the-nav-elementあなたはNAV要素も散文を含む可能性のあることがわかります。

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

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

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

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

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

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

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

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

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

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

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

私は維持したい<ul><li>新しいタグは（ので、タグ<nav>、<section>、<article>などが）のちょうどより多くの意味的なバージョンがあります<div> sの。

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

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

リスト内のナビゲーション：するべきかしないべきか（CSS Tricks、2013年1月）