Html 在 HTML5 中的标题标签中包含段落元素（H1 中的 P）是否有效？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19779519/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it valid to have paragraph elements inside of a heading tag in HTML5 (P inside H1)?
提问by Slava Fomin II
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?
换句话说：这个标记在 HTML5 中是否正确？使用它有什么缺点？
<h1>
<p class="major">Major part</p>
<p class="minor">Minor part</p>
</h1>
If not, how can I style this elements with CSS correctly?
如果没有，我如何正确地使用 CSS 设置这些元素的样式？
回答by Slava Fomin II
Actually, no. This markup is not correct according to W3C. You should avoid using this.
实际上，没有。根据 W3C，此标记不正确。你应该避免使用它。
It is statedthat the correct content for header elements is a "phrasing content", which is phrasing elementsintermixed with normal character data.
据称，标题元素的正确内容是“词组内容”，即与正常字符数据混合的词组元素。
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.
换句话说，您可以在 HTML5 中的标题标签内使用以下方便的元素：a, em, strong, code, cite, span, br, img。在此处查看完整列表。
The W3C validatorwill 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.
如果您尝试验证此标记，W3C 验证器将给您以下错误：在此上下文中，不允许元素 p 作为元素 h1 的子项。
The one major drawback of using this markup that you should consider is that Search Enginescan incorrectly parse your heading tag and miss important data. So this practice can be bad for SEO.
您应该考虑使用此标记的一个主要缺点是搜索引擎可能会错误地解析您的标题标签并错过重要数据。所以这种做法可能对SEO不利。
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:
如果您想要更好的 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>
See the jsfiddlefor this.
请参阅jsfiddle。
As stated before, spantag 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 brtag.
如前所述，span标签在标题元素 (h1-h6) 内是完全有效的。并且您可以对其应用“ display: block;”样式以使其呈现为块级元素（每个在不同的行上）。它将为您节省一个br标签。
Of course you will need to change this CSS selectors according to your use case.
当然，您需要根据您的用例更改此 CSS 选择器。
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.
是的，正如@stUrb 所说，在标题中使用段落在语义上是不正确的。HTML 背后最重要的思想是，它必须是先语义，后呈现。
