HTML navタグでナビゲーションを作る方法

📌

結論

<nav> タグでナビゲーションリンクをまとめよう

ページ内のメニューやリンク群をマークアップするのが <nav> タグです。

📝 実際のコードはこちら

<nav>
  <a href="/">ホーム</a>
  <a href="/about">about</a>
  <a href="/contact">contact</a>
</nav>

navの使いどころ

<nav> はこのリンク群はナビゲーション用ですとブラウザに伝えるタグです。

1ページに複数の <nav> があっても問題ありません。

全てのリンクを <nav> で囲む必要はありません。本文中のリンクで <a> だけでOKです。サイト全体のナビゲーションとして機能するリンク群に <nav> を使いましょう。

・ナビゲーション用のリンク群は <nav> で囲む・1ページに複数の <nav> があってもOK ・本文中のリンクには不要

navタグ内に3つのリンクを作ってみましょう。

🧪 ここで試せます ─ 壊しても大丈夫！

下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。

■ 演習

navタグ内に3つのリンク（ホーム、about、contact）を作ってください。

詰まったらヒント

navはナビゲーション用のセマンティックタグです。