Question

HTML5中的标题标记内是否可以使用段落元素？

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

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

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

Answer 1

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

It is stated标题元素的正确内容是“短语内容”， phrasing elements与普通字符数据混合。< / p>

换句话说，您可以在HTML5中的标题标记内使用以下方便的元素： a，em，strong，code，cite，span，br，img 。 See the full list here

如果您尝试验证此标记，

The W3C validator会给您以下错误：在此上下文中，元素p不允许作为元素h1的子元素。

您应该考虑使用此标记的一个主要缺点是Search Engines可能会错误地解析您的标题标记并错过重要数据。所以这种做法对于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背后最重要的思想是它必须首先是语义，稍后才能呈现。

HTML5中的标题标记（H1内部的P）中是否有段落元素是否有效？

1 个答案: