正しく言うと、インタラクティブな要素を子孫に持ってはいけない。
Firefoxなどはこの仕様に沿い、a要素が持つhrefへはbuttonをクリックしても遷移しないが、
Edge、Chrome、Safariなどは遷移するそうだ。
情報源
hyperlinks in buttons are probably not a great idea
↑を読んだ方が圧倒的に早いです。
英語では辛いので、英語できないけど読んでメモるよ。
The simplest test case:
<button>
<a href="https://example.com">do cool thing</a>
</button>
Problem is, clicking on an anchor with an href inside of a button does nothing in Firefox (and Opera Presto, which only 90s kids remember).
href属性を持つaアンカーを内包するbuttonをクリックしてもFirefox(とOpera Presto？思い出せば90年代に生まれたブラウザたちだ？)では何も起こらない。
感想の超適当解釈
Soooo, probably not a good idea to follow this pattern. And who knows what it means for accessibility.
動かないのは仕様としては正しいけれど、誰も得しないんじゃない？
根拠
buttonが持てる子孫
HTML is explicit on the subject
つらいですね。
Content model:
Phrasing content, but there must be no interactive content descendant.
らしいですがわからん。
なので、完全一致でなくても日本語訳見ます。
4.10 フォーム — HTML5 日本語訳#the-button-element
コンテンツモデル：
フレージングコンテンツ、ただしインタラクティブコンテンツの子孫が存在してはならない。
buttonはインタラクティブコンテンツの子孫があってはならない？
そもコンテンツモデルとはなんぞやでリンクたどる。
3 セマンティック、構造、HTML文書のAPI群 — HTML5 日本語訳#element-dfn-content-model
コンテンツモデル
コンテンツがその要素の子や子孫として含めなければならないものの、規範的な記述。
なるほど。ひとまず子孫と理解しておきます。
つまり、buttonの内部には書けないタグがあるということですね。
aはインタラクティブコンテンツなのか
interactive content descendant
Interactive content is content that is specifically intended for user interaction.
⇛ a (if the href attribute is present)audio (if the controls attribute is present)buttondetailsembediframeimg (if the usemap attribute is present)input (if the type attribute is not in the Hidden state)labelobject (if the usemap attribute is present)selecttextareavideo (if the controls attribute is present)
まだなんとなく読めますね。条件付きでいろいろあると。
日本語版読んでおきましょう。
版が違うのか、項番変わります。
3 セマンティック、構造、HTML文書のAPI群 — HTML5 日本語訳#interactive-content
3.2.4.1.7 インタラクティブコンテンツ
インタラクティブコンテンツは、特にユーザーとの交流を意図するコンテンツである。
a audio（controls属性が存在する場合） button embed iframe img（usemap属性が存在する場合） input（type属性がHidden状態でない場合） keygen label object（usemap属性が存在する場合） select textarea video（controls属性が存在する場合）
あれ…？aのif条件が欠落している…。
HTML5だから？
HTML5入門 - インタラクティブ・コンテンツに属する要素一覧 - Webkaru
インタラクティブ・コンテンツに属する要素
このカテゴリーに属する要素は次の通りです。
a
audio
button
details
embed
iframe
img
input
keygen
label
menu
object
select
textarea
video
HTML5/HTML5の基本/インタラクティブ・コンテンツ - TAG index
インタラクティブ・コンテンツに属する要素
以下の要素が、このカテゴリーに属する要素となります。
<a> （HTML 5.1ではhref属性がある場合に限る）
<audio> （controls属性がある場合）
<button>
<details>
<embed>
<iframe>
<img> （usemap属性がある場合）
<input> （type="hidden"の場合は除く）
<keygen>
<label>
<object> （usemap属性がある場合）（HTML 5.1では除外）
<select>
<textarea>
<video> （controls属性がある場合）
HTML 5.1では…？
コンテンツカテゴリ - HTML | MDN#Phrasing_content
インタラクティブコンテンツ
インタラクティブコンテンツにはユーザとのやり取りのために固有にデザインされた要素が含まれます。このカテゴリに属する要素には次のものが含まれています: <a>、 <button>、 <details>、 <embed>、 <iframe>、 <keygen>、 <label>、 <select>、 および <textarea>。
いくつかの要素は特定の条件下にある場合にのみこのカテゴリに含まれます:
-
<audio>。controls 属性が存在する場合。 -
<img>。usemap 属性が存在する場合。 -
<input>。type 属性が hidden 状態ではない場合。 -
<menu>。type 属性が toolbar 状態ではない場合。 -
<object>。usemap 属性が存在する場合。 -
<video>。controls 属性が存在する場合。
これは…書き落としているというよりは、HTML5まではa全体がインタラクティブで、5.1からはhrefを持つaのみとインタラクティブコンテンツになる条件が緩和・厳密化したということでしょうか…？
ググり力が足りず明確な答えは出ませんでしたが、補強の引用を
■HTML4.01からHTML5へのバージョンアップによる変更点
HTML5では、a要素にhref属性が指定されていない場合には、プレースホルダーを意味する要素となるとされています。 ここでいうプレースホルダーとは、暫定的に代わりに配置しておくものという程度の意味です。
例えば、コンテンツの一部がまだ作成されていない場合などに、ナビゲーションメニューからリンクを指定するURLが存在しないということがあるかと思います。 そのような場合に、将来的にはリンクメニューが入る予定のその位置に、href属性を持たないa要素を暫定的に配置しておくことができます。
尚、href属性を指定しない場合には、target属性・rel属性・media属性・hreflang属性・type属性も同じく指定できません。
なるほど、5の時点で良さそう。
- HTML4まではa自体が(用途的にhref属性をほぼ持つため？)1インタラクティブコンテンツだった。
- HTML5でhref属性を持たないaはプレースホルダーと定義された
- プレースホルダー(a)=フローコンテンツだから、a自体はインタラクティブコンテンツではないと定義を変更された。
- hrefを持つa属性の動きは変わらずインタラクティブなので、今までaとだけ書かれていた分類に、(href属性を持つ)という条件を加えた
- 古い情報源はa全体がインタラクティブコンテンツと記載され続けている
といった感じでしょうか。憶測ですが。
昔ならhref属性持たないaってなんだって気もしますし、最近は使う気もしますし。
まあ大本の文章を確認することが大事だということですね…。
関連薄いリンク
こっちのほうがよかった
自分の
不正だけど動く系。
プレースホルダーリンク使いたがってた。
-
HTML5で省略可になったと見かけるが、以前に必須だったとは見た覚えが無い ↩