早起きはいいものです。三文（90円）くらいのちょっとしたいいことがあります。
…
議論の場
Aさん、その他のメンバーが参加しています。
議論中のもの
…
破棄となったもの
…
<nav>タグは、ナビゲーションリンクのセクションを表す際に使用します。
ナビゲーションリンクとは、サイト内の主要なコンテンツへのリンクをまとめたリンクグループのことです。
「メインメニュー」などと呼ばれるような、ウェブサイト内の各ページへのリンクやページ内リンクをひとつのセクションにまとめたものです。
nav要素は、主要なナビゲーションとなるセクションに用いるべきもので、ページ上のリンクグループのすべてがnav要素である必要はありません。
例えば、ウェブページのフッター部分に利用規約ページ、著作権ページ、トップページへ戻るなどへのリンクのリストを配置することがあります。
このような場合にもnav要素を使用することはできますが、通常はnav要素である必要はなくfooter要素だけで十分です。
また、nav要素の子要素にはul要素やol要素などのリストが配置されることが多いですが、
nav要素の内容は必ずしもリストである必要はありません。
例えば、サイト案内文のような文章で各コンテンツへのリンク先を案内している場合には、
そのサイト案内文のテキスト全体をnav要素の内容とすることができます。
一般的なブラウザではnav要素の初期レンダリングに特別なスタイルが設定されていませんが、
ユーザーエージェントによっては、どんなユーザーを対象にするか次第でnav要素の初期レンダリングが変わる可能性があります。
例えば、音声などを使うスクリーンリーダーのように、
ナビゲーション情報を省略したほうがユーザーにメリットがある場合には、
初期レンダリングにおいてnav要素が省略されるかもしれません。
反対に、ナビゲーション情報をすぐに利用できるようにしたほうがユーザーにメリットがある場合には、
初期レンダリングにおいてnav要素が先頭に配置されるかもしれません。
以下のサンプルには、2つのnav要素があります。
1つはサイト内の主要なナビゲーション用で、もう1つはページ内リンクのナビゲーション用です。
フッター部分のリンクグループは、footer要素としてマークアップしただけです。
このような場合にもnav要素を使用することはできますが、通常はnav要素である必要はなくfooter要素だけで十分です。
<body>
<h1>みんなのひろば</h1>
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/events">現在のイベント</a></li>
</ul>
</nav>
<article>
<header>
<h2>議論の場</h2>
<p>Aさん、その他のメンバーが参加しています。</p>
</header>
<nav>
<ul>
<li><a href="#public">議論中のもの</a></li>
<li><a href="#destroy">破棄となったもの</a></li>
</ul>
</nav>
<div>
<section id="public">
<h2>議論中のもの</h2>
<p>...</p>
</section>
<section id="destroy">
<h2>破棄となったもの</h2>
<p>...</p>
</section>
</div>
<footer>
<p><a href="?edit">編集</a> | <a href="?delete">削除</a> | <a href="?Rename">名前変更</a></p>
</footer>
</article>
<footer>
<p><small>© copyright 1998 みんなのひろば</small></p>
</footer>
</body>Aさん、その他のメンバーが参加しています。
…
…
以下のサンプルでは、リンクグループが複数ありますが、それらの1つだけがnav要素として指定されています。
<body itemscope itemtype="https://schema.org/Blog">
<header>
<h1>目を覚まそう！</h1>
<p><a href="news ">ニュース</a> -
<a href="blog ">ブログ</a> -
<a href="forums ">フォーラム</a></p>
<p>最終更新日: <span itemprop="dateModified">2009-04-01</span></p>
<nav>
<h1>Navigation</h1>
<ul>
<li><a href="articles ">記事一覧</a></li>
<li><a href="today ">今日の目覚め</a></li>
<li><a href="successes ">目覚めた人たち</a></li>
</ul>
</nav>
</header>
<main>
<article itemprop="blogPosts" itemscope itemtype="https://schema.org/BlogPosting">
<header>
<h2 itemprop="headline">早起きは三文の徳</h2>
</header>
<div itemprop="articleBody">
<p>早起きはいいものです。三文（90円）くらいのちょっとしたいいことがあります。</p>
...
</div>
<footer>
<p>投稿日 <time itemprop="dateModified" datetime="2009-10-10">木曜日</time>.</p>
</footer>
</article>
</main>
<footer>
<p>Copyright ©
<span itemprop="copyrightYear">2010</span>
<span itemprop="copyrightHolder">作者</span>
</p>
<p><a href="about ">このサービスについて</a> -
<a href="policy ">個人情報y</a> -
<a href="contact ">お問い合わせ</a></p>
</footer>
</body>
以下のサンプルでは、サイト案内文のテキスト全体がnav要素の内容となっています。
nav要素の子要素にはul要素やol要素などのリストが配置されることが多いですが、
nav要素の内容は必ずしもリストである必要はありません。
この使用例では、段落テキストを使用してサイト案内しています。
<nav>
<h1>サイト案内文</h1>
<p>
あなたは私のホームページにいます。
北には<a href="/blog">私のブログ</a>があり、そこから戦いの音が聞こえます。
東には大きな山が見え、その上にはたくさんの<a href="/school">学校の書類</a>が散らばっています。
この山のはるか上に、必死に <a href="/school/thesis">論文</a>を走り書きしている私をのぞき見ことができます。
</p>
<p>
西側にはいくつかの出口があります。
面白そうな出口の 1 つに<a href="https://games.example.com/">「ゲーム」</a>というラベルが付いています。
もう 1 つの退屈な出口には、<a href="https://isp.example.net/">ISP™</a> というラベルが付いています。
</p>
<p>
南には暗くて湿った<a href="/about">連絡先ページ</a>があります。
使用されていない入り口はクモの巣で覆われており、たまにネズミがページからすばやく走り出すのが見えます。
</p>
</nav>
以下のサンプルは、電子メールアプリケーションを想定しています。
ユーザーがフォルダを切り替える操作メニューを、nav要素でマークアップしています。
<p><input type=button value="メールを作成" onclick="compose()"></p>
<nav>
<h1>電子メールアプリ 操作メニュー</h1>
<ul>
<li> <a href="/inbox" onclick="return openFolder(this.href)">受信トレイ</a>
<span class=count></span>
<li> <a href="/sent" onclick="return openFolder(this.href)">送信済み</a>
<li> <a href="/drafts" onclick="return openFolder(this.href)">下書き</a>
<li> <a href="/trash" onclick="return openFolder(this.href)">ゴミ箱</a>
<li> <a href="/customers" onclick="return openFolder(this.href)">連絡先</a>
</ul>
</nav>