css - 在 HTML5 的标题标签内放置段落元素是否有效(H1 内的 P)？

Question

在 HTML5 的 header 标签中包含段落元素是否可以？

换句话说:这个标记在 HTML5 中是否正确？使用它有什么缺点？

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

如果不是，我如何使用 CSS 正确设置这些元素的样式？

Answer 1

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

It is stated header 元素的正确内容是“短语内容”，即 phrasing elements与普通字符数据混合。

换句话说，您可以在 HTML5 的 header 标签内使用以下方便的元素:a、em、strong、code、cite、span、br、img。 See the full list here .

The W3C validator如果您尝试验证此标记，将会出现以下错误:Element p not allowed as child of element h1 in this context.

您应该考虑使用此标记的一个主要缺点是 search engines 可能会错误地解析您的标题标签并遗漏重要数据。所以这种做法可能对 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>

参见 the jsfiddle为此。

如前所述，span 标签在标题元素 (h1-h6) 内完全有效。您可以对其应用“display: block;”样式，使其呈现为 block 级元素(每个元素在不同的行上)。它将为您保存一个 br 标签。

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

是的，作为stUrb said在标题中使用段落在语义上是不正确的。 HTML 背后最重要的思想是它必须是首先是语义，然后是表示。