<a> …… ハイパーリンクを作成する

<a>タグは、ハイパーリンクを作成する際などに使用します。

a要素のhref属性の値にリンク先URLを指定すると、ハイパーリンクを作成できます。 a要素の最も多い使い方と言えるでしょう。

a要素にhref属性がある場合、a要素はハイパーリンクを表します。 この場合の要素内容は、ハイパーリンク先を表すラベルとなります。

■使用例

以下のサンプルは、a要素の典型的な使用例です。 href属性の値にリンク先URLを指定して、他のページへのハイパーリンクを作成しています。

<nav>
 <ul>
  <li><a href="/">ホーム</a></li>
  <li><a href="/news">ニュース</a></li>
  <li><a>サービス</a></li>
  <li><a href="/legal">ガイド</a></li>
 </ul>
</nav>

a要素には多くの属性がある

a要素にはhref属性以外にも多くの属性が用意されており、 必要に応じて各属性を指定することで様々な機能を実現できます。

href属性、target属性、download属性、ping属性、referrerpolicy属性は、 ユーザーがハイパーリンク先へ移動したり、ハイパーリンク先をダウンロードする際の挙動に関連するものです。

rel属性、hreflang属性、type属性は、 ユーザーがハイパーリンクをたどる前に、リンク先リソースの性質をユーザーに示すものです。

■属性

a要素の属性の使用ルール

a要素にhref属性がない場合、 target属性、download属性、ping属性、rel属性、hreflang属性、type属性、referrerpolicy属性は指定できません。

a要素にitemprop属性がある場合、href属性も同時に指定しなくてはなりません。

a要素でブロック全体を囲む

a要素は、(ボタンやその他のリンクなどの) インタラクティブなコンテンツがない限り、 段落、リスト、表などの全体、さらに、セクションの全体を囲むことができます。

■使用例

以下のサンプルは、広告ブロック全体をa要素で囲んでリンクにしています。

<aside class="advertising">
 <h1>広告</h1>
 <a href="https://ad.example.com/?adid=1929&pubid=1422">
  <section>
   <h1>Mellblom にしよう</h1>
   <p>すべてを Mellblom に変えよう！</p>
   <p>たった $9.99 ＋ 送料と手数料！</p>
  </section>
 </a>
 <a href="https://ad.example.com/?adid=375&pubid=1422">
  <section>
   <h1>Mellblom ブラウザ</h1>
   <p>光の速さのウェブブラウジング！</p>
   <p>他のは遅い、Mellblomは速い！</p>
  </section>
 </a>
</aside>

■使用例

以下のサンプルは、スクリプトを併用することで表の行全体をハイパーリンクにしています。

<table>
 <tr>
  <th>役職
  <th>所属
  <th>勤務
 <tr>
  <td><a href="/jobs/manager">マネージャー</a>
  <td>リモートチーム
  <td>リモート
 <tr>
  <td><a href="/jobs/director">ディレクター</a>
  <td>リモートチーム
  <td>リモート
 <tr>
  <td><a href="/jobs/astronaut">宇宙飛行士</a>
  <td>建築チーム
  <td>リモート
</table>

<script>
document.querySelector("table").onclick = ({ target }) => {
  if (target.parentElement.localName === "tr") {
    const link = target.parentElement.querySelector("a");
    if (link) {
      link.click();
    }
  }
}
</script>

■関連項目

Sponsors