HTML5ナビタグの内容

Question

html5の<nav>タグに関連するドキュメントには、矛盾する例があるようです。私が見たほとんどの例は、これを使用しています：

<nav> 
    <ul> 
    <li><a href='#'>Link</a></li> 
    <li><a href='#'>Link</a></li> 
    <li><a href='#'>Link</a></li> 
    </ul> 
</nav> 

しかし、それは人々がdivを使用することに慣れているのだろうかと思っています。私が見たことがある例があります。

<nav> 
    <a href='#'>Link</a> 
    <a href='#'>Link</a> 
    <a href='#'>Link</a> 
</nav> 

第2の方法は、よりクリーンでより意味があるようです。 「正式な」正しいバージョンはありますか？アンカー要素を直接使用するのではなく、navタグの内部に<ul>を使用する理由はありますか？

Answer 1

どちらの例も意味論的です。

最初の例では、アンカーのリストは明示的に順序付けられていないリストです。 2番目の例では、リンクのリストは単なるアンカー要素の集合です。

あなたは、単にリンクの一次元のコレクションをしたい場合は、私は

<nav> 
    <a href='#'>Link</a> 
    <a href='#'>Link</a> 
    <a href='#'>Link</a> 
</nav> 

にこだわっお勧めしかし、ul要素を使用して（例えば、ドロップダウンまたはツリーリストなど）の明示的な階層メニューが可能になります：

<nav> 
    <ul> 
    <li> 
     <a href="#">Link</a> 
    </li> 
    <li> 
     <a href="#">Link</a> 
     <ul> 
     <li> 
      <a href="#">Sub link</a> 
     </li> 
     <li> 
      <a href="#">Sub link</a> 
     </li> 
     <li> 
      <a href="#">Sub link</a> 
     </li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Link</a> 
    </li> 
    <li> 
     <a href="#">Link</a> 
     <ul> 
     <li> 
      <a href="#">Sub link</a> 
     </li> 
     <li> 
      <a href="#">Sub link</a> 
     </li> 
     </ul> 
    </li> 
    </ul> 
</nav> 

Answer 2

唯一の実際の違いは、検索エンジンがリンクをどのように見るかという点だけです。例えば、順序付けられていないリストの場合、Googleはそのリスト内のすべての項目が関連していることを理解するかもしれません。 2番目の例では、Googleはリンクのどれも関連していないと仮定しています。 Googleは、その情報をインデックス作成に使用し、より正確に情報を表示することができます。

同じことが表示される場合がありますが、ページにスタイルが全く付いていない場合、またはボットが関連情報を探している場合は、どのように情報を提示するべきかについてのマークアップがあります。

Answer 3

いずれかを使用できます。

リストはリンクのリストとして使用される傾向がありますが、一般的にはリストだけです。しかし、それはあなた次第です。

Answer 4

実際の違いはありません。しかし、Caimen氏によると、検索エンジンはページマークアップを使ってデータをグループ化し、より良いウェブ検索結果を得る。リンクがトピック（例：ブログ）に似ている場合は最初のリンクを使用し、リンクがそれほど似ていない場合は2番目のリンクを使用することをお勧めします（ウェブサイト検索の結果をナビゲートするため）。