HTMLのlabelラベルタグは、inputやtextareaなどの入力欄に対してキャプション（説明）をつけるために使います。おもに「何を入力する欄なのか」が分かるように、テキストや画像を入れます。
・labelタグのメリット
その１：ラベルをクリックすると入力欄にフォーカス
説明：入力欄自体をクリックしなくても、labelタグ内のテキストをクリックすれば、紐づく入力欄にフォーカスがあたります。
補足：labelの使用は、チェックボックスやラジオボタンだと特に重要です。チェック部分（□）は小さく（特にスマホ）、クリックやタップをしづらいからです。
その２：アクセシビリティの向上
説明：ユーザーは「何を入力する欄なのか」をlabelのテキストから把握することができます。
・labelタグの基本的な使い方
まず理解しておきたいのは「どのlabelが、どの入力欄（input,textarea）に対応するのか」というひも付けの仕方です。ひも付け方には2パターンあります。
その１：labelの中にinputを入れてひも付け
説明：入力欄も、説明文や項目名などのテキストも、合わせてlabelの中に入れます。
その２：「label for」と「input id」で紐付け
説明：label for="ID"とinput id="ID"を合わせると、お互いが別の場所にあっても、ひも付くようになります。
使い方その１：ラベルに画像を使用する
説明：label内には、div、span、imgなど、さまざまな要素を入れることができます。labelに囲まれた部分がクリック可能領域になります。
・labelを使うときの注意点
その１：ボタンやリンクを含めない
説明：labelの中に、リンク（a）やボタン（button）は入れないようにしましょう。これらの要素はページの遷移や画面の変化を伴うため、ラベルをクリックしたときに入力欄をアクティブにするのが難しくなるためです。
その２：見出しタグを含めない
説明：一部の読み上げソフトでは、見出しタグ内のテキストを「セクション（文章のまとまり）のタイトル」として認識します。
「入力欄の説明」の役割をするlabelと、「セクションのタイトル」の役割をする見出しタグが混在すると、その部分の役割が正しく認識されない可能性があります。
その３：labelは入れ子にできない
・CSSでデザインをカスタマイズする
その１：縦並び
デフォルトではinputやlabelは、ブロックを作らない（改行が入らない）ため、横並びになります。
➀HTMLだけで縦並びに
手っ取り早く縦並びにするためには、HTMLでボタンそれぞれを
➁CSSで縦並びに
CSSで以下のように{ display: block }指定します。
➂labelの幅を変える
labelは、いわゆるインライン要素にあたるため、デフォルトではwidthを指定しても効きません。幅を変えたいときはwidthだけでなく、display: blockも合わせて指定するようにしましょう。