ボタンを作る時のタグの選択肢は
- aタグ
- buttonタグ
- input type="button"
があるがそれぞれどんな時にどれを使えばいいか理解していないかった。
だから今回しっかりと理解するためにいろいろと調べてみた。
結論
クリックで他のページの飛ぶ時→aタグ
クリックでJavascriptを動かすとき→buttonタグ
フォームの送信→buttonタグ
buttonタグが使えないhtml4の時→input type="button"
それぞれの場面について考えていく。
クリックでページ遷移はaタグ
ページ遷移を作動させるにはタグにリンクを記述する必要がある。
その際buttonタグよりaタグの方が記述が少なく済むからだ。
またaタグが最も普及してることも考慮するとaタグの方が無難である。
input type="button"はほとんど使わない
buttonタグと機能はほとんど同じだがinputタグには閉じタグがないため子要素を作る・擬似要素を使うことが出来ないのでデザインのカスタマイズ性が下がってしまう。
擬似要素が使えないとhoverなどのアニメーションが作れない。
有難い事に自分のミスについてご指摘頂きました。
hoverは擬似要素ではなく擬似クラスのためinputにも使えるそうです！
だからaタグを使わないならbuttonタグを使うべきである。
注意事項
aタグの中にbuttonタグを入れてはいけない
参考にしたサイト様
https://www.sejuku.net/blog/82466
https://code-kitchen.dev/html/button/