aタグでリンクを作成する方法や属性の使い方についてわかりやすく解説

INDEX

aタグの概要

aタグの概要

リンク作成 HTMLタグ

<a href=”URL“>リンクテキスト</a>

概要 aタグは、HTMLでリンクを作成するためのタグです。クリックすると、指定したURLへ遷移します。

クリック可能なリンクを作成するために使用される。
href属性でリンク先を指定する。
外部サイトへのリンク、ページ内リンク、メール送信リンクなどに使える。

aタグで使用できる主な属性一覧

属性	説明	使用例
`href`	リンク先のURLを指定	`<a href="https://www.example.com">リンク</a>`
`target`	リンクの開き方を指定	`<a href="https://www.example.com" target="_blank">新しいタブで開く</a>` `_self`（デフォルト）: リンクを現在のウィンドウやフレームで開く(デフォルト) `_blank`: リンクを新しいウィンドウやタブで開く `_parent`: 親フレームでリンクを開く（フレームがない場合 `_self` と同じ） `_top`: 最上位のフレームでリンクを開く（フレームがない場合 `_self` と同じ） `フレーム名`: 指定した名前のフレームでリンクを開く
`rel`	リンクとリンク先の関係を指定	`<a href="https://www.example.com" rel="nofollow">SEO対策</a>` `alternate`：代替バージョンのリンク（例: 別の言語やフォーマットのページ） `author`：リンク先がページの著者情報を提供する `bookmark`：リンク先が現在のページのブックマーク用URL `external`：リンク先が外部サイトであることを示す `help`：リンク先がヘルプページ `license`：リンク先がライセンス情報 `next`：リンク先が次のページ（ページネーション） `nofollow`：検索エンジンにリンクをたどらせない `noopener`：`target="_blank"` の場合、リンク先のページが `window.opener` を操作できないようにする `noreferrer`：リンク先にリファラー情報を渡さない `noopener noreferrer`：`noopener` と `noreferrer` を併用 `prev`：リンク先が前のページ（ページネーション） `search`：リンク先が検索機能のページ `tag`：リンク先がページに関連するタグを示す
`download`	リンク先のファイルをダウンロード	`<a href="file.pdf" download>PDFをダウンロード</a>`
`type`	リンク先のMIMEタイプを指定	`<a href="file.pdf" type="application/pdf">PDFファイル</a>` `text/html`：HTML ファイル `text/plain`：プレーンテキスト `text/css`：CSS ファイル `text/javascript`：JavaScript ファイル `application/json`：JSON ファイル `application/xml`：XML ファイル `application/pdf`：PDF ファイル `application/zip`：ZIP 圧縮ファイル `application/msword`：Microsoft Word ファイル `application/vnd.ms-excel`：Microsoft Excel ファイル `application/vnd.ms-powerpoint`：Microsoft PowerPoint ファイル `application/octet-stream`：任意のバイナリデータ `image/png`：PNG 画像 `image/jpeg`：JPEG 画像 `image/gif`：GIF 画像 `audio/mpeg`：MP3 オーディオファイル `audio/ogg`：Ogg オーディオファイル `video/mp4`：MP4 動画ファイル `video/webm`：WebM 動画ファイル
`ping`	クリック時にデータを送信するURLを指定	`<a href="https://www.example.com" ping="https://tracking.com">トラッキングリンク</a>`
`hreflang`	リンク先の言語を指定	`<a href="https://www.example.com" hreflang="en">英語のページ</a>`
`referrerpolicy`	リファラー情報の送信方法を制御	`<a href="https://www.example.com" referrerpolicy="no-referrer">リファラーなし</a>` `no-referrer`：リファラー情報を一切送信しない `no-referrer-when-downgrade`（デフォルト）：HTTPS → HTTP へ遷移する場合はリファラーを送信しない `origin`：リファラーとしてオリジン（スキーム、ホスト、ポート）のみを送信 `origin-when-cross-origin`：同一オリジンではフルURLを、クロスオリジンではオリジンのみ送信 `same-origin`：同一オリジンではフルURLを送信し、クロスオリジンではリファラーを送信しない `strict-origin`：HTTPS → HTTP へ遷移する場合はリファラーを送信せず、その他はオリジンのみ送信 `strict-origin-when-cross-origin`：同一オリジンではフルURLを送信、クロスオリジンではオリジンのみ送信、HTTPS → HTTP への遷移時は送信しない `unsafe-url`：常にフルURLをリファラーとして送信（セキュリティリスクがある）
`accesskey`	キーボードショートカットを設定	`<a href="https://www.example.com" accesskey="h">Alt+Hでアクセス</a>`
`tabindex`	タブ移動の順序を指定	`<a href="https://www.example.com" tabindex="1">優先的にフォーカス</a>`

aタグの基本的な使い方

aタグを使って、リンクを作成できます。以下の例では、指定したURLへ遷移するリンクを作成します。

<a href="https://www.example.com">こちらをクリック</a>

表示例：

こちらをクリック

ページ内リンクを作成する

同じページ内の特定の場所にジャンプするには、リンク先の要素にidを付け、hrefで#id名を指定します。

<a href="#section2">このページのまとめ移動</a>

<h3 id="section2">まとめ</h3>

表示例：

このページのまとめへ移動

メール送信や電話発信リンクの作成

aタグを使って、メール送信や電話発信をすることも可能です。

メール送信リンク（クリックするとメールアプリが開く）

<a href="mailto:example@example.com">メールを送る</a>

電話発信リンク（スマートフォンでクリックすると電話アプリが開く）

<a href="tel:+819012345678">電話をかける</a>

ダウンロード用リンクの作成

リンクをクリックしたときにファイルをダウンロードさせるには、download属性を使用します。

<a href="example.pdf" download>PDFをダウンロード</a>

表示例：

PDFをダウンロード

注意事項

リンク先が安全か確認する: 不正なURLを指定しないよう注意。
外部リンクはセキュリティ対策が必要: target="_blank"を使う場合は、rel="noopener noreferrer"を併用する。
リンクのアクセシビリティを考慮する: ユーザーがどこへ移動するのか明確に示す。

よくある質問

Q: aタグの中に画像を入れることはできますか？: A: はい、可能です。画像をクリックできるリンクを作成できます。

<a href="https://www.example.com">
    <img src="image.jpg" alt="リンク画像">
</a>

Q: target=”_blank”を使うときの注意点は？: A: セキュリティのため、rel="noopener noreferrer"を追加しましょう。
Q: ページ内リンクの作成方法は？: A: idを指定してhref="#id名"でリンクを作成できます。
Q: rel=”nofollow”は何のために使いますか？: A: SEO対策のため、検索エンジンにリンクをたどらせたくないときに使います。
Q: referrerpolicy属性のメリットは？: A: クリック元の情報（リファラー）を制御でき、プライバシー保護に役立ちます。

まとめ

aタグを使うと、簡単にリンクを作成できる。
href属性でリンク先を指定する。
target="_blank"を使うと新しいタブで開く。
ページ内リンクはidと#を使う。
メールや電話のリンクも作成可能。
download属性でファイルをダウンロードできる。
rel属性でSEOやセキュリティ対策を強化できる。
referrerpolicy属性を使うことでプライバシーを保護できる。