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

I've reviewed https://*.com/questions/5542428/why-on-earth-is-address-a-block-level-element already and found that it adds little insight to the matter.

我已经查看了https://*.com/questions/5542428/why-on-earth-is-address-a-block-level-element,发现它对这个问题几乎没有任何了解。

A client gave me a paragraph of plain text, and I'm attempting to optimize it for both user experience and SEO. Here's the relevant snippet, from the middle of the text:

客户给了我一段纯文本,我正在尝试针对用户体验和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>

However, since <address> is a block-level element, the DOM ends up looking like this:

但是,由于

是块级元素,因此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>

and the output looks like this:

输出看起来像这样:

[Several sentences]. Having trouble? Contact

[几句]。遇到麻烦?联系
Jane Doe at jdoe@example.com or (555) 123-4567
between the hours of 9AM and 5PM. [Several sentences].

在上午9点到下午5点之间。 [几句]。

Obviously, this breaks the UX, and isn't valid HTML. My questions are What is the reasoning behind <address> being block-level only, and is there any way I can make it display inline? As you can see, the CSS display:inline attribute/value does nothing to help the situation

显然,这打破了UX,并且不是有效的HTML。我的问题是

仅仅是块级别的原因是什么,有什么方法可以让它显示为内联?正如您所看到的,CSS显示:内联属性/值无助于解决问题

2 个解决方案

#1

Don't use the <address> element for generic addresses, instead use the Person schema with Microdata, or the hCard Microformat, or RDFa. Here's a example with Microdata:

不要将

元素用于通用地址,而是将Person模式与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>

You can test the data extraction with Google Webmaster Tools (scroll down to the section titled 'Extracted structured data').

您可以使用Google网站站长工具测试数据提取(向下滚动到标题为“提取的结构化数据”部分)。

#2

Why can't address elements be in p elements?

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

Because the HTML specification defines them that way.

因为HTML规范以这种方式定义它们。

The address element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole.

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

What this means is that <address> elements aren't meant to be used to mark up any old address. The implication is that you'd be using the <address> as a means of contacting the source of the article. Within an article, discussing "123 fourth street" would not merit using an <address> element.

这意味着

元素并不意味着用于标记任何旧地址。这意味着您将使用

作为联系文章来源的方法。在一篇文章中,讨论“123第四街”不值得使用

元素。

If you want to describe it as an address for styling purposes, you could always give it a class as:

如果您想将其描述为用于样式目的的地址,您可以始终将其作为类:

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

#1