HTMLの<label>タグの正しい使い方 ～for属性ありと内包タグの違い～

こんにちは、DeepBlend45です。
今回はHTMLのフォームでよく使うタグについて学んだことをまとめました。
「<label for="id">」と「<label><input></input></label>」はどう違うの？という疑問が浮かんだので、実際に調べて学んだことを紹介します！

1. <label for="id">とは？

<label for="name">名前</label>
<input id="name" type="text">

for属性にinputのidを指定して関連付ける
ラベルをクリックすると対応する入力欄が選択される

2.<label>タグ内に<input>を含める方法

<label>
  名前
  <input type="text">
</label>

入力要素をlabelタグで囲むことで関連付けができる
for属性が不要

3. どちらも同じ意味を持つ

どちらもラベルと入力欄の関連付けとして機能し、アクセシビリティ向上に役立つ
好みや状況に応じて使い分けられる

まとめ

タグはユーザー体験とアクセシビリティのためにとても重要。
for属性を使う場合は、対応するinputのidを必ず一致させるのがポイントですね。
どちらの書き方でもOKなので、状況に合わせて使い分けが大事ということがわかりました！

最後に

最後まで読んでくれてありがとうございます！
これからも実際につまづいたことや疑問点について自分なりに紹介していきたいと思います！
どうぞよろしくお願いします^^