aタグ -ハイパーリンクを作成する｜HTML辞典
<a>タグとは？
<a> タグは、HTML文書内でハイパーリンク（リンク）を作成するためのタグ です。
他のページやサイトへの移動、同じページ内の特定の位置への移動、メール送信などに使用されます。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、インタラクティブコンテンツ（Interactive Content）、パルパブルコンテンツ（Palpable Content）。
閉じタグの有無
<a> は開始タグ（<a>）と閉じタグ（</a>）の両方が必要です。
基本的な記述方法
<a href="https://example.com">リンクテキスト</a>使用できる主な属性
<a> タグには多くの属性がありますが、以下は代表的なものです。
| 属性名 | 説明 | 例 |
|---|---|---|
href | リンク先のURLを指定 | <a href="https://example.com">リンク</a> |
target | リンクの開き方を指定 | <a href="https://example.com" target="_blank">新しいタブで開く</a> |
rel | リンクの関係を定義 | <a href="https://example.com" rel="nofollow">nofollowリンク</a> |
title | マウスホバー時に表示される説明 | <a href="https://example.com" title="サイトの説明">リンク</a> |
download | ファイルをダウンロードするリンクに変更 | <a href="file.pdf" download>PDFをダウンロード</a> |
CSSを使ったデザイン変更
リンクのデザインをカスタマイズしたい場合は、CSSを活用できます。
a {
color: blue;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}適切な使用例
✅ 外部サイトへのリンクを作成する
<a href="https://example.com">Exampleサイトへ移動</a>✅ target="_blank" で新しいタブで開く
<a href="https://example.com" target="_blank">新しいタブで開く</a>✅ mailto: を使ってメールアドレスにリンクする
<a href="mailto:info@example.com">メールを送る</a>✅ tel: を使って電話番号をリンクする（スマホ向け）
<a href="tel:+810123456789">電話をかける</a>適切でない使用例（誤った使い方）
❌ href 属性なしでリンクを作成するのはNG
<!-- NG: href属性なし -->
<a>リンク</a>✅ 正しい書き方（href 属性を指定）
<a href="https://example.com">リンク</a>❌ target="_blank" を使用する際に rel="noopener" を指定しないのはNG
<!-- NG: target="_blank" を使っているが rel="noopener" がない -->
<a href="https://example.com" target="_blank">リンク</a>✅ 正しい書き方（rel="noopener" を追加）
<a href="https://example.com" target="_blank" rel="noopener">リンク</a><a>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<a> | ハイパーリンクを作成 | href 属性を指定 | 他のページ、ファイル、メールへのリンク |
<button> | ボタンを作成 | onclick で動作指定可能 | フォーム送信、スクリプトの実行 |
<nav> | ナビゲーションを定義 | a を内包可能 | メニューやパンくずリスト |
<span> | インライン要素のグループ化 | 意味を持たない | CSSやJavaScriptの適用 |
使用上の注意点
✅ href 属性を必ず指定する
hrefなしの<a>はリンクとして機能しない。
✅ target="_blank" を使用する際は rel="noopener" を追加する
- セキュリティ上のリスクを回避するために
noopenerを指定する。
関連タグ
まとめ
<a>タグは、HTML文書内で ハイパーリンク（リンク）を作成するためのタグ です。href を指定し、他のページやメールアドレス、電話番号、ファイルのダウンロードリンクを作成するのに適しています。
