web-dev-qa-db-ja.com

HTML5ナビゲーションタグの正しい使用法

<ul class="mainMenu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Forum</a></li>
    <li><a href="#" class="mainSelected">Construct</a></li>
    <li><a href="#">Arcade</a></li>
    <li><a href="#">Manual</a></li>
</ul>
<ul class="subMenu">
    <li><a href="#">Homepage</a></li>   
    <li><a href="#">Construct</a></li>
    <li><a href="#" class="underSelected">Products</a></li>
    <li><a href="#">Community Forum</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

これらの<nav>を個別に<ul>で個別に囲んだり、1つのナビゲーションで両方をラップしたりすることは、意味的に正しいですか？

また、navタグを使用してフッターメニュー項目をラップするのが適切でしょうか？

htmlsemantic-markupnav
31
Tom Gullen

仕様を引用するには：

Nav要素は、他のページまたはページ内のパーツにリンクするページのセクション、つまりナビゲーションリンクのあるセクションを表します。

ページ上のすべてのリンクグループがnav要素にある必要はありません。nav要素には、主要なナビゲーションブロックで構成されるセクションのみが適切です。特に、フッターには、利用規約、ホームページ、著作権ページなど、サイトのさまざまなページへのリンクの短いリストがあることが一般的です。 nav要素がなくても、そのような場合にはフッター要素だけで十分です。

したがって、両方を1つのnavタグで囲んでもかまいません。フッターをラップせずに、ここでフッタータグを使用します:)

ここで仕様を読みます： http://dev.w3.org/html5/spec/Overview.html#the-nav-element

43
Martin Jespersen

ナビゲーションの理由の調査は、ここ何年も続いています。さっそくググってみれば、その導入部に戻る質問の日付が見つかります。これまでに見つけたナビゲーションの実際の用途の1つは、CSSのスタイルと関連付けることです。あなたが言う前に、それを行うにはより良い方法があります。ページマークアップを行うのはプログラマーだけではないことを考慮してください。生活のためにウェブページをデザインするコマーシャルアーティストにとっては、クラスとサブクラスについて考えるよりも、1つの単純なタグを持つ方が良いです。さまざまなグループ間の議論をしばらく続けていれば、私はこれについて非常に正しかったと感じるでしょう。多くのページ開発者はすべてスタイルに関するものです-彼らはプログラマーではなくアーティストです。

もう少し確認：HTML5の新しい構造タグを見ると、委員会がページの明確に定義された主要な要素を望んでいるという考えを簡単に得ることができます。主要な要素ごとに外観や動作が異なる場合があります。典型的なWebページをデザインする場合、誰かがページセクションタグに既に名前を付けていると非常に便利なので、スタイルを設定するビジネスにすぐに取り掛かることができます。ナビゲーションセクションを提供するページの部分にnavタグをスローします。それは何ですか、あなたは尋ねますか？これは、フッターやサイドバーなど、すでに定義済みの他のセクションではありません。 これは、ナビゲーションセクションがどこにあると著者が信じているかを示すチュートリアルです -あなたがそれを期待するであろう場所。

それはいいです。他の100万ページのようなページを作成したい場合、私の唯一の関心は、自分の色の選択や芸術的な要素を他のページとは異なるものにすることです。プログラマーとして、私はいつもそれを望んでいるわけではありません。私は、想定される機能が論理的で使いやすい方法で必要なものをすべて実現できる柔軟性を求めています。それが難しいというよりも簡単な場合は、いいでしょう。したがって、この話には2つの側面があることを示すために少し対比するために、HTML5でのフレームセットとフレームの損失を嘆きます。 iFrameは代用としては不十分です。

デザイン可能な構造と機能性をあまり気にせずにスタイルに興味を持っている受賞者は、プログラミング言語ではないcssに開発をプッシュしたいと常に思っていました。 RE：フレームの損失、ほとんどのWebページがテーブルで構成されていた時代にずっと押し戻されるように見えます。ただし、ページでタグを使用するのではなく、CSSでテーブルを定義する必要があります。彼らは動的なページのあらゆる前進をブロックするために可能なすべてをしているようです。完全なページの再読み込みのみを許可して、物事を再構築します。 （同じページ構造で、ある画像から別の画像にフェードインする場合は当てはまりません。）

おそらく、質問に答えるのに必要以上に少し言ったかもしれませんが、全体的なコンテキストに少し広げることが役立つと思いました。

10
Roger F. Gay

マーティンに同意します。それらを1つのnav要素で囲みます。

フッターに関しては、要素がサイト内を移動している限り、別のnav要素を使用します。

6
Ian Devlin