Question

我已经对https://stackoverflow.com/questions/5542428/why-on-earth-is-address-a-block-level-element进行了审核，发现它对此事的认识不足。

客户端给了我一段纯文本，我正在尝试针对用户体验和SEO进行优化。这是相关的片段，从文本中间开始：

<p>[Several sentences]. Having trouble? Contact <address style="font-style:normal;display:inline">Jane Doe at <a href="mailto:jdoe@example.com">jdoe@example.com</a> or <a href="callto:5551234567">(555) 123-4567</a></address> between the hours of 9AM and 5PM. [Several sentences].</p>

但是，由于<address>是块级元素，因此DOM最终看起来像这样：

<p>[Several sentences]. Having trouble? Contact </p>
<address style="font-style:normal;display:inline">Jane Doe at <a href="mailto:jdoe@example.com">jdoe@example.com</a> or <a href="callto:5551234567">(555) 123-4567</a></address>
between the hours of 9AM and 5PM. [Several sentences].<p></p>

，输出如下：

[几句话]。遇到麻烦？联系
Jane Doe，电子邮件：jdoe@example.com或(555)123-4567
在上午9点至下午5点之间。 [几句话]。

显然，这打破了UX，并且不是有效的HTML。我的问题是 <address>仅仅是块级别的原因是什么，有什么方法可以让它显示内联？正如您所看到的，CSS display:inline属性/值无助于解决问题

Answer 1

为什么无法在p元素中处理元素？

Because the HTML specification defines them that way

address元素表示其最近的article或body元素祖先的联系信息。如果这是body元素，则联系信息将作为整体应用于文档。

这意味着<address>元素并不意味着用于标记任何旧地址。这意味着您将使用<address>作为联系文章来源的方式。在一篇文章中，讨论“123第四街”不值得使用<address>元素。

如果您想将其描述为造型用途的地址，您可以随时将其class作为：

<span class="address">123 fourth street</span>

Answer 2

请勿将<address>元素用于通用地址，而应将Person schema与Microdata，hCard Microformat或RDFa一起使用。以下是Microdata的一个例子：

<p itemscope itemtype="http://schema.org/Person">
    [Several sentences]. Having trouble? 
    Contact <span itemprop="name">Jane Doe</span> at 
    <a itemprop="email" href="mailto:jdoe@example.com">jdoe@example.com</a>
    or <a itemprop="telephone" href="tel:5551234567">(555) 123-4567</a> 
    between the hours of 9AM and 5PM.
    [Several sentences].
</p>

您可以test the data extraction with Google Webmaster Tools（向下滚动到标题为“提取的结构化数据”的部分）。

为什么不能在p元素中处理元素？

2 个答案: