HTML“容器”标签 - 正确使用？答案

【问题标题】：HTML 'container' tags - proper usage?HTML“容器”标签 - 正确使用？
【发布时间】：2009-02-25 15:31:25
【问题描述】：

一段时间以来，我一直在制作网站，但从未真正看到有关正确使用容器标签的讨论。我在收藏标签中看到了许多不同类型的内容，但通常页面创建者似乎只是选择了他们喜欢的风格并坚持下去。

我心目中的主要差异在于

<p>
<div>

但我也想了解有关

的意见

<span>

还有其他我可能会忘记的东西。

【问题讨论】：

标签： html tags containers

【解决方案1】：

最初创建 HTML 是为了将文档的内容放入某种计算机可以理解的结构中。考虑到这一点，如果要将页面内容转换为打印文档，p 标签应该包含任何结构为段落的内容。 div 和 span 元素保留为通用容器，以促进相关元素的格式化和分组，以提供额外的结构级别，可能与文本文档中的页面相关。

在某些情况下，p 标签应该包含其他元素，例如锚点 (a)、图像 (img) 和其他内嵌元素，因为它们直接与该段落其余部分的内容，并且以这种方式对它们进行分组是有意义的，或者该段落其余部分的文本提供了更深入的描述。

但是，如果没有对这些元素的附加描述，那么将它们简单地放在段落中作为一个方便的容器是没有意义的； div 会更合适。一般来说，一个段落应该包含一段文本和任何直接相关或描述的元素。段落中没有其他任何意义。

更新：HTML5还添加了许多其他语义“容器”元素，包括article、nav、header、section和aside。

【讨论】：

"并且可能列出 (ol & ul)" 否，ol 和 ul 元素在 p 元素中无效。
@zzzzBov 是的，我在编辑中错过了那个错误。我已经更正了答案。

【解决方案2】：

我认为，标签的含义是这样的：

<p>Paragraph, usually just text</p>

<div>A block, containing anything</div>

<span>Just a simple non-blocking wrapper</span>

【讨论】：

【解决方案3】：

这三个（以及许多其他）标签之间的区别在于它们的语义。 HTML 标准包括具有特定语义含义的标签（<p> 用于段落，<em> 用于强调文本等）和标签没有语义含义。

后者是<div> 和<span>，用于识别需要识别的块级或内联级内容（例如使用class= 或id= 属性），但对于哪些语义特定标签不存在。例如，可以写<p>Hi, my name is <span class="name">John Doe</span>.</p>——表示它是一个段落（浏览器已经知道如何处理它）并且它的部分内容是一个名称（这意味着绝对nothing浏览器，除非 CSS 或 JavaScript 使用它）。

因此，这些标签在向 HTML 文档中添加不符合标准提供的语义标签的附加信息时非常有用（参见 the hCard specification 的一个很好的例子）和将视觉 (CSS) 或功能 (JavaScript) 结构应用于文档而不改变其语义。

【讨论】：

【解决方案4】：

我认为页面创建者应该使用语义标记，这意味着他们创建的标记应该传达意义（而不是呈现）。 <div> 和 <p> 有不同的含义。前者用于定义 HTML 页面的一个分区（或部分），后者用于定义一段文本。

【讨论】：

【解决方案5】：

<p> 是一个块级元素，应该包含一个段落，由文本、修改该文本的内联元素（<p>、<a>、<abbr> 等）和图像组成。

<div> 是用于划分页面的块级元素，几乎总是与 CSS 样式结合使用。

<span>...好吧，老实说，我不经常使用这个标签。它是一个内联元素，当我想将样式应用于无法从使用更有意义的内容（例如<strong> 和<em> 标签）中受益的部分文本时，我通常会使用它。

【讨论】：

【解决方案6】：

我很难将 <span> 和 <div> 视为“webdeveloppement 的豆腐”，因为它没有真正的味道，但你几乎可以用它做任何事情。

(X)HTML 标签定义了它们周围的文本是什么。是和地址，是链接，是段落，等等……

<div> 和<span> 是访问您通常无法访问的站点的简单方法。就像当你试图调整 |象征。我发现最快的方法是在它周围放置一个跨度，给它一个类，然后实现 CSS。

在我看来，这就是它们的优点。我很想听听我在这里写的更多甚至更正的内容。

【讨论】：

【解决方案7】：

听起来你需要阅读HTML specification

The p element:

p 元素代表一个段落。

The div element:

div 元素根本没有特殊含义。它代表它的孩子。它可以与class、lang 和title 属性一起使用，以标记一组连续元素共有的语义。

The span element:

span 元素本身没有任何意义，但与全局属性一起使用时会很有用，例如class、lang 或 dir。它代表它的孩子。

div和span的主要区别在于span是flow content、phrasing content和palpable content，而一个div只有flow content和palpable content。

基本上可以归结为：

div 元素是块级元素，通常只能放置在其他块级元素中，而span 元素是内联元素，可以放置在大多数其他元素中。

The HTML spec defines which elements are acceptable as descendents of each element.

【讨论】：