<button>ってなんなんだ？

業務でコードレビューをしていたところ、以下のようなソースに出会った。

<button>詳しく見る</button>

JavaScriptを用いて、押下することで詳細な説明や注意事項を表示したモーダルが表示される機能が実装されている様子。
何気なしに「submitボタンでないのであれば、type="button"を追加してください」とレビューしたところ、「submitボタンってなんですか？」とのお返事。学習も兼ねて色々と調べ直すことにした。

<button>要素にはtypeという属性値が存在し、初期値はsubmit。
type="submit"を持つ<button>要素は、親として<form>要素を持つ場合、その中に含まれる<input>情報を送信することができる。

その他、選択できる値は以下の通り。

参考：HTML Standard

そもそも<button>要素で生成されるボタンは、<form>要素を操作するためのボタンということになる。
コードレビューでいただいた、「submitボタンとは？」という質問に回答するのであれば、「フォームを送信（submit）するためのボタン」がsubmitボタンだということになる。

では、<form>要素を親として持たない<button>要素はどのような振る舞いをするか。

注目すべきはtype="button"。
概要は、

何もしない。

文字通り、type="button"を付与された<button>要素は何もしない。
仮に親として<form>要素を持っていたとしても、データの更新や遷移を行わない。
要するに、古いソースコードに散見される

<div onClick="...">詳しく見る</div>
<a href="javascript:void(0)">詳しく見る</a>

と同じ振る舞いをするわけだ。

<div>要素や<a>要素を用いたレガシーコードが良くないとされる理由は、主に以下である。

• ページ遷移を伴わない<a>要素は、そもそも「リンク」としての意味合いを持たない
• <div>要素にはデフォルトだとフォーカスがないため、タブフォーカスでページを巡回した際、ボタンをスキップしてしまう

HTML5を正しく活用するためにも、リンクでなく、押下し、かつフォームパーツでないボタンには、<button type="button">を使うべきだと言えるだろう。