在HTML5（P里面H1）的标题标记中有段落元素有效吗？ [英] Is it valid to have paragraph elements inside of a heading tag in HTML5 (P inside H1)?

问题描述

在HTML5中的标题标签中是否有段落元素可以吗？

Is it ok to have paragraph elements inside of a header tags in HTML5?

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

In other words: is this markup correct in HTML5? What are the drawbacks of using this?

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

如果没有，我如何使用CSS正确地设置这些元素？

If not, how can I style this elements with CSS correctly?

推荐答案

实际上，没有。根据W3C，这种标记是不正确的。您应该避免使用此功能。

Actually, no. This markup is not correct according to W3C. You should avoid using this.

标题元素的正确内容是短语内容，这是 短语元素与正常字符数据混合。

It is stated that the correct content for header elements is a "phrasing content", which is phrasing elements intermixed with normal character data.

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

In other words you can use the following convenient elements inside of a header tag in HTML5: a, em, strong, code, cite, span, br, img. See the full list here.

如果您尝试验证此标记，W3C验证器会向您发送以下错误： strong>元素p不允许在此上下文中作为元素h1的子元素。

The W3C validator will give you the following error if you will try to validate this markup: Element p not allowed as child of element h1 in this context.

使用此标记的一个主要缺点是，您应该考虑的是搜索引擎可能会错误地解析您的标题标记并漏掉重要数据。因此，这种做法对搜索引擎优化可能有害。

The one major drawback of using this markup that you should consider is that Search Engines can incorrectly parse your heading tag and miss important data. So this practice can be bad for SEO.

如果您想要一个更好的SEO结果，这是一个很好的做法，只包括一个标题元素内的文本数据。但是，如果您还需要应用一些样式，可以使用以下标记和CSS：

If you would like a better SEO results it is a good practice to include only textual data inside of a heading elements. But, if you also need to apply some styles, you can use the following markup and 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 。

如前所述， span 标记在标题元素（h1-h6）内完全有效。您可以对其应用 display：block; 样式，以使其呈现为块级元素（每个在不同的行）。

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.

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

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

是的，因为@stUrb说在语法上使用段落里面的语法不是正确的。 HTML背后最重要的想法是它必须是语义优先，稍后显示。

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.

这篇关于在HTML5（P里面H1）的标题标记中有段落元素有效吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！