a要素とは

<a>要素は、anchorの略で関連する情報へハイパーリンクを定義する要素です。アンカーとは船の錨のことで、繋がっている関連情報に移動する要素になります。なお、<a>要素に挟まれた文字列のことをアンカーテキストと呼びます。

意味・役割
ハイパーリンクを表す要素
利用できるバージョン（HTML4.01以降）
全てのバージョン
コンテンツ・カテゴリ
（HTML5より前：インライン要素）
コンテンツ・モデル（梱包できる要素）
トランスペアレント。
ただし、子孫にインタラクティブコンテンツの要素があってはならない。
（HTML5より前：インライン要素）
この要素を配置できる親要素
フレージング・コンテンツが配置できる要素

a要素で使える属性

どの要素にでも使えるグローバル属性と以下の属性が使えます。

href属性

hypertext referenceの略でハイパーリンクのリンク先を指定する属性です。一般的に「エイチレフ属性」と呼ばれています。HTML5より前は<a>要素に必ず付けなければならない必須の属性でしたが、HTML5からは必須ではなくなりました。属性値には、別ファイルにリンクをリンク先を指定します。

<a href="リンク先のファイルパス">
属性値
  • 別ファイルへのリンク： リンク先のファイルパス
  • ページ内のid属性の場所にリンク： 「#」の後にリンク先のid名
  • 電子メールリンク： 「mailto:」の後にメールアドレス
  • 電話番号リンク： 「tel:」の後に電話番号
利用できるバージョン（HTML4.01以降）
全てのバージョン
使用例
<a href="https://creatorquest.jp">

target属性

リンク先を表示する場所指定する属性。属性値にはウインドウまたはタブの名前を指定するか、アンダースコアから始まる特別なキーワードが指定できます。

<a href="リンク先のファイルパス" target="表示する場所">
属性値
ウインドウまたはタブの名前または、以下のアンダースコアから始まる特別なキーワード
  • "_blank"： 新しいウインドウまたはタブでリンク先のページを表示
  • "_self"： 現在のウインドウまたはタブでリンク先のページを表示（初期値）
  • "_parent"： <iframe>要素を使っていて親ページがある場合は親のウインドウまたはタブに表示。なければ_seftと同じ
  • "_top"： <iframe>要素を使っていて親ページがある場合は、最も上位の親のウインドウまたはタブに表示。なければ_seftと同じ
利用できるバージョン（HTML4.01以降）
HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）、 HTML5 〜
使用例
<a href="https://creatorquest.jp" target="_blank">

download属性 HTML5で追加

ユーザーがクリックした際に、href属性で指定したファイルをダウンロードするように指定する属性です。属性値にはダウンロードする際のファイル名を指定します。属性値を省略した場合は元々のファイル名でダウンロードされます。

<a href="ダウンロードするファイルパス" download="ファイル名">
属性値
ファイル名
利用できるバージョン（HTML4.01以降）
HTML5 〜
使用例
<a href="sample.png" download="myfile.png">

rel属性

リンク先との現在ページから見た関係性を指定する属性です。属性値は係性を表すリンクタイプのキーワードで指定します。

<a href="リンク先のファイルパス" rel="関係性のキーワード">
属性値
リンクタイプのキーワード。

【主なリンクタイプのキーワード】

  • "alternate"： 代替えページ
  • "author"： 作者ページ
  • "next"： 次のページ
  • "nofollow"： 推奨していないページ
  • "prev"： 前のページ
利用できるバージョン（HTML4.01以降）
すべてのバージョン
使用例
<a href="next.html" rel="next">次のページ</a>

rev属性 HTML5.1で再導入

現在ページとのリンク先から見た関係性を指定する属性です。属性値は関係性を表すリンクタイプのキーワードで指定します。

<a href="リンク先のファイルパス" rev="関係性のキーワード">
属性値
リンクタイプのキーワード。

【主なリンクタイプのキーワード】

  • "alternate"： 代替えページ
  • "author"： 作者ページ
  • "next"： 次のページ
  • "nofollow"： 推奨していないページ
  • "prev"： 前のページ
利用できるバージョン（HTML4.01以降）
HTML4.01、XHTML1.0、XHTML1.1、HTML5.1
使用例
<a href="next.html" rev="prev" rel="next">次のページ</a>

hreflang属性

リンク先の言語を指定する属性です。属性値は言語コードで指定します。

<a href="リンク先のファイルパス" hreflang="言語コード">
属性値
言語コード。

【主な言語コード】

  • "ja"： 日本語
  • "en"： 英語
利用できるバージョン（HTML4.01以降）
すべてのバージョン
使用例
<a href="/en/index.html" hreflang="en" rel="alternate">English</a>

type属性

リンク先のMIMEタイプを指定する属性です。

<a href="リンク先のファイルパス" type="MIMEタイプ">
属性値
MIMEタイプ
利用できるバージョン（HTML4.01以降）
すべてのバージョン
使用例
<a href="sample.html" type="text/html">

name属性 廃止

ページ内リンクのリンク先名を指定する属性です。XHTML1.0以降は非推奨になり、XHTML1.1で廃止されました。代わりとして、グローバル属性のid属性で指定するようにしましょう。

<a name="リンク先の名前">
属性値
任意の文字列（半角英数字）
利用できるバージョン（HTML4.01以降）
HTML4.01、XHTML1.0 （Transition/Frameset）
使用例
<a name="section">

charset属性 廃止

リンク先の文字コードを指定する属性です。HTML5で廃止されました。

<a href="リンク先のファイルパス" charset="文字コード">
属性値
文字コード

【主な日本語環境での文字コード】

  • "UTF-8"： 「UTF-8」で保存されたHTMLファイル
  • "Shift_JIS"： 「シフトJIS」で保存されたHTMLファイル
  • "EUC-JP"： 「EUC」で保存されたHTMLファイル
利用できるバージョン（HTML4.01以降）
HTML4.01、XHTML1.0、XHTML1.1
使用例
<a href="sample.html" chrset="UTF-8">

shape属性 廃止

リンクをクリックできる有効範囲の形状を指定する属性です。属性値には、形状を表すキーワードを指定し、有効範囲の座標位置は、coords属性を使って定義します。なお、この属性はHTML5で廃止されました。代わりに<area>要素を使用します。

<a href="リンク先のファイルパス" shape="形状" coords="有効範囲の座標">
属性値
  • "defalut"： 領域全体
  • "rect"： 四角
  • "circle"： 円
  • "poly"： 多角形
利用できるバージョン（HTML4.01以降）
HTML4.01、XHTML1.0、XHTML1.1
使用例
<a href="sample.html" shape="rect" coords="10,10,60,60">

coords属性 廃止

shape属性で指定した形状の有効範囲の座標を指定する属性です。属性値にはshape属性で指定した形状に合わせて、領域の座標を「,（半角カンマ）」区切りで指定します。なおこの属性はHTML5で廃止されました。代わりに<area>要素を使用します。

<a href="リンク先のファイルパス" shape="形状" coords="有効範囲の座標">
属性値
  • shape属性が"rect"の場合： 左上のX座標, 左上のY座標, 右下のX座標, 右下のY座標
  • shape属性が"circle"の場合： 中心のX座標, 中心のY座標, 半径
  • shape属性が"poly"の場合： すべての頂点のx座標とy座標を「,（半角カンマ）」区切りで指定
    （最初の頂点の座標と、最後の頂点の座標は同じにする）
利用できるバージョン（HTML4.01以降）
HTML4.01、XHTML1.0、XHTML1.1
使用例
<a href="sample.html" shape="rect" coords="10,10,60,60">

a要素のサンプル

基本的なa要素の例

基本的なa要素の例
<p>
  <a href="https://creatorquest.jp/">CreatorQuest</a>
</p>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

リンク先を新しいウインドウで表示する例

リンク先を新しいウインドウで表示する例
<p>
  <a href="https://creatorquest.jp/" target="_blank">CreatorQuest</a>
</p>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

電子メールリンクの例

電子メールリンクの例
<p>
  <a href="mailto:dummy@creatorquest.jp">メールを送る</a>
</p>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

a要素の注意点

<a>要素のコンテンツ・モデルは、トランスペアレントです。従って、親要素のコンテンツ・モデルがフロー・コンテンツの場合は、<a>要素の子要素にフロー・コンテンツを配置することが可能です。ただし、HTML5より前のバージョンでは、インライン要素しか配置できませんので、HTML5より前のバージョンで記述する際は注意が必要です。

正：HTML5では正しい配置ルール
<article>
  <a href="sample.html" rel="bookmark">
    <h2>HTMLを効率よく勉強する方法</h2>
    <p>
      あることをするだけでHTMLを効率良く学ぶことが出来ます...
    </p>
  </a>
</article>

仕様

HTML5.1
4.5.1. The a element
HTML5
4.5.1 The a element
HTML4.01
12.2 The A element

関連する要素

関連するレッスン