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>© 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 を使用するのはなぜですか?
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
