<a>

対応:		HTML 4（1997）

『a』（アンカー）要素はハイパーリンクを作成する要素で、他のページへのリンク・ページ内ジャンプ・メールリンク・ファイルダウンロードなど、Web上のナビゲーションの基本を担います。

構文

<!-- 基本的なリンク -->
<a href="URL">リンクテキスト</a>

<!-- 別タブで開く -->
<a href="URL" target="_blank" rel="noopener noreferrer">外部リンク</a>

<!-- ページ内アンカー -->
<a href="#section1">セクション1へジャンプ</a>
<h2 id="section1">セクション1</h2>

<!-- ファイルダウンロード -->
<a href="/files/sample.pdf" download>PDFをダウンロード</a>

<!-- メールリンク -->
<a href="mailto:info@example.com">メールを送る</a>

属性一覧

属性	概要
href	リンク先のURLを指定します。絶対URL・相対URL・ページ内ID（#id）・mailto:・tel: などが指定できます。
target	リンクを開くウィンドウやタブを指定します。『_blank』で新しいタブ、『_self』（デフォルト）で同じタブに開きます。
rel	リンク先との関係を示します。『noopener noreferrer』は外部リンクのセキュリティ対策として推奨されます。
download	リンク先のファイルをダウンロードします。値を指定するとダウンロード時のファイル名になります（例：download="report.pdf"）。
hreflang	リンク先の言語を示します（例：hreflang="en"）。
type	リンク先のMIMEタイプを示します（例：type="application/pdf"）。

サンプルコード

sample_a.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>
<body>

  <!-- 内部リンク（相対URL） -->
  <a href="/about.html">会社概要</a>

  <!-- 外部リンク（新タブ）セキュリティ対策を忘れずに -->
  <a href="https://wp-p.info" target="_blank" rel="noopener noreferrer">
    外部サイトへ（新しいタブで開く）
  </a>

  <!-- ページ内ジャンプ -->
  <nav>
    <a href="#intro">はじめに</a> |
    <a href="#usage">使い方</a> |
    <a href="#summary">まとめ</a>
  </nav>

  <h2 id="intro">はじめに</h2>
  <p>コンテンツ...</p>

  <h2 id="usage">使い方</h2>
  <p>コンテンツ...</p>

  <h2 id="summary">まとめ</h2>
  <p>コンテンツ...</p>

  <!-- ダウンロードリンク -->
  <a href="/files/sample.csv" download="sample_data.csv">CSVをダウンロード</a>

  <!-- メールリンク -->
  <a href="mailto:info@example.com?subject=お問い合わせ">メールを送る</a>

</body>
</html>

実行結果

各リンクがテキストに下線の付いた青いリンクとして表示されます。外部リンクは新しいタブで開き、ページ内リンクは同一ページの指定IDの場所にスクロールします。

サンプルページはこちら

target属性の値一覧

値	概要
_self	デフォルト値。同じタブ・フレームにリンク先を表示します。
_blank	新しいタブ（またはウィンドウ）でリンク先を開きます。外部リンクに使うことが多く、『rel="noopener noreferrer"』と必ず合わせて指定します。
_parent	現在のフレームの親フレームにリンク先を表示します。フレームが存在しない場合は『_self』と同じ動作になります。
_top	最上位のウィンドウにリンク先を表示します。入れ子になったフレームから抜け出したい場合に使います。

tel: / mailto: リンク

『href』属性に『tel:』や『mailto:』スキームを使うことで、電話・メールアプリを起動するリンクを作れます。スマートフォンサイトでは電話番号をタップで発信できるようにする場合に特に有効です。

<!-- 電話リンク（スマートフォンでタップすると発信） -->
<a href="tel:+81-90-0000-0000">090-0000-0000</a>

<!-- メールリンク（件名・本文もURLエンコードで指定可） -->
<a href="mailto:info@example.com?subject=%E3%81%8A%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B&body=%E3%81%8A%E4%B8%96%E8%A9%B1%E3%81%AB%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82">
  メールで問い合わせる
</a>

CSSでボタン風にスタイリングする

『a』要素はCSSで見た目を自由に変更できます。ボタンに見せたい場合も、意味的にはリンクなのか操作ボタンなのかに応じて『a』と『button』を使い分けましょう。ページ遷移を伴う場合は『a』が適切です。

<style>
  /* リンクをボタン風に見せる */
  a.btn {
    display: inline-block;
    padding: 10px 24px;
    background-color: #4a90e2;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.2s;
  }
  a.btn:hover {
    background-color: #2c6fbc;
  }

  /* 現在のページ（カレント）リンクのスタイル */
  a[aria-current="page"] {
    font-weight: bold;
    color: #e74c3c;
    pointer-events: none; /* クリック不可にする */
  }
</style>

<a class="btn" href="/contact.html">お問い合わせはこちら</a>

<nav>
  <a href="/">ホーム</a>
  <a href="/about.html" aria-current="page">会社概要（現在地）</a>
  <a href="/contact.html">お問い合わせ</a>
</nav>

概要

『a』要素はWebの核心的な要素であり、異なるページを繋げる「ハイパーリンク」の実装です。『href』属性にURLを指定しない（またはhref="#"と書く）場合はリンクとしては機能しませんが、JavaScriptのクリックイベントのターゲットとして使われることがあります。

外部サイトへのリンクで『target="_blank"』を使う場合は、必ず『rel="noopener noreferrer"』を合わせて指定してください。これを省略すると、リンク先のページが opener プロパティ経由でリンク元ページを操作できてしまうセキュリティリスクがあります（タブナビング攻撃）。

ページ内ジャンプは『href="#ID名"』と書き、ジャンプ先の要素に同じ『id』属性を付けます。ページの目次やページトップへ戻るボタンなどによく使われます。URLにも『#セクション名』が付加されるため、そのURLを直接開いた場合も同じ位置にジャンプします。

『a』要素の中にはインライン要素だけでなく、HTML5以降は『div』や『p』などのブロック要素も入れられるようになりました。画像全体をリンクにしたい場合は『a』で『img』を囲む形がよく使われます。