Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

<a>

『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"）。

サンプルコード

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

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

  <!-- 外部リンク（新タブ）セキュリティ対策を忘れずに -->
  <a href="https://www.example.com" 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の場所にスクロールします。

会社概要（クリックで /about.html に遷移）
外部サイトへ（クリックで新しいタブが開く）
はじめに | 使い方 | まとめ（クリックでページ内ジャンプ）
CSVをダウンロード（クリックでファイルダウンロード）
メールを送る（クリックでメールアプリが起動）

概要

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

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

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

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