将段落元素放在HTML5的标题标记内（H1内的P）是否有效？

Question

将段落元素放在HTML5的标头标记中可以吗？

换句话说：此标记在HTML5中正确吗？使用此功能有什么缺点？

<h1>
    <p class="major">Major part</p>
    <p class="minor">Minor part</p>
</h1>

如果没有，如何使用CSS正确设置此元素的样式？

Answer 1

其实没有 根据W3C，此标记不正确。您应该避免使用它。

可以说，标题元素的正确内容是“
短语内容 ”，即 与常规字符数据混合的 短语元素 。

换句话说，您可以在HTML5的标头标记内使用以下便捷元素： a，em，strong，code，cite，span，br，img
。在这里查看完整列表。

如果您尝试验证此标记，则W3C验证器将给您以下错误：
在这种情况下，元素p不允许作为元素h1的子元素。

您应该考虑的使用此标记的一个主要缺点是，搜索引擎可能会错误地解析您的标题标记并丢失重要数据。因此，这种做法可能对SEO不利。

如果您希望获得更好的SEO结果，则最好在标题元素内仅包含文本数据。但是，如果您还需要应用某些样式，则可以使用以下标记和CSS：

<h1>
    <span class="major">Major part</span>
    <span class="minor">Minor part</span>
</h1>

<style type="text/css">
    h1 span {
        display: block;
    }
    h1 span.major {
        font-size: 50px;
        font-weight: bold;
    }
    h1 span.minor {
        font-size: 30px;
        font-style: italic;
    }
</style>

如前所述， span 标签在标头元素（h1-h6）内完全有效。您可以对其应用“ display：block;
”样式，使其呈现为块级元素（每个元素都在另一行上）。它将为您节省一个 br 标签。

当然，您需要根据用例更改此CSS选择器。

是的，正如@stUrb所说，在标题内使用段落在语义上是不正确的。HTML背后最重要的想法是，它必须首先是 语义，然后是表示 。