每个相关列表的多个标题的 HTML 语义结构是什么？

Question

我有一个方向部分，上面描述了地址、phone#、电子邮件和服务date/time。

我想让它看起来像下面这样：

我的代码目前是这样的：

<div class="content">
  
  <section>
    <h2>address:</h2>
    <p>123 Beach rd. Brakersville IL, 60054</p>
  </section>
  
  <section>
    <h2>phone:</h2>
    <p>(555)555-5555</p>
  </section>
  
  <section>
    <h2>email:</h2>
    <a href="#">madeupemail@gmail.com</a>
  </section>
  
  <section>
    <h2>service:</h2>
    <p>Fridays - 7:30pm to 8:30pm</p>
    <p>Sundays - 11am to 1pm</p>
  </section>
  
</div>

我使用标题 <h2> 来关联以下同级 <p><a> 标签，所有标签都包含在 <section> 标签中，因此它不与任何其他同级部分相关。

对我来说代码看起来不对。他们是解决这个问题的更好方法还是很好？ <section> 标签的使用是否正确？

Answer 1

section 元素是一个分段内容元素，即每个 section 在文档大纲中创建一个条目（如果您省略 section 但保留h2).
但这可能不是您想要的，尤其是当内容太短时（例如，只是一个电话号码）。

您可以改用 dl element：

<dl>
  <dt>Address</dt>
  <dd>…</dd>

  <dt>Phone</dt>
  <dd>…</dd>

  <dt>Email</dt>
  <dd>…</dd>

  <dt>Service</dt>
  <dd>…</dd>
</dl>

（虽然开放时间可能不应该是该列表的一部分，因为所有其他项目都是关于联系方式的。）

每个相关列表的多个标题的 HTML 语义结构是什么？

What's the HTML semantic structure of multiple titles with each single related list?

html

title

semantic-markup