<a>

a 要素 (HTML)

[8] HTMLa 要素は、 アンカー () を定義します。アンカーとは、 リンクの端点 (始点終点) のことです。 元々 a 要素始点にも終点にも使えるように定義されましたが、 現在は始点として使う (終点には id 属性を使う) のが普通になっています。

[22] 仕様書:

内容模型
(%inline;)* −(a) (歴史的変遷 https://suika.suikawiki.org/www/2004/html/content-a)
出現できる文脈
%inline な文脈 (歴史的変遷 https://suika.suikawiki.org/www/2004/html/classes)
DOM界面
HTMLAnchorElement

構文

[64] 開始タグ終了タグは必須です。

[65] かつては <a name>終点アンカー開始タグのみで使う人もいましたが、 正式に認められていたことはありません。

属性

[53] a 要素内容属性
属性名属性値型既定値意味典拠
accesskey%Character[HTML 4]
alt非標準Windows Live Spaces
applMacintosh creator非標準T-Time
background背景実行モードで起動非標準T-Time
bgcolor背景色非標準T-Time
bulletin-date満期 (IETF I-D)
bulletin-expires満期 (IETF I-D)
bulletin-image%URI;満期 (IETF I-D)
bulletin-text%Text;満期 (IETF I-D)
bvitemtype非標準Windows Live Spaces
caption%Text非標準T-Time
charset%Charset[HTML 4]
charspace字間非標準T-Time
cmd命令非標準T-Time
coords%Coords[HTML 4]
csover非標準
directkey非標準[Vodafone]
entireword完全一致・部分一致非標準T-Time
eswf非標準EMOBILE
exeファイル名Windows 実行可能ファイル非標準T-Time
href%URI終点[HTML 4]
mce_href%URI;非標準
hreflang%LanguageCode[HTML 4]
ijam非標準iモード
indexstring(なし)索引項目群NC4
iswf非標準EMOBILE
key鍵語非標準T-Time
lcs非標準iモード
linkcolorリンク色非標準T-Time
linespace行間非標準T-Time
loop非標準[Vodafone]
mailbody非標準[Vodafone]
measureauto非標準EMOBILE
memoryname非標準[Vodafone]
name終点アンカー名[HTML 4]
rddl:natureURIRDDL 性質RDDL
newwindow(真偽値属性)()新窓で開く非標準, 非推奨 → targetT-Time
nonumber番号なし非標準[Vodafone]
onto非標準
pointercolor現在頁指示子色非標準T-Time
prop特性適用対象非標準T-Time
rddl:purposeURIRDDL 目的RDDL
rel%LinkTypes関係 (順)[HTML 4]
rev%LinkTypes関係 (逆)[HTML 4]
shadowcolor非標準T-Time
shake揺れ表示非標準T-Time
shape%Shaperect[HTML 4]
src%URI非標準[Vodafone]
soundstart非標準[Vodafone]
styleスタイル情報[HTML4] %coreattr
subpointercolor前頁指示子色非標準T-Time
tabindexNUMBER[HTML 4]
target[HTML 4] 非推奨
textcolor文字色非標準T-Time
tocstring(なし)目次での標示NC4
type%ContentType[HTML 4]
viblength非標準[Vodafone]
vibration非標準[Vodafone]
volume非標準[Vodafone]
xsize文字の大きさ非標準T-Time

[11] a 要素はアンカーを定義します。 name 属性や id 属性を使うと、 終点アンカーにすることができます。 href 属性を使うと、始点アンカーにすることができます。

この3つの属性は、1つも使わなくても構いませんし、3つとも使っても構いません。

状態

[56]

relList
DOMTokenList

DOM インターフェイス

[70] HTMLElement, HTMLDatabinding

Anchor (JavaScript 1.1)
Link (JavaScript 1.0)
handleEventLink (JavaScript 1.2)
hashLink (JavaScript 1.0)
hostLink (JavaScript 1.0)
hostnameLink (JavaScript 1.0)
hrefLink (JavaScript 1.0)
MethodsHTMLAnchorElement (WinIE 4)
mimeType
nameAnchor (JavaScript 1.2)
nameProp
pathnameLink (JavaScript 1.0)
portLink (JavaScript 1.0)
protocolLink (JavaScript 1.0)
protocolLong
relHTMLAnchorElement (WinIE 4)
revHTMLAnchorElement (WinIE 4)
searchLink (JavaScript 1.0)
tabIndexHTMLAnchorElement (WinIE 4)
targetLink (JavaScript 1.0)
textAnchor (JavaScript 1.2), Link (JavaScript 1.2)
urnHTMLAnchorElement (WinIE 4)
xAnchor (JavaScript 1.2), Link (JavaScript 1.2)
yAnchor (JavaScript 1.2), Link (JavaScript 1.2)

内容

[1] a 要素の子孫要素に a 要素は存在できません XHTML 1.0

[2] つまり、a 要素の入れ子は禁止されています。なのにした場合の挙動は未定義ですが、可能性としては

辺りがあるでしょう。

[7] WinIE 6.0 の動作は >>4 です。

[20] a を入れ子にすることはできません。

[27] 仕様書:

[28] 文書中で一意であること: 文書中で複数の href 属性付き a 要素内容文字列が等しい時は、 その href 属性の値 (リンク先) も等しいのが望ましいとする考え方があります。

この考え方に従うと、例えば

あれの<a href="usage-1">使い方</a>や、
これの<a href="usage-2">使い方</a>。

好ましくないことになります。

この考え方の背景には、 同じように見えるものは同じように機能するべきだ (その方が分かりやすい) という考察があります。

先の例は

<a href="usage-1">あれの使い方</a>や、
<a href="usage-2">これの使い方</a>。

とした方がより分かりやすいと思われます。

[29] 注意: >>28 は絶対そうでなければならないというほどのことでもありません。 その場その場で文脈に応じて何が一番好ましいのか考える必要があります。

例えば、

<p>あれ:
      <a href="usage-1">使い方</a>、
      <a href="example-1">実例</a>。</p>
<p>これ:
      <a href="usage-2">使い方</a>、
      <a href="example-2">実例</a>。</p>

>>28 の例と内容は似ていますが、同じ対処法を採ることはできません。 無理に同じ方法を適用すると、

<p><a href="usage-1">あれの使い方</a>、
<a href="example-1">あれの実例</a>。</p>
<p><a href="usage-2">これの使い方</a>、
<a href="example-2">これの実例</a>。</p>

とでもなるのでしょうが、かえって分かりにくいように思えます。

[30] >>28-29 のような場合の別の対処法として、 title 属性によって説明を加えるのがよいとも言われます。

例えば >>29 の例では

<p>あれ:
      <a href="usage-1" title="あれの使い方">使い方</a>、
      <a href="example-1" title="あれの実例">実例</a>。</p>
<p>これ:
      <a href="usage-2" title="これの使い方">使い方</a>、
      <a href="example-2" title="これの実例">実例</a>。</p>

となります。 これなら悪くはなさそうです。

[31] 始点リンク内容は自己完結している方が良いか: href 属性付き a 要素内容文字列はそれだけでリンク先がわかる方が良いと言われることがあります。

そしてその根拠として、文書中のリンクの一覧を抽出した時に良く分からないものが沢山出てきて困るというのが挙げられます。 (この根拠>>28 の主張の根拠にも使われます。)

[32] >>31 のような主張は元々 here症候群への (誤った) 反論として生じたのではないかと考えられますが、 しばしば絶対的な基準であるかのように語られます。

確かにリンク一覧に here が20個も並んでいたり、 が数十個あってそれぞれリンク先が違っていたりすると、 リンク一覧を抽出した意味も無くなります。

しかし HTML 文書に対するリンク一覧はあくまで本来の表示に対する補助的な機能であるべきで、 それだけで完結させられるようにしろというのは主張に無理があります。 link 要素ならともかく、 a 要素は普通の文章中でリンクするための要素です。 a 要素リンクは元々文脈の中に存在しているのです。 適当なから適当な単語を1つや2つ抜き出しても必ずしも意味のある使い方が期待できないのと同様、 リンク文脈なしで抜き出してもさして役に立たなくて当然なのです。 (それを鑑みると、 Webブラウザリンク一覧は、 一覧中の項目を選ぶと本文中の対応する部分がどこか表示されるくらいの機能を備えているくらいでないと駄目でしょう。)

[69] op (独自XML名前空間)

レンダリング

[39] ハイパーリンクの処理も参照。

[14] HTML 4 仕様書の触れるレンダリング例:

[21] a 要素によって定義されたリンクを活性化すると、 UA は通常リンクをたどります HTML 4 17.11.2

処理

[41] ハイパーリンクの処理も参照。

不思議解釈

[9] 今更不思議マーク付けの説明なんて読んでも驚きはしないと 思っていたのですが、 <a name="hogehoge">閉じタグ </a> は無いのが普通とかいうのを読んで驚いてしまいました:-)

[23]

<a href="#" title="このようになります">裏技大公開</a>

title属性を使って説明をいれることが簡単にできるようになります。 HTMLの話をするとtitle要素というものもありますが、 これとは別にtitle属性というものもあり、共通の属性ということで どの要素でも持っている属性です。

どの要素でもと言いながら、なぜ a 要素型を使っているのか。 そしてなぜ空の素片識別子同文書参照へのリンクとしているのか。 不思議マークアッパーの行動はまさに不思議。

出典: マウスを重ねたときに説明をつける - Webデザインの教科書 :: オシャレチップス http://oshare.chips.jp/d_tech/text02.html (2005年4月付け、2005年4月現在)

[24] 歴史的にはともかく、 a の中に入れることができるのは行内要素だけです。 にもかかわらず、 li とかを入れられるという解説が未だに後を絶ちません・・・。 リスト項目をリンクにしたいと思うのはもっともですが、 できないものはできないのでしてね・・・。

[25] 終了タグの省略: 終点アンカーとして (つまり name 属性と共に) 使われている a 要素で終了タグを省略したものがよく見られます。 (もちろん間違いです。)

解釈は実装依存になりますが、 Gecko だとブロック要素開始タグが見つかるとそこでいったん中断し、 開始タグの後に再度元の a 開始タグがあるかのように扱われます。 (他の行内要素でも同じような感じ。)

だから同じ name が複数 (たぶん大量に) 出現したりしてしまいまして、おかしなことになります。

ちなみに W3C の仕様書で XMLspec から XHTML に変換したものの中に XML空要素の構文を使ったものが登場しまして、 GeckoHTML として構文解析すると / はごみとみなされるので同じ現象が発生します。

<a name=""> の終了タグ省略について

歴史

[34] a要素型は、HTMLの最大の特徴の一つですから、 HTMLの一番初めから存在した要素型だと考えられます。

[35] Line Mode Browserには、1991年2月の段階で既に href属性name属性が実装されています。 2月27日には要素内でタグが使えるようになりました。

[42]

name vs id
a enclosing hn

HTMLもどき

[71] DTBook にも a があります。

XHTML2

[47] XHTML 2.0 ではすべての要素href 属性が追加されたので a 要素は不要になったはずですが、 なぜか最初の作業原案からずっと残されたままでした。

実装

[17] a 要素は (意味的に適切かという問題はあるにせよ、 構文的に) 空にもなり得るので、 UA は空の終点アンカーを探すこともできるべきですが、 そうでない UA もあると HTML 4 仕様書は言っています。

UA によってはうまく機能しない例

<A name="EMPTY-ANCHOR" id="EMPTY-ANCHOR"></A>
<EM>...some HTML...</EM>
<A href="#EMPTY-ANCHOR">Link to empty anchor</A>

(HTML 4 仕様書より、改)

[43] リンク文字列を選択するには - えむもじら (2007-04-28 11:51:59 +09:00 版) http://level.s69.xrea.com/mozilla/index.cgi?id=20070426_Selection (名無しさん 2007-04-28 03:02:41 +00:00)

[44] リンク文字列を選択するには(続き) - えむもじら ( 版) http://level.s69.xrea.com/mozilla/index.cgi?id=20070428_LinkSelection (名無しさん 2007-04-29 02:27:06 +00:00)

[12] 単純な始点アンカーの例

For more information about W3C, please consult the 
<A href="http://www.w3.org/">W3C Web site</A>. 

(HTML 4 仕様書より)

レンダリング例:

For more information about W3C, please consult the W3C Web site.
                                                   ~~~~~~~~~~~~

[15]

...text before the link...
For more information, please consult <A href="./one.html#ANCHOR-ONE"> anchor one</A>.
...text after the link...

(HTML 4 仕様書より、改)

同じ階層の one.html (>>13) の終点アンカー ANCHOR-ONE への連結の例。

[13] 単純な終点アンカーの例

...text before the anchor...
<A name="ANCHOR-ONE" id="ANCHOR-ONE">This is the location of anchor one.</A>
...text after the anchor...

(HTML 4 仕様書より、改)

[16] 始点アンカーかつ終点アンカーな例

I just returned from vacation! Here's a
<A name="ANCHOR-TWO" id="ANCHOR-TWO" 
   href="http://www.somecompany.com/People/Ian/vacation/family.png">
photo of my family at the lake.</A>.

(HTML 4 仕様書より、改)

[18] 目次の例

<H1>Table of Contents</H1>
<P><A href="#section1">Introduction</A><BR>
<A href="#section2">Some background</A><BR>
<A href="#section2.1">On a more personal note</A><BR>
...the rest of the table of contents...
...the document body...
<H2><A name="section1">Introduction</A></H2>
...section 1...
<H2><A name="section2">Some background</A></H2>
...section 2...
<H3><A name="section2.1">On a more personal note</A></H3>
...section 2.1...

[19] >>18id に書き換えた例

<H1>Table of Contents</H1>
<P><A href="#section1">Introduction</A><BR>
<A href="#section2">Some background</A><BR>
<A href="#section2.1">On a more personal note</A><BR>
...the rest of the table of contents...
...the document body...
<H2 id="section1">Introduction</H2>
...section 1...
<H2 id="section2">Some background</H2>
...section 2...
<H3 id="section2.1">On a more personal note</H3>
...section 2.1...

(HTML 4 仕様書より)

[40] The SMIL 3.0 Linking Modules ( 版) http://www.w3.org/TR/2008/REC-SMIL3-20081201/smil-extended-linking.html#edef-a

メモ

[33] ステータスバー偽装 | Okumura's Blog http://oku.edu.mie-u.ac.jp/~okumura/blog/node/356 (名無しさん 2005-11-25 07:33:22 +00:00)

[45] Synchronized Multimedia Integration Language ( 版) http://www.w3.org/TR/1998/REC-smil-19980615/#a

メモ

[46] Linking – SVG Tiny 1.2 ( 版) http://www.w3.org/TR/2008/REC-SVGTiny12-20081222/linking.html#AElement

[48] IE にて a 要素の下に "@" を含む TextNode を append するとおかしくなる事がある件 - vivid memo ( 版) http://d.hatena.ne.jp/vividcode/20091222/1261507364

[49] IRC logs: freenode / #whatwg / 20100616 ( 版) http://krijnhoetmer.nl/irc-logs/whatwg/20100616

[50] IEでのa要素の各属性について - 文殊堂 ( 版) http://d.hatena.ne.jp/monjudoh/20110203/1296720123

[51] IE 6,7 で相対URL -&gt; 絶対 URL の変換 - って、なんでですか〜 - subtech ( 版) http://subtech.g.hatena.ne.jp/secondlife/20090624/1245809935

[52] Re: HTML DTD and related problems (rather long) ( ( 版)) http://lists.w3.org/Archives/Public/www-talk/1992JulAug/0017.html

[10] OASIS Open Document Format for Office Applications (OpenDocument) Version 1.2 - Part 1: OpenDocument Schema ( 版) http://docs.oasis-open.org/office/v1.2/os/OpenDocument-v1.2-os-part1.html#a6_1_8_text_a_

The text:a element represents a hyperlink.

[26] OASIS Open Document Format for Office Applications (OpenDocument) Version 1.2 - Part 1: OpenDocument Schema ( 版) http://docs.oasis-open.org/office/v1.2/os/OpenDocument-v1.2-os-part1.html#a10_4_12_draw_a_

[36] XEP-0071: XHTML-IM ( 版) http://www.xmpp.org/extensions/xep-0071.html#security-phishing

To reduce the risk of phishing attacks [30], an implementation MAY choose to:

Display the value of the XHTML 'href' attribute instead of the XML character data of the <a/> element.

Display the value of XHTML 'href' attribute in addition to the XML character data of the <a/> element if the two values do not match.

[37] Inline URLUtils for a and area elements · whatwg/html@bab6591 ( 版) https://github.com/whatwg/html/commit/bab659163757d66177270bd4abe74a58f2732008

[38] Fix #168: <a> without href is not interactive content · whatwg/html@528a223 ( 版) https://github.com/whatwg/html/commit/528a22340a4bdc6ca0b0e190dfd239989123df9b

[54] Integrate with the Referrer Policy spec, part 1 of n ( (domenic著, )) https://github.com/whatwg/html/commit/6a7318072f340ad45229df171245d70d8621c2fe

[55] Linking: borrow HTML attributes, explicitly allow nested links, cleanup ( (AmeliaBR著, )) https://github.com/w3c/svgwg/commit/33f85d2bdd20e7d33eedff77b85b10c8451db397

[57] Two questions about the `<a>` element · Issue #26 · w3c/svgwg () https://github.com/w3c/svgwg/issues/26

[58] Better error handling for nested links · Issue #178 · w3c/svgwg () https://github.com/w3c/svgwg/issues/178

[59] <a> and <area> are not window named objects (ayg著, ) https://github.com/whatwg/html/commit/9c209523143cb97551799e185e2a5d2750854bda

[60] Centralize checks for <a>, <area>, <form>, and <link> (annevk著, ) https://github.com/whatwg/html/commit/f3c354add894e1ac01e3732ff976aa9874a77b3f

[61] [css-display] More thoroughly review the list of SVG elements and put… (tabatkins著, ) https://github.com/w3c/csswg-drafts/commit/1432231d5b5561e6ce030850d4e614ba85913b1e

[62] Remove help cursor from user-agent stylesheet (domenic著, ) https://github.com/whatwg/html/commit/ea3cde3cba3a255e02bd73ef1036f1d2027c400d

[63] Remove help cursor from user-agent stylesheet by domenic · Pull Request #3902 · whatwg/html () https://github.com/whatwg/html/pull/3902

[66] Further tabIndex getter tweaks (domenic著, ) https://github.com/whatwg/html/commit/7ce0b474147ac0574eb3e739f1a9c27e49a249ad

[67] Further tabIndex getter tweaks by domenic · Pull Request #4759 · whatwg/html · GitHub () https://github.com/whatwg/html/pull/4759

[68] Define what tabIndex returns when the tabindex attribute is not set (rakina著, ) https://github.com/whatwg/html/commit/15cf23a55d629e0b1286302c19634833a89292ab

[72] 最近ハイパーリンクのように見えるのに a 要素だけあって href 属性がない (のにクリックするとやっぱり別の URL に飛ばされる) 糞みたいな HTML が量産されてる気がするな。糞みたいなフレームワークが流行るのはよろしくないのだが、 フロントエンドとか称する糞みたいな業界はその辺気にしないからなあ。

[73] まあどうせ半年後には別のフレームワークが流行ってる糞みたいな業界だからなあ、でもその次のフレームワークもどうせ糞なんだよな。