<div> 标签是 <p> 标签的不受欢迎的替代品吗？

Posted 2023-03-04

【中文标题】<div> 标签是 <p> 标签的不受欢迎的替代品吗？

【英文标题】：Is the <div> tag ever an undesirable alternative to the <p> tag?

【发布时间】：2010-10-28 18:48:24

【问题描述】：

我看到<p> 标签在其他人的代码中使用了很多，但从未在我自己的工作中使用过。

我想知道这比使用<div> 标签有什么优势？

我能得到什么好处吗 从合并<p> 标签 进入我的页面？

只有在 使用没有<p> 的<div> 标签？

【参考方案1】：

DIV 表示页面上的单独部分，在语义上与其他部分没有联系。使用 P 标记可以表明这段文本被分成几段，但它仍然是一个实体。

添加：对于“语义”，人们通常指的是从 html 中提取信息的可能性，以了解页面的各种元素代表什么以及它们如何相互关联，而不是将整个 HTML 视为只是一个标记被渲染。例如，当您使用菜单时，建议您为此目的使用 UL（无序列表），因为可以从标记中了解到，包含在特定列表中的所有 LI（列表项）可能意味着选择选项同一级别。我知道您尝试使标记尽可能语义丰富，这对残障人士的屏幕阅读器很有帮助。

如果您不关心这一点，那么无论您使用 DIV 还是 Ps，渲染结果几乎没有区别。您可以使用 CSS 设置两者的样式以实现相同的外观。

语义 HTML 仍然不是要争取的“绝对优势”。对于许多人来说，语义不会增加任何价值，因为他们只是希望他们的页面能够正确呈现。这就是为什么关于是否使用表格进行标记（并在不属于的地方添加语义）或坚持 CSS 的持久讨论不会很快结束的原因。

【讨论】：

对不起。我不明白您所说的“在语义上与其他人没有联系”是什么意思。

@Hippo 可以包含

“是否使用表格进行标记（并破坏语义）或坚持 CSS” - 在阅读了您对语义的解释后，我期望相反 - 表格加强语义，而 CSS 避开语义并简单地允许所有对象被平等对待。

@eggdrop，我把这段文字改得更清楚了。

'语义 HTML 仍然不是要争取的“绝对优势”' 好的答案 - 在某些情况下语义没有优势，例如，操作系统应用程序中的 HTML 永远不会被机器读取。跨度>

【参考方案2】：

p 表示“段落”，div 表示“划分”。这很复杂。这是一种告诉搜索引擎、抓取工具、工具等这是一段文本的方式。

当您实际标记文本的“段落”时，div 是不可取的。

【讨论】：

所以就我的布局而言，它们基本上是可以互换的？如果我使用 CSS 进行布局，我可以使用其中任何一个而没有任何特别的优点或缺点？

正确，但是它可能会影响 SEO 或在某些浏览器中触发不同的布局（例如在文本阅读器的段落之间添加一行空格）。

@Lai：不，它们并不是真正的“可互换”。 用于没有适当元素可使用的“通用”元素，例如列。

【参考方案3】：

两个标签的用途不同。

p

表示一个段落，通常用于 组织内容（文本和 图片，主要是）

div

另一方面是 画布上的矩形空间， 通常用于布局目的。

示例：您可以将导航面板放在一个 div 中，以便轻松地将其从页面的左侧移动到右侧，或者切换到 3 列布局。导航中的不同部分（首先是一般网站导航，下一个指向最新博客文章的特定热链接或其他）可以通过将它们放在不同的段落中来分隔。

（我知道，不好的例子，因为导航更好地由无序列表表示，但是嘿）。

在直接回答您的问题时，它们为您提供了区分组织布局和组织内容的优势，在 HTML 源代码中变得清晰。

【讨论】：

当你说“他们给你优势”时，“他们”指的是什么？

【参考方案4】：

如果您要标记内容以便使用 CSS 进行布局，您可能需要<div>； <p> 应该用于表示一段文本，仅此而已。

【讨论】：

是的，我主要对在我的布局中使用 CSS 感兴趣。为什么说“就是这样”？

@Michael Haren - 是的，这就是我所看到的（关于“典型布局”）。但我的问题是这是否需要如此。也就是说，一个典型的布局是否可以轻松地将

是的，这在技术上是正确的。但是，这将违背这些标签的预期使用方式（或至少其他人如何使用它们）。

@eggdrop - no - <p>s 不能嵌套在 text/html 中，这会限制您的布局选项。作为演示，请参阅software.hixie.ch/utilities/js/live-dom-viewer/…

【参考方案5】：

除了它的语义（这很重要）之外，您还需要考虑验证问题。根据 HTML4 规范，您不能在 <p> 中嵌套其他块级元素（<div>、<ul>、其他 <p> 等）而不会使您的 HTML 无效。

我见过很多解析器会选择过早关闭<p> 以允许其他嵌套块元素开始的实例。

【讨论】：

你的意思是这样的：software.hixie.ch/utilities/js/live-dom-viewer/…

或多或少。 Firebug 在检查 DOM 时会做同样的事情。过去尝试调试错误的 HTML 时，它让我陷入了循环。

【参考方案6】：

我能得到什么好处吗 从合并

标签进入我的 页面？

是的，只要您正确使用它——因为使用语义 HTML 总是有好处的。

造成这种情况的原因有很多，但对于需要快速解释的人来说，最主要的原因是 SEO。如果您使用语义 HTML，搜索引擎会更好地理解您的页面。

【参考方案7】：

p 标签用于段落。 p 标签通常包含关于进入它们的文本内容的附加 CSS 样式，并且可以在 css 文档的不同位置定义此样式。例如，p 通常在其下方有一些额外的空间。如果你尝试用 p 标签来布置东西，你最终会得到不均匀的填充。

如果您想从程序化角度更好地控制页面中的内容，最好使用 div。为所有布局问题坚持使用 div 也将允许您将 p 标签专门用于段落。