【问题标题】:Is it semantically correct to use a <p> for text that technically is not a paragraph对技术上不是段落的文本使用 <p> 在语义上是否正确
【发布时间】:2017-07-14 20:06:32
【问题描述】:

通常不是在我为网站编写标记时,只要出现任何形式的文本,我就会使用&lt;p&gt; 标签。无论是博客文章中的段落

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Nam eget mattis enim. Ut tempus pulvinar est et consectetur. 
    Sed malesuada ex et augue vulputate congue sit amet ut nunc. 
</p>

或者是一小段信息,例如页脚中的地址、页眉中的电话号码,甚至是警告消息。

<p>0191 482 4003</p>
<p>123 Random Address Road</p>
<p>Wait! An error has occurred.</p>

从技术上讲,我不相信这些是文本的“段落”,而是具有自己特定上下文的小型 sn-ps。

这条经验法则也有例外。例如,如果文本内容是时间(例如,在时钟小部件中),我将使用 &lt;time&gt; 小部件。

是否有更“语义正确”的方式来显示技术上不是段落的文本?在某些情况下可能需要更具体的 HTML 标记,例如 &lt;time&gt; 标记?

【问题讨论】:

标签: html accessibility semantic-markup


【解决方案1】:

元素的语义由 html 规范描述。我认为可以公平地说,语义上正确的用法是与规范中的内容一致的用法。

有两种 html 规范,但在这种情况下,它们提供了完全相同的段落描述:

段落通常是一系列措辞内容,由一个或多个讨论特定主题的句子组成一个文本块,如排版,但也可用于更一般的主题分组。例如,一个地址也是一个段落,就像一首诗中的表格、署名或节的一部分一样。 https://html.spec.whatwg.org/multipage/dom.html#paragraphs, https://www.w3.org/TR/html5/dom.html#paragraphs

您提供的示例符合该描述,因此我会说它们在语义上是正确的用法。

但是,对于页眉中的电话号码或页脚中的地址,事实证明可能存在语义上更正确的元素。

地址元素:

地址元素表示其最近的文章或正文元素祖先的联系信息。如果那是 body 元素,那么联系信息将应用于整个文档。 https://html.spec.whatwg.org/multipage/sections.html#the-address-elementhttps://www.w3.org/TR/html5/sections.html#the-address-element

<address></address>

例如,如果您要创建一个关于地址历史记录的网页,您将在正文中使用段落标签来展示历史地址,但在页眉/页脚中您将使用地址标签来标记您的联系信息作为页面作者。

【讨论】:

    猜你喜欢
    相关资源
    最近更新 更多
    热门标签