ウェブエンジニア問題集
第4章

HTMLのリンクとナビゲーション — a・nav・相対パス

約3分
この章の目次開く

リンクはWebの中心です。HTMLでは a 要素で別ページ、外部サイト、ページ内の位置、メールアドレスなどへ移動できます。

<a href="/books/html-basics">HTML入門を読む</a>
html

リンク要素のチートシート

書き方用途注意点
<a href="/about">サイト内リンクURL構造に合わせる
<a href="https://example.com">外部リンク新しいタブなら rel も考える
<a href="#contact">ページ内リンク移動先に id が必要
<a href="mailto:info@example.com">メール起動迷惑メール対策も考える
<nav>主要ナビゲーションリンクのまとまりに使う

a 要素の構文

構文： <a href="URL">リンクテキスト</a>

属性説明
href移動先URL。もっとも重要
target開き方。新しいタブなら _blank
relリンク先との関係。noopener noreferrer など
downloadファイルとしてダウンロードさせる

戻り値： HTML要素なので戻り値はありません。ブラウザがクリック可能なリンクとして扱います。

<a href="https://developer.mozilla.org/" target="_blank" rel="noopener noreferrer">
  MDNを見る
</a>
html
target="_blank" を使う外部リンクでは、基本的に rel="noopener noreferrer" も付けます。

相対パスと絶対URL

種類例用途
ルート相対パス/about同じサイト内のページ
相対パス../images/logo.png現在のファイル位置から指定
絶対URLhttps://example.com/about外部サイト
ページ内リンク#profile同じページの特定位置

学習中は、サイト内リンクには /about のようなルート相対パスを使うと理解しやすいです。

主要なナビゲーションには nav を使います。

<nav aria-label="メインナビゲーション">
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/books">教科書</a></li>
    <li><a href="/quiz/html-basic">HTMLクイズ</a></li>
  </ul>
</nav>
html

すべてのリンク集を nav にする必要はありません。サイト内の主要な移動手段に使います。

参考リンク

次章では、画像、代替テキスト、動画・音声などのメディア要素を学びます。

HTMLクイズに挑戦するリンク、href、target、navの使い分けをクイズで確認しよう