html - 如何在html5中对标签进行分组？

Question

如何以语义方式对标签进行分组？例如。:

如果我正在制作一个关于最喜欢的食物的表格，例如:

<form> 
  <label for="food1">Rice</label>
  <input type="checkbox" id="food1" name="food"><br>
  <label for="food2">Pasta</label>
  <input type="checkbox" id="food2" name="food"><br>
  <label for="food3">Meat</label>
  <input type="checkbox" id="food3" name="food"><br><br>
  <input type="submit" name="submit" value="submit">
</form>

我会放一个 <h2>Favorite foods</h2>在它们之前或者是否有更适合语义的标签？

Answer 1

这个问题很笼统，归结为偏好，但您可以使用 fieldset标记对字段进行分组，然后使用 legend header 的标签。

https://www.w3schools.com/tags/tag_fieldset.asp

https://www.w3schools.com/tags/tag_legend.asp

<form>
  <fieldset>
    <legend>Favorite Foods</legend>
    <label for="food1">Rice</label>
    <input type="checkbox" id="food1" name="food"><br>
    <label for="food2">Pasta</label>
    <input type="checkbox" id="food2" name="food"><br>
    <label for="food3">Meat</label>
    <input type="checkbox" id="food3" name="food"><br><br>
  </fieldset>
  <input type="submit" name="submit" value="submit">
</form>