button要素にはhref属性を持つa要素を(本来は)含めてはいけない。

正しく言うと、インタラクティブな要素を子孫に持ってはいけない。


Firefoxなどはこの仕様に沿い、a要素が持つhrefへはbuttonをクリックしても遷移しないが、
Edge、Chrome、Safariなどは遷移するそうだ。

# 情報源

[Firefoxは他のブラウザと異なりbutton要素内にリンクを置けない実装となっているが、仕様に適合しているのはFirefoxのほうであるらしい。 - Rockridgeのコメント / はてなブックマーク]

[hyperlinks in buttons are probably not a great idea]

↑を読んだ方が圧倒的に早いです。

***

英語では辛いので、英語できないけど読んでメモるよ。

>The [simplest test case]:
>
```html
<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のみとインタラクティブコンテンツになる条件が緩和・厳密化したということでしょうか…？

ググり力が足りず明確な答えは出ませんでしたが、補強の引用を

[a－HTML5タグリファレンス]

> **■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ってなんだって気もしますし、最近は使う気もしますし。

まあ大本の文章を確認することが大事だということですね…。

# 関連薄いリンク

* [HTML Standard 日本語訳]

こっちのほうがよかった

***

自分の


* [(不正だけど)nameとidが被ったアンカー(#value)がどうなるか - Qiita]

不正だけど動く系。

* [Bootstrap3でカーソルをpointerにする - Qiita]

プレースホルダーリンク使いたがってた。

<!------------------- -->

[Firefoxは他のブラウザと異なりbutton要素内にリンクを置けない実装となっているが、仕様に適合しているのはFirefoxのほうであるらしい。 - Rockridgeのコメント / はてなブックマーク]:http://b.hatena.ne.jp/entry/345242886/comment/Rockridge



[hyperlinks in buttons are probably not a great idea]:https://miketaylr.com/posts/2017/09/hyperlinks-in-buttons-are-not-so-great.html

[simplest test case]:https://miketaylr.com/bzla/button-link.html

[Opera Presto]:https://ja.wikipedia.org/wiki/Presto


[HTML is explicit on the subject]:https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element


[4.10 フォーム — HTML5 日本語訳#the-button-element]:https://momdo.github.io/html5/forms.html#the-button-element


[3 セマンティック、構造、HTML文書のAPI群 — HTML5 日本語訳#element-dfn-content-model]:https://momdo.github.io/html5/dom.html#element-dfn-content-model


[interactive content descendant]:https://html.spec.whatwg.org/multipage/dom.html#interactive-content-2


[3 セマンティック、構造、HTML文書のAPI群 — HTML5 日本語訳#interactive-content]:https://momdo.github.io/html5/dom.html#interactive-content


[HTML5入門 - インタラクティブ・コンテンツに属する要素一覧 - Webkaru]:https://webkaru.net/html5/interactive-content/


[HTML5/HTML5の基本/インタラクティブ・コンテンツ - TAG index]:http://www.tagindex.com/html5/basic/interactive.html


[コンテンツカテゴリ - HTML | MDN#Phrasing_content]:https://developer.mozilla.org/ja/docs/Web/HTML/Content_categories#Phrasing_content


[a－HTML5タグリファレンス]:http://www.htmq.com/html5/a.shtml

[HTML Standard 日本語訳]:https://momdo.github.io/html/

[(不正だけど)nameとidが被ったアンカー(#value)がどうなるか - Qiita]:https://qiita.com/khsk/items/a72eff49b66a83e71c42

[Bootstrap3でカーソルをpointerにする - Qiita]:https://qiita.com/khsk/items/4c0f85a0db655c63f497

[^1]: HTML5で省略可になったと見かけるが、以前に必須だったとは見た覚えが無い