HTML5中在标题标签内使用段落元素（如在H1内使用P）是否有效？

Question

HTML5中在标题标签内使用段落元素（如在H1内使用P）是否有效？

35

在HTML5中，标题标签内使用段落元素是否合适？换句话说，这种标记在HTML5中是否正确？使用此方法有哪些缺点？

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

如果不行，我该如何使用CSS正确地为这些元素设置样式？

- Slava Fomin II

尽管他提供了一个好答案，但他应该将其发布在**原始问题**上。他知道它的存在，因为他刚刚对其中一个答案进行了建议性编辑。 - Josh Crozier

1

我只是想更广泛地解决这个问题，因为我经常在实践中看到这种情况，而且我在谷歌或SA上找不到合适的答案。我认为这可以节省一些时间给不那么有经验的开发人员。所谓的“原始”问题对于我的扩展回答来说太狭窄了。再次强调，我的问题具有更广泛的意义。 - Slava Fomin II

常识告诉你这不是，据我所知，这并不是HTML flagrantly违反常识的领域之一，尽管它在“段落”这个词的定义上与常规用法略有不同。（我意识到这是自问自答;我的评论不是针对你，而是针对任何可能自问自答的人，并旨在鼓励他们思考一下。） - BoltClock

1

React曾经在我使用p标签内嵌套div时对我大喊一声，从那以后我已经吸取了教训，因此我认为这种做法对SEO来说也不是理想的。 - codmitu

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Slava Fomin II · Accepted Answer

实际上不是这样的，根据W3C标准，这种标记是不正确的。应该避免使用它。

据称, 标题元素的正确内容是“短语内容”，即短语元素与普通字符数据混合。

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

W3C验证器会给你以下错误，如果你尝试验证此标记：在此上下文中，元素h1的子元素p不被允许。

使用这种标记的一个主要缺点是，搜索引擎可能会错误地解析您的标题标签并错过重要数据。因此，这种做法对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。

如前所述，span标签在标题元素（h1-h6）内是完全有效的。你可以将"display: block;"样式应用于它，使其呈现为块级元素（每个元素在不同行上）。这将节省br标签。

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

是的，正如stUrb所说的，在标题中使用段落并不符合语义学正确性。HTML背后最重要的思想是必须先考虑语义学，而后再考虑展示。