広告
<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属性は、
ユーザーがハイパーリンクをたどる前に、リンク先リソースの性質をユーザーに示すものです。
- href属性
- ハイパーリンクのアドレスを指定します。
- target属性
- ハイパーリンクのターゲット(移動先)を指定します。
target属性に指定できる値は、以下の通りです。
- _blank …… 新規ウィンドウ(タブ)をターゲットにします。
- _self …… 現在ウィンドウ(タブ)をターゲットにします。
- _parent …… 親ウィンドウ(タブ)をターゲットにします。
- _top …… 最上位ウィンドウ(タブ)をターゲットにします。
- 任意の名前 …… その名前のウィンドウ(タブ)をターゲットにします。
- download属性
- リソースに移動する代わりにリソースをダウンロードするかどうか。
ダウンロードする場合はそのファイル名を指定します。
- ping属性
- ping送信するURLを指定します。
- rel属性
- ハイパーリンクを含む文書内の場所とリンク先リソースとの関係をキーワードで指定します。
a要素やarea要素のrel属性に指定できる値は、以下の通りです。(初期値なし)
- alternate …… 現在のドキュメントの代替表現であることを示します。
- author …… 現在のドキュメントまたは記事の作成者へのリンクであることを示します。
- bookmark …… 最も近い祖先セクションへのパーマリンクであることを示します。
- external …… 参照ドキュメントが現在のドキュメントと同じサイトの一部ではないことを示します。
- help …… そのコンテキストに応じたヘルプへのリンクであることを示します。
- license …… 現在のドキュメントの主な内容が、参照ドキュメントに記載されている著作権ライセンスの対象であることを示します。
- next …… 現在のドキュメントがシリーズの一部であり、シリーズの次のドキュメントが参照ドキュメントであることを示します。
- nofollow …… 現在のドキュメントの元の作成者または発行者が参照ドキュメントを承認していないことを示します。
- noopener …… (target属性に適切な値を持つ場合など)ハイパーリンクが補助的な閲覧コンテキストを作成する場合、非補助的な閲覧コンテキストを持つトップレベルの横断可能なオブジェクトを作成します。
- noreferrer …… リンクをたどるときにリファラー情報が漏洩しないことを示します。さらに、noopenerと同じ動作となります。
- opener …… (target属性の値が"_blank"の場合など)ハイパーリンクが非補助的な閲覧コンテキストを使用してトップレベルの横断可能なオブジェクトを作成する場合、補助的な閲覧コンテキストを生成します。
- prev …… 現在のドキュメントがシリーズの一部であり、シリーズの前のドキュメントが参照ドキュメントであることを示します。
- search …… 現在のドキュメントとその関連ページを検索するために使用できるリソースであることを示します。
- tag …… 現在のドキュメントに適用されるタグ(指定アドレスによって識別される)を示します。
- hreflang属性
- リンク先リソースの言語を指定します。
- type属性
- 参照されたリソースのタイプのヒントを指定します。
- referrerpolicy属性
- リンク先リソースをリクエストする際のリファラーポリシーを指定します。
referrerpolicy属性に指定できる値は、以下の通りです。
- no-referrer …… リファラー情報を送信しません。
- no-referrer-when-downgrade …… httpsからhttpへはリファラー情報を送信しません。
- same-origin …… 同一オリジンの場合のみリファラー情報を送信します。
- origin …… オリジン情報のみを送信します。例えば「https://example.com/page.html」の文書からは、「https://example.com/」というリファラー情報が送信されます。
- strict-origin …… オリジン情報のみを送信します。ただし、httpsからhttpへはリファラー情報を送信しません。
- origin-when-cross-origin …… 同一オリジンの場合のみリファラー情報を送信します。異なるオリジン間ではオリジン情報のみを送信します。
- strict-origin-when-cross-origin …… 同一オリジンの場合のみリファラー情報を送信します。異なるオリジン間ではオリジン情報のみを送信します。ただし、httpsからhttpへはリファラー情報を送信しません。これが初期値です。
- unsafe-url …… リファラー情報を送信します。機密性の高い文書にこのリファラーポリシーを設定する際には、慎重に検討してください。
- "" …… 空の文字列を指定すると、リファラーポリシーが指定されていないことを示します。別の場所で指定したリファラーポリシーがあれば、それが適用されるかもしれません。
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>
↓↓↓
広告