27

可以在 HTML5 的标题标签中包含段落元素吗？

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

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

如果没有，我怎样才能用 CSS 正确地设置这些元素的样式？

4

1 回答 1

42

实际上，没有。根据 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>

请参阅jsfiddle。

As stated before, span tag is perfectly valid inside of a header elements (h1-h6). And you can apply "display: block;" style to it to make it render as a block level element (each on a different line). It will save you a br tag.

Of course you will need to change this CSS selectors according to your use case.

And yes, as @stUrb said it's not semantically correct to use paragraphs inside of a headings. The most important idea behind HTML is that it must be a semantics first, presentation later.

于 2013-11-04T23:50:12.283 回答