html - 为什么地址元素不能在 p 元素中?

标签 html dom seo paragraph

我已经审阅过 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> 是 block 级元素,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>

输出如下:

[Several sentences]. Having trouble? Contact

Jane Doe at jdoe@example.com or (555) 123-4567

between the hours of 9AM and 5PM. [Several sentences].

显然,这破坏了用户体验,并且不是有效的 HTML。我的问题是 <address> 仅是 block 级的原因是什么,有什么方法可以让它内联显示?正如您所见,CSS display:inline 属性/值对帮助情况

最佳答案

Why can't address elements be in p elements?

Because the HTML specification defines them that way .

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>元素并不意味着用于标记任何旧地址。这意味着您将使用 <address>作为联系文章来源的一种方式。在一篇文章中,讨论“123 fourth street”不值得使用 <address>元素。

如果您想将其描述为地址以用于样式目的,您总是可以给它一个 class作为:

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

关于html - 为什么地址元素不能在 p 元素中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15953055/

相关文章:

html - 为什么每种颜色都不会填充我的菜单栏中的相应框?

javascript - 如何在ajax返回后完全从dom中删除?

symfony1 - 为什么 meta 描述在 view.yml 中被填满了却还是空的?

wordpress - Google 将我的网站编入索引 - 标题错误,我该如何解决

seo - 桌面版、移动版和 AMP 版网站

javascript - anchor 链接的平滑滚动不起作用

html - Bootstrap 导航栏折叠和可见部分

javascript - 加载的 div Accordion 在窗口而不是容器 div 中打开

javascript - switch 内的小 JS 类型错误(不是函数)

javascript - 选择隐藏其子元素的父元素