Question

我一直想知道<p>元素在语义上对于少量文本是否正确。

当我想到一个段落时，我实际上想象了一大块文本。

在下面的示例中，我使用<p>元素在注册表单中显示用户输入密码的密码强度。

<div class="inputs">
    <div class="field">
        <input id="firstname" type="text" name="firstname" placeholder="First" />
        <input id="lastname" type="text" name="lastname" placeholder="Last" />
    </div>
    <div class="field">
        <input id="email" type="email" name="email" />
    </div>
    <div class="field">
        <input id="email-confirm" type="email" name="email" autocomplete="off" />
    </div>
    <div class="field">
        <input id="password" type="password" name="password" />
        <p>Password strength: Weak</p>
    </div>
</div>

Answer 1

HTML5规范说明了

段落通常是一段构成块的短语内容一个或多个讨论特定主题的句子的文本，如在排版中，但也可以用于更一般的主题分组。例如，地址也是一个段落，也是一个部分一首诗中的形式，一个副词或一节。

还

注意：虽然段落通常由视觉媒体表示与相邻块物理分离的文本块通过空白行，样式表或用户代理将是平等的有理由以不同的方式提出段落休息时间使用内联pilcrows的实例（¶）。

从上面可以得出的唯一结论是，这不是<p>在语义上的正确使用，因为它不是将任何内容组合在一起。

在这种情况下使用语义中立的<span>或者更具体的内容（例如<label>）会更合适。

另一方面，<div class="field">元素用于对控件进行分组并在视觉上将相邻组分开，因此将<div>替换为<p>在语义上是合适的

Answer 2

有不同的意见，但我总是使用<p>来获取彼此相对的文本内容块。这通常是一个段落，但没有什么可以说它不能是一个短段。如果你有几个句子在一起，使用段落标记就可以了。

在<p>Password strength: Weak</p>的示例中，我认为<label>或<dd>更合适，因为您要将该数据与<input>字段相关联。

是少量文本语义正确的<p>元素</p>

2 个答案: