嵌套块级元素 标签......是对还是错?

问题描述 投票:63回答:6

<div>标记中嵌套<p>或任何其他块级元素在语法和语义上是否正确。我在谈论HTML4 Transitional DTD。

如果没有那么可以改为使用<span style="display: block">代替吗?

html css
6个回答
87
投票

从语法上讲,div中的p在所有HTML标准中都是无效的。此外,当使用符合标准的HTML解析器时,不可能在DOM中的<div>中放置<p>元素,因为打开的<div>标记将自动关闭<p>元素。

从语义上讲,正确的选择取决于您标记的内容。您需要至少显示一个完整的段落样本以及可能的周围内容,以确保提供足够的信息以确定正确的语义标记。

然而,鉴于<div><span>都是免费的语义,并且CSS绝不能改变它,如果你确定<p>标签的内容真正形成一个段落,并且<span style="display: block">可以获得你的表现效果寻求,然后这是有效的HTML,将是一个完全合适的解决方案。


23
投票

不,段落元素可能不包含其他块元素。

Reference

段落标记用于文本块。如果你的元素是文本的一部分(而不是块元素),那么它在语义上是正确的,否则就不是。带有display:block的span标签仍然是一个块元素。


6
投票

它在语法上是不正确的,因为你可以使用W3C markup validator自己看到。

在语义上和实际上我会说它是“ok”,因为a)它非常自然,b)所有浏览器都能正确处理它(事实上这是他们每天必须面对的最简单的问题之一)。

如果你的HTML是由用户输入产生的(例如,一个HTML编辑器小部件,访问者可以使用它来发表评论),那么我只想让它成为,即使它是“不正确”。

否则,您可以稍微更改标记。就我个人而言

<div class="para">
    <div>Some content</div>
</div>

并使用CSS为.para提供适当的边距。


1
投票

FWIW:我有一段用段落标签括起来的段落。在里面我放了一个带显示的div:内联在div上。但它仍然将div视为块元素并关闭段落,创建一个带段落间距的新行。

似乎段落标记内的任何块元素都会强制段落关闭,即使块元素在其CSS中显示为内联也是如此。


0
投票

没有任何上下文,对我来说似乎很好,只要你的外部标签真的仍然是一个段落。如果你的div类似于你的顶级导航栏,那就不是那么多,但是如果它是一个图像和标题的容器,你将向右浮动,那么没有问题。


0
投票

这篇文章展示了这一点。看起来它是标准的浏览器行为。

http://blog.programmingsolution.net/html/html-div-tag-inside-html-p-paragraph-tag-does-not-work-correctly/

© www.soinside.com 2019 - 2024. All rights reserved.