a 要素リンクを設置

a 要素が href 属性を持つ場合、それはリンクアンカーを表します。

a 要素が href 属性を持たない場合は、その要素はプレースホルダーを表します。例えばまだリンク先がまだ存在しない、あるいは存在したが削除された場合など、href 属性を持たない a 要素を配置することでダミーリンクとすることができます。

なお、href 属性が省略された場合、target、rel、media、hreflang、type 属性も省略しなければなりません。

また、リンク先に文書内の特定の場所 (フラグメント) を指定することで、その場所へのリンクになります。対象となる要素に id 属性を使用して名前を付けておき、a 要素の href 属性値に #名前 という形式で指定することで、その場所に移動することができます。所謂 「アンカーリンク」、「ページ内リンク」 などと呼ばれるものです。

なお、HTML5 では、href 属性を href="#top" と指定することで、文書内に 「top」 というフラグメント (id="top") がない場合でも、自動的に文書先頭へのリンクになることが仕様内に明記されました (下記リンク参照)。

さらに詳細な説明を見る

サンプルソースを見る

a 要素の仕様

カテゴリ
コンテンツモデル

ただし、インタラクティブ・コンテンツを子孫に持つことはできません(例えば a 要素の入れ子にしたり、button 要素を子孫にすることはできません)。

この要素を使用できる文脈

フレージング・コンテンツが期待される場所

この要素で使用できる属性
DOM インタフェース
interface HTMLAnchorElement : HTMLElement {
  stringifier attribute DOMString href;
           attribute DOMString target;

           attribute DOMString rel;
  readonly attribute DOMTokenList relList;
           attribute DOMString media;
           attribute DOMString hreflang;
           attribute DOMString type;

           attribute DOMString text;

  // URL decomposition IDL attributes
           attribute DOMString protocol;
           attribute DOMString host;
           attribute DOMString hostname;
           attribute DOMString port;
           attribute DOMString pathname;
           attribute DOMString search;
           attribute DOMString hash;
};

詳細説明

a 要素のコンテンツモデルはトランスペアレント・コンテンツです。トランスペアレント・コンテンツとなる要素は、その親要素のコンテンツモデルを受け継ぎます。

例えば、a 要素がフロー・コンテンツをコンテンツモデルに持つ要素内の子要素として使われる場合、そのコンテンツモデルもフロー・コンテンツとなります。

これによって a 要素は HTML 4.01 などでは許されていなかった p 要素div 要素section 要素などを内包することが可能になりました。

なお、a 要素は、他のインタラクティブ・コンテンツを内包することはできません。a 要素が入れ子になっていたり、button 要素などを a 要素の子孫として使用することはできません。

属性について

href、target 属性は、ユーザーが a 要素によって生成されたリンクをたどる際の挙動を制御します。また、rel、media、hreflang、type 属性は、ユーザーがリンクをたどる前に、ターゲットとなるリソースに関する情報をユーザーに提供するために使用できます。

a 要素のサンプルソース

<!-- ナビゲーションを作成した例。href 属性が省略された a 要素の例も -->
<nav role="navigation">
 <ul>
  <li><a href="/">トップページ</a></li>
  <li><a href="/news/">ニュース</a></li>
  <li><a>事例紹介</a></li>
  <li><a href="/legal/" target="_blank">使用許諾条件</a></li>
 </ul>
</nav>
<!-- セクション全体を a 要素でリンクにした例 -->
<aside class="advertising">
 <h1>広告掲載について</h1>
 <a href="/example.html" title="広告掲載についての詳細ページへ">
  <section>
   <h1>広告募集中です</h1>
   <p>月額 100円から掲載可能です。</p>
   <p>詳しい料金設定などはこちらのページをご確認ください。</p>
  </section>
 </a>
</aside>
<!-- 様々なリンクの例 -->
<ul>
 <li>メールアドレス: <a href="mailto:user@example.com">user@example.com</a></li>
 <li><a href="english.html" hreflang="en">英語ページ</a></li>
 <li><a href="photo.jpg" type="image/jpeg">拡大写真を見る</a></li>
 <li><a href="print.html" media="print">印刷ページへ移動</a></li>
</ul>
<!-- 間違った使い方の例: 他のインタラクティブ・コンテンツを子孫にすることはできません -->
<p>
 <a href="example.html">
  <button type="button">ボタン</button>
 </a>
</p>

W3C HTML5 仕様書

4.6.1 The a element