使用 HTML 5 部分 id= 代替 div id= "contacts" 在语义上是否正确"contacts"？

Question

使用section id="contacts"代替div id="contacts"在语义上正确吗？

在一个网页上，我需要添加公司的多个联系人信息。通常我使用div id="contacts，但如果我想尽可能多地使用HTML5标记，在这种情况下使用section id="contacts"合适吗。

或者在此处使用Section元素没有任何好处。

例如，像这样包装多个地址的

<p>
<b>Address 1:</b><br>
9900 Corporate Campus Dr., Suite 3000<br>
Louisville, KY 40223 <br>
<b>Phone:</b> [phone]<br>
<b>Fax: </b>[phone]<br>
</p>
<p>
<b>Address 2:</b><br>
9900 Corporate Campus Dr., Suite 3000<br>
Louisville, KY 40223 <br>
<b>Phone:</b> [phone]<br>
<b>Fax: </b>[phone]<br>

Answer 1

地址元素不能使用表示任意地址(例如。邮寄地址(，除非地址实际上是相关的联系信息。

所以在你的情况下——如果我理解正确的话，这是公司的网站——你应该使用<address>。

Answer 2

在HTML5中，使用<div>和使用<section>都是基于它将包含的内容。如果内容与页面的上下文相关，则可以使用<section>。然而，如果您在标记中封装信息的唯一原因是通过CSS应用样式，那么您将使用<div>。

不要在这里感到困惑；您仍然可以将样式应用于<section>。

---

编辑：似乎对<section>和<div>有些混淆。

注意：section元素不是通用容器元素。当元素是为了造型或方便在编写脚本时，鼓励作者使用div元素。A.一般规则是，只有当元素的内容将在文档的概述

来源：http://dev.w3.org/html5/spec-author-view/the-section-element.html#the-区段元素

---

在您的案例中，您提供了与上下文相关的信息，因此您将使用<section>标记。然而，正如@Knut所指出的，如果地址是相关的联系信息，那么您实际上会将地址封装在<address>标签中。

你可以这样做：

<section id="contact">
    <p>For more information, contact us at one of the following addresses:</p>
    <address>
        <p>9900 Corporate Campus Dr., Suite 3000<br/>Louisville, KY 40223<br/><strong>Phone:</strong> [phone]<br/><strong>Fax: </strong>[phone]</p>
    </address>
    <address>
        <p>9910 Corporate Campus Dr., Suite 5000<br/>Louisville, KY 40223<br/><strong>Phone:</strong> [phone]<br/><strong>Fax: </strong>[phone]</p>
    </address>
</section>

使用<div>而不是<section>的一个例子可能是，如果内容是许多<section>的容器。

<div id="something">
    <section id="one">
        <p>This is some content.</p>
    </section>
    <section id="two">
        <p>This is some other content.</p>
    </section>
</div>

Answer 3

只有当您有类似"联系信息"之类的标题时，才能使用section包装多个地址。如果没有(自然(标题，则必须使用通用块级元素(div(。

此外，每个地址都可以封装在address标签中。(不过我不太确定，因为我觉得address只用于标记电子邮件地址(

---

PS：我看到你在这里错误地使用了b。它应该是span。此外，地址不是一段。因此，p也不应该使用。

Answer 4

因此，我建议您查看schema.org上的微数据。您可以为地址的每一部分、您的公司和其他一切添加特定的语义标记。

这是一个关于如何使用微数据的具体示例和教程：

http://www.htmlgoodies.com/html5/Web-Developer-Tutorial-HTML5-Microdata-3920016.htm#fbid=7JjItyF1dhi

这些是你可能需要的词汇：

http://schema.org/Organizationhttp://schema.org/PostalAddress

Answer 5

我同意@knu的观点，并建议使用多个address元素，因为这些不是任意地址。我也会使用vcard格式。

另请参阅使用HTML标记邮政地址。