如何在html5中对标签进行分组？答案

【问题标题】：How to group labels in html5?如何在html5中对标签进行分组？
【发布时间】：2019-12-02 18:37:44
【问题描述】：

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

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

<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>，还是有更适合它的语义标签？

【问题讨论】：

标签： html semantic-markup

【解决方案1】：

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

<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>

【讨论】：

如果他们已经在一个字段集中怎么办？字段集中的字段集在语义上是否正确？
是的，嵌套它们在语义上是正确的：html.spec.whatwg.org/multipage/…底部有嵌套示例。