ナビゲーション tag_html/css_WEB-ITnose-htmlチュートリアル-php.cn

nav

ホームページ

ウェブフロントエンド

htmlチュートリアル

ナビゲーション tag_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:47 AM

ナビタグ

nav

nav 要素は、ページナビゲーションとして使用できるリンクグループです。ナビゲーション要素は、他のページまたは現在のページの他の部分にリンクします。すべてのリンクグループを

要素に含める必要はありません。たとえば、通常は、サービス利用規約、ホームページ、著作権声明などを含むリンクのグループが含まれます。要素の代わりに要素を使用します。

私たちは常に次の方法でナビゲーションバーを定義することに慣れてきました:

<nav><ul><li><a href="index.html">Home</a></li><li><a href="/about/">About</a></li><li><a href="/blog/">Blog</a></li></ul></nav>

ログイン後にコピー

以下は W3C によって提供されたコード例です:

<body><h1>The Wiki Center Of Exampland</h1><nav>    <ul>        <li><a href="/">Home</a></li>        <li><a href="/events">Current Events</a></li>        ...more...    </ul></nav><article>    <header>        <h1> Demos in Exampland</h1>        <p>Written by A. N. Other.</p>    </header>    <nav>        <ul>            <li><a href="#public">Public demonstrations</a></li>            <li><a href="#destroy">Demolitions</a></li>            ...more...        </ul>    </nav>    <div>        <section id="public">            <h1>Public demonstrations</h1>            <p> ...more...</p>        </section>        <section id="destroy">            <h1>Demolitions</h1>            <p>...more...</p>        </section>        ...more...    </div>    <footer>        <p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>    </footer>   </article>   <footer>    <p><small>&copy; copyright 1998 Exampland Emperor</small></p>   </footer>  </body>

ログイン後にコピー

HTML5 学習メモの簡潔版 (3): 新しい要素 hgroup、header、footer ,address,nav

nav は、いわゆるナビゲーションバーを表すものではなく、「ナビゲーションコンテンツ」を表すものです。意味的には、ナビゲーションは、ホームページへのリンク、次の記事へのリンク、他のコラムへのリンクなど、コンテンツとは何の関係もありません。ただし、コンテンツ自体によって引用されている他の記事へのリンクである場合は、ナビゲーションを行うべきではありません。ナビゲーションに配置されます。

HTML5のセクション記事の違いは何ですか?ヘッダーフッターナビゲーションを理解するにはどうすればよいですか?

HTML5 の多くの新しい要素は誤解を引き起こしやすく、その理由の 1 つは、一部の要素自体が曖昧であり、表現されるセマンティクスが仕様で常に改訂されることです。

は、ビジュアルナビゲーションバーを参照するのではなく、ナビゲーションプロパティを持つコンテンツを参照します。

要素は、他のページまたはこのページの他の部分を指す複数のリンクを含む領域を表します。

次の点に注意する必要があります:

すべてのリンクを nav 要素に配置する必要はありません。この要素には、メインのナビゲーションブロックを構成する部分が含まれている必要があります。反例として、通常、サービス、ホームページ、著作権ページなど、Web サイトの他のページへのリンクのリストがフッターにあります。この場合、footer要素だけで十分であり、nav要素を使用する必要はありません。

nav 要素内のコンテンツが項目のリストを説明している場合、理解 (セマンティクスの強化) とナビゲーションを助けるためにリストタグ (ol、ul など) を使用する必要があります。

ユーザーエージェント (スクリーンリーダーなど) は、この要素を使用して、ページ上のどのコンテンツを直接スキップできるかを決定したり、リクエストに応じて選択肢を提供したりできます。

通常、ページナビゲーションは次のように記述できます:

<nav><ul><li><a href="index.html">Home</a></li><li><a href="#about">About</a></li><li><a href="#">Contact</a></li></ul></nav>

ログイン後にコピー

または:

<div id="nav"><ul><li><a href="index.html">Home</a></li><li><a href="#about">About</a></li><li><a href="#">Contact</a></li></ul></div>

ログイン後にコピー

nav 要素は次のシナリオでも使用できます:

前ページ、次ページボタン、またはページング

ブレッドクラムナビゲーション

HTML ナビゲーションメニューで、a タグまたは nav+a タグを直接使用するのではなく、li+a タグを使用するのはなぜですか? HTML5 でナビゲーションメニューを記述するにはどうすればよいですか?

@丁小倪さんの発言は少し極端です。 nav 要素はコンテンツをセクション化するもので、最終的にドキュメントのアウトラインの生成に影響を与える要素です。ナビゲーションを含むコンテンツを反映するだけであり、コンテンツの形式を表現するものではありません。ナビゲーションコンテンツは、リンクのリスト、またはナビゲーションリンクが埋め込まれた自然なテキストの一部にすることができます。

nav 要素 (

nav 要素

) の W3C 説明に示されている該当するシナリオの例に従って、使用法は次のようになります:

<nav><ul><li><a href="/home">Home</li><li><a href="/about">About</a></li><li><a href="/links">Links</a></li></ul></nav>

ログイン後にコピー

また、次のようにすることもできます:

<nav><h1>Navigation</h1><p>Welcome to my website. To see latest blog posts, please go to <a href="/blog">my blog</a>. You can find my books and papers in the <a href="/publications">publication</a> section. If you are interested in my work, please contact    me by fill in the contact form <a href="/contact">here</a>.</p></nav>

ログイン後にコピー

If the content がリストである場合、ul>li を使用する方法も非常に適切であり、悪用とは言えません。リストは、ナビゲーションに配置されたからといってリストで終わるわけではなく、コンテンツの性質の問題です。 ul と比較して、nav はコンテンツの構成形式からさえ切り離されているため、意味論的により高いレベルの抽象化を持っています。

dd、dl、および dt については、名前と値のペアのリストとして考えることができ、多くの場合、dfn 要素と一緒に使用されます。より適切なシナリオは、メタデータ、辞書エントリなどの表現です。 @赵王野のステートメントにも問題があります。dt と dd は、多対多のマッピングである必要はありません (

dl 要素

)。 HTML5 Doctor に関するこの記事は次のとおりです:

dl 要素

HTML 要素をより深く理解したい場合は、HTML5 Doctor および HTML5 仕様に関する記事と組み合わせて読むことを個人的にお勧めします。

ナビゲーションバーに dd dt dl の代わりに ul>li を使用するのはなぜですか?

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。