Html 在 <p> 标签内嵌套块级元素...对还是错?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/4291467/
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
Nesting block level elements inside the <p> tag... right or wrong?
提问by Salman A
Is it syntactically and semantically correct to nest <div>
or any other block level element inside the <p>
tag. I am talking about HTML4 Transitional DTD.
<div>
在<p>
标签内嵌套或任何其他块级元素在语法和语义上是否正确。我说的是 HTML4 过渡 DTD。
If not then is it OK to instead use <span style="display: block">
instead?
如果不是,那么可以改为使用<span style="display: block">
吗?
回答by Alohci
Syntactically, a div
inside a p
is invalid in all standards of HTML. Moreover, when using a conforming HTML parser, it is impossible to place a <div>
element inside a <p>
in the DOM because the opening <div>
tag will automatically close the <p>
element.
在语法上,a div
inside ap
在所有 HTML 标准中都是无效的。此外,当使用符合标准的 HTML 解析器时,不可能将<div>
元素放在<p>
DOM 中的a内,因为开始<div>
标签会自动关闭该<p>
元素。
Semantically, the correct choice depends on the content that you are marking up. You will need to show at least a sample full paragraph and possibly the content surrounding it to be sure of providing sufficient information for the correct semantic mark-up to be determined.
从语义上讲,正确的选择取决于您要标记的内容。您至少需要显示一个完整的示例段落以及可能的围绕它的内容,以确保为确定正确的语义标记提供足够的信息。
However, given that both <div>
and <span>
are semantics free, and that CSS in no way can ever change that, if you are certain that the contents of the <p>
tag truly form a paragraph, and that <span style="display: block">
gets you the presentational effect that you are seeking, then that is valid HTML and would be a wholly appropriate solution.
然而,考虑到<div>
和<span>
都是语义自由的,而且 CSS 永远无法改变这一点,如果你确定<p>
标签的内容确实形成了一个段落,并且这<span style="display: block">
让你得到了你正在寻求的表现效果,那么是有效的 HTML,将是一个完全合适的解决方案。
回答by Guffa
No, a paragraph element may not contain other block elements.
不可以,段落元素不能包含其他块元素。
A paragraph tag is intended for a block of text. If your elements is a part of the text (and not block elements), it would be semantically correct, otherwise not. A span tag with display:block
is still a block element.
段落标记用于文本块。如果你的元素是文本的一部分(而不是块元素),它在语义上是正确的,否则不是。带有 的 span 标签display:block
仍然是块元素。
回答by Jon
It is syntactically incorrect, as you can see for yourself using the W3C markup validator.
它在语法上是不正确的,您可以使用W3C 标记验证器亲眼看到。
Semantically and practically I would say it's "ok" in the sense that a) it is very natural, b) all browsers handle it correctly (indeed this is one of the easiest problems they have to face daily).
从语义上和实践上来说,我会说它是“好的”,因为 a) 它非常自然,b) 所有浏览器都能正确处理它(实际上这是他们每天必须面对的最简单的问题之一)。
If your HTML is produced by user input (e.g. an HTML editor widget using which visitors can leave comments) then I 'd say simply let it be, even if it is "incorrect".
如果您的 HTML 是由用户输入生成的(例如,访问者可以使用 HTML 编辑器小部件发表评论),那么我会说就顺其自然,即使它是“不正确的”。
Otherwise, you could change the markup a bit. Personally I would go with
否则,您可以稍微更改标记。我个人会去
<div class="para">
<div>Some content</div>
</div>
and give .para
appropriate margins with CSS.
并.para
使用 CSS提供适当的边距。
回答by John Page
FWIW: I had a paragraph bracketed by paragraph tags. Inside that I put a div with display:inline on the div. But it still treated the div as a block element and closed the paragraph, creating a new line with a paragraph spacing.
FWIW:我有一段用段落标签括起来的段落。在里面,我在 div 上放了一个带有 display:inline 的 div。但它仍然将 div 视为块元素并关闭段落,创建一个具有段落间距的新行。
It appears that any block element inside paragraph tags forces the paragraph to close even if the block element is being displayed as inline in its CSS.
看起来段落标签内的任何块元素都会强制段落关闭,即使块元素在其 CSS 中显示为内联。
回答by maeenul
This post shows something about this. Looks like it is the standard browser behavior.
这篇文章显示了一些关于这个的东西。看起来这是标准的浏览器行为。
回答by Matchu
Without any context, it seems fine to me, so long as your outer tag really is still a paragraph. If your div is something like your top nav bar, then not so much, but if it's a container for an image and caption that you're going to float off to the right, then there's no problem.
没有任何上下文,对我来说似乎没问题,只要您的外部标签确实仍然是一个段落。如果您的 div 类似于顶部导航栏,那么就不是那么多,但如果它是您要向右浮动的图像和标题的容器,则没有问题。