可以在没有段落标签的 div 中有文本吗？答案

【问题标题】：OK to have text in div without paragraph tag?可以在没有段落标签的 div 中有文本吗？
【发布时间】：2015-04-16 06:04:57
【问题描述】：

我正在尝试了解<p> 标签的实用性。我想写更少的 HTML，并且总是为了简化一般的事情，但我觉得我听到有人提到为了 SEO 目的或清晰或其他什么，所有文本都应该驻留在段落标签中？这似乎是另外一组要处理的边距/填充/边框/css 业务。我不会通过某种 linting 工具吗？

<div>
  Cheerio, worldie!
</div>

对比：

<div>
  <p>Hello, world!</p>
</div>

【问题讨论】：

标签： html

【解决方案1】：

从semantical 的角度来看，您应该始终将您的内容放在有意义的容器中。

例如，您可以像这样创建一个项目列表（例如待办事项列表）：

<div>
  - Buy groceries<br>
  - Clean my room<br>
  - Learn HTML
</div>

但这只是看起来像一个列表，但从语义的角度来看，它只是纯文本，因为<div> 元素没有任何语义含义（它们仅用于用于布局目的）。

正确的语义列表如下所示：

<ul>
  <li>Buy groceries</li>
  <li>Clean my room</li>
  <li>Learn HTML</li>
</ul>

现在它真的是一个列表。

那么：为什么这很重要？

搜索引擎优化：读取您的内容的机器（例如 Google 的搜索索引爬虫）将知道这是一个列表并可以做出相应的反应。这在查看标题时更容易理解：<h1> 元素将被搜索引擎处理，其重要性高于 <b> 元素（没有任何语义意义）。
可访问性：辅助软件（例如盲人或视力障碍者的屏幕阅读器）可以判断这是一个列表，用户可以相应地导航它（例如从一个列表项跳到下一个）。李>

所以一般规则是，您应该始终考虑要向用户呈现什么类型的内容：它是一个列表（<ul> 或<ol> 元素）？是文本（一个或多个<p> 元素）吗？它是标题（<h1> 到 <h6> 元素）吗？这可以让各类读者更彻底地解读您的内容。

因此，虽然从技术角度来看，文本在裸 <div> 元素（不包含任何语义含义）中绝对有效，但从内容的角度来看，在显示文本时绝对应该使用 <p> 元素您的网站。由于所有网站都是关于其内容的，因此您应该彻底遵守此规则。

【讨论】：

【解决方案2】：

是的，可以使用不带<p> 的<div> 元素。

<p> 会告诉 <div> 元素中的文本被分割成段落，因此如果你将文本分割成段落，你应该使用 <p>；另一方面，<p> cannot contain elements other than so-called phrasing content；因此，<p> 内不能有 <div>。

【讨论】：