a 要素

4.6.1 a 要素

カテゴリー
フロー・コンテンツ
この要素がフレージング・コンテンツのみを含む場合:フレージング・コンテンツ
インタラクティブ・コンテンツ
この要素を使うことができるコンテキスト:
この要素がフレージング・コンテンツのみを含む場合:フレージング・コンテンツが期待される場所
そうでなければ:フロー・コンテンツが期待される場所
コンテンツモデル:
トランスペアレント。ただし、子要素にインタラクティブ・コンテンツを入れてはいけない。
コンテンツ属性:
グローバル属性
href
target
rel
media
hreflang
type
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 要素が href 属性を持つなら、それはハイパーリンク(ハイパーテキスト・アンカー)を表します。

もし a 要素が href 属性を持たないなら、その要素は、href 属性があったならリンクが置かれたであろうプレースホルダーを表します。ただし、それが関連性があった場合に限ります。

target, rel, media, hreflang, type 属性は、もし href 属性がなければ、省略しなければいけません。

もしサイトが、すべてのページで統一されたナビゲーション・ツールバーを使うなら、通常はその自身のページにもリンクするでしょうが、a 要素を使ってマークアップすることができます:

<nav>
 <ul>
  <li> <a href="/">Home</a> </li>
  <li> <a href="/news">News</a> </li>
  <li> <a>Examples</a> </li>
  <li> <a href="/legal">Legal</a> </li>
 </ul>
</nav>

href, target 属性は、ユーザーが a 要素を使って生成されたハイパーリンクをたどるときに何が起こるのか、という点で影響を与えます。rel, media, hreflang, type 属性は、ユーザーがリンクをたどる前に、ターゲットのリソースがどんな性質を持つのかをユーザーに示すために使うことができます。

ハイパーリンクを生成する a 要素のアクティベーション・ビヘイビアは、次の手順を実行することになります:

  1. 該当の click信頼された(つまり、click() メソッドの呼び出しが、このイベントが送出されている理由だった)ものでなく、かつ、a 要素の target 属性が、target 属性の値をブラウジング・コンテキスト名として使って、ブラウジング・コンテキスト名を指定してブラウジング・コンテキストを選択する規則を適用したら、その結果が選択のブラウジング・コンテキストにならないようであれば、INVALID_ACCESS_ERR 例外を発出して、これらの手順を中止します。

  2. もし click イベントのターゲットが、ismap 属性が指定された img 要素なら、サーバーサイド・イメージマップ処理を次のように実行しなければいけません:

    1. click イベントが、img 要素上で実在のポインティング・デバイスによって引き起こされた click イベントだったなら、その画像の左側の境界線があればその左縁から、なければその画像の左縁から、クリック位置までの距離を CSS ピクセルで x にセットします。そして、画像の上側の境界線があればその上縁から、なければその画像の上縁から、クリック場所までの距離を CSS ピクセルで y にセットします。そうでなければ、xy にゼロをセットします。
    2. hyperlink suffix を、U+003F QUESTION MARK 文字, ASCII 数字で10進数の整数として表した x の値, U+002C COMMA 文字 (,), そしてASCII数字で10進数の整数として表した y の値とします。ASCII 数字は U+0030 DIGIT ZERO (0) から U+0039 DIGIT NINE (9) までの範囲にある文字です。
  3. 最後に、ユーザーエージェントは、a 要素で定義されたハイパーリンクをたどらなければいけません。もし上記の手順で hyperlink suffix が定義されたら、いつそのハイパーリンクをたどるのかを考慮に入れます。

a . text

textContent と同じ。

IDL 属性 href, target, rel, media, hreflang, type は、 同じ名前の対応するコンテンツ属性を反映しなければいけません。

IDL 属性 relList は、rel コンテンツ属性を反映しなければいけません。

text IDL 属性は、取得時においては、該当の要素の textContent IDL 属性と同じ値を返さなければいけません。セット時においては、該当の要素の textContent IDL 属性が新たな値にセットされたかのように作用しなければいけません。

a 要素は URL 分離属性である protocol, host, port, hostname, pathname, search, hash もサポートします。これらは、その要素の href 属性をその要素に対して解決した結果を入力として、URL 分離属性に対して与えられる規則に従わなければいけません。ただし、該当の属性が存在し、それの解決が成功した場合に限ります。そうでなければ、空文字列となります。そして、共通セッター・アクションは、この要素の href 属性に新たな出力値をセットすることと同じです。

a 要素は、段落、リスト、表など、その中にインタラクティブコンテンツ(例:ボタンや他のリンクなど)がない限り、その全体を包むことができます。この例は、これを使って、広告ブロック全体をどうやってリンクにするのかを示しています:

<aside class="advertising">
 <h1>Advertising</h1>
 <a href="http://ad.example.com/?adid=1929&amp;pubid=1422">
  <section>
   <h1>Mellblomatic 9000!</h1>
   <p>Turn all your widgets into mellbloms!</p>
   <p>Only $9.99 plus shipping and handling.</p>
  </section>
 </a>
 <a href="http://ad.example.com/?adid=375&amp;pubid=1422">
  <section>
   <h1>The Mellblom Browser</h1>
   <p>Web browsing at the speed of light.</p>
   <p>No other browser goes faster!</p>
  </section>
 </a>
</aside>

※ 原文:http://www.w3.org/TR/2011/WD-html5-20110525/text-level-semantics.html#the-a-element