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

Question

它是确定有在HTML5头标记中的段落元素？

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

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

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

Answer 1

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

据说,标题元素的正确内容是" 短语内容 ",它是与正常字符数据混合的短语元素.

换句话说,您可以在HTML5中的标题标记内使用以下方便的元素:a,em,strong,code,cite,span,br,img.请在此处查看完整列表.

如果您将尝试验证此标记,W3C验证器将给您以下错误:在此上下文中元素p不允许作为元素h1的子元素.

使用此标记的一个主要缺点是您应该考虑搜索引擎可能会错误地解析您的标题标记并错过重要数据.所以这种做法对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背后最重要的思想是它必须首先是语义,稍后才能进行演示.