[8] HTML の a
要素は、
アンカー (錨) を定義します。アンカーとは、
リンクの端点 (始点や終点) のことです。
元々 a
要素は始点にも終点にも使えるように定義されましたが、
現在は始点として使う
(終点には id
属性を使う)
のが普通になっています。
[22] 仕様書:
A
element
IW:HTML4:"struct/links.html#edef-A"(%inline;)* −(a
)
(歴史的変遷 https://suika.suikawiki.org/www/2004/html/content-a)%inline
な文脈
(歴史的変遷 https://suika.suikawiki.org/www/2004/html/classes)HTMLAnchorElement
a
要素の内容属性[11] a
要素はアンカーを定義します。
name
属性や id
属性を使うと、
終点アンカーにすることができます。 href
属性を使うと、始点アンカーにすることができます。
この3つの属性は、1つも使わなくても構いませんし、3つとも使っても構いません。
[70] HTMLElement
,
HTMLDatabinding
[1] a
要素の子孫要素に a
要素は存在できません
XHTML 1.0。
[2] つまり、a
要素の入れ子は禁止されています。なのにした場合の挙動は未定義ですが、可能性としては
a
要素の部分はリンク先が外側と違う、みたいな。a
要素を無視する。a
要素を無視する。a
要素を、内側の 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ブラウザのリンク一覧は、
一覧中の項目を選ぶと本文中の対応する部分がどこか表示されるくらいの機能を備えているくらいでないと駄目でしょう。)
[39] ハイパーリンクの処理も参照。
[14] HTML 4 仕様書の触れるレンダリング例:
[21]
a
要素によって定義されたリンクを活性化すると、
UA は通常リンクをたどります HTML 4 17.11.2。
[41] ハイパーリンクの処理も参照。
[9] 今更不思議マーク付けの説明なんて読んでも驚きはしないと
思っていたのですが、 <a name="hogehoge">
で閉じタグ
</a>
は無いのが普通とかいうのを読んで驚いてしまいました:-)
<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 の空要素の構文を使ったものが登場しまして、
Gecko が HTML として構文解析すると /
はごみとみなされるので同じ現象が発生します。
[34]
a
要素型は、HTMLの最大の特徴の一つですから、
HTMLの一番初めから存在した要素型だと考えられます。
[35] Line Mode Browserには、1991年2月の段階で既に
href
属性とname
属性が実装されています。
2月27日には要素内でタグが使えるようになりました。
HTML DTD issues, Dan Connolly, , , https://lists.w3.org/Archives/Public/www-talk/1992NovDec/0068.html
[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)
[79] HTML TADS deviations from standard HTML specifications, , https://www.tads.org/t3doc/doc/htmltads/deviate.htm#Achanges
[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. ~~~~~~~~~~~~
...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...
<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 -> 絶対 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
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_
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] まあどうせ半年後には別のフレームワークが流行ってる糞みたいな業界だからなあ、でもその次のフレームワークもどうせ糞なんだよな。