質問: か? か? その使い分けについて、基準がわからず困っっっています。 以下の例を含め、か? か? という問題について、みなさまのご見解をお聞かせ頂けませんでしょうか。 ### 例:twitter たとえばTwitterのフォローボタンはですが、これはの方が良いのではないでしょうか? なぜなら、 →「フォロー中かどうか」という状態をデータ属性などで作らなければならない。 →作らなくてもチェック状態は取得できる。 ので、の方が手間が省けるのではと考えました。 ### 例:teratial teratailの通知アイコンなんでですけど、これは役割が明示されず、あまり良くないですよね? それとも簡略されていてむしろ良いのでしょうか?
回答: > > たとえばTwitterのフォローボタンはですが、これはの方が良いのではないでしょうか? > > > `input` 要素のチェックボックスは、一般的には、状態の選択という**入力を行なうため**に用いられ、選択に伴って実行される動作はありません。たとえば、「チェックボックスをクリックしたらアカウントの登録が完了する」といった動作をする Web サイトはあまり存在しないと思います。 > > The input element represents a type data field, usually with a form control to allow the user to edit the data. > > > 参考: HTML Standard - § 4.10.5 The input element 一方でボタンは、一般的には、押下することで**特定の動作を実行する**ものです。 > > GUIのボタンは、現実世界における押しボタンと同様に「押す」ことで何かの操作を行なう為のコンピュータ画面上の表現である。 > > > 参考: ボタン (GUI) - Wikipedia) Twitter のフォローボタンが行ないたいことは、ただの状態の切り替えではなく、「フォローする」、「フォローを解除する」という動作です。そのため、状態を選択するだけのチェックボックスではなく、何かの動作を起こすものとして、 `button` 要素を使用するほうがより望ましい、と考えたのかもしれません。 > > teratailの通知アイコンなんでですけど、これは役割が明示されず、あまり良くないですよね? > > > 検討の結果、「通知アイコンの部分はボタンではないため、 `button` 要素は不適切」という結論になったのか、通常はすべて `div` 要素で記述するという規則になっているのか、本当のところはわかりません。 teratail にお問い合わせすることで、なぜ `div` 要素が使われているのかがわかるかもしれません。