labelとinputタグについて

labelタグとinputタグは紐付けが必要

紐付け方法1: labalのfor属性とinputのid属性を同じにする

<label for="cheese"> 
    Do you like peas? 
</label> 
<input type="checkbox" name="cheese" id="cheese" /> 

メリット: cssで横並びにしやすい
デメリット: labalのfor属性とinputのid属性を指定する必要がある

紐付け方法2: labelタグでinputタグを囲む

<label> 
  Do you like peas? 
  <input type="checkbox" name="peas" /> 
</label> 

メリット: labalのfor属性とinputのid属性を指定する必要がない
デメリット: cssの組み方が限られてしまう(flexboxでの横並びができないなど)

参考: https://developer.mozilla.org/ja/docs/Web/HTML/Element/label