HTML：文本是否需要符合标准的容器元素？答案

【问题标题】：HTML: Does text need a container element conform to standards?HTML：文本是否需要符合标准的容器元素？
【发布时间】：2018-01-05 17:58:57
【问题描述】：

是否符合以下 W3C 标准：

<div>
  <h3>Heading</h3>
  This is the text for this section.
</div>

或者文本是否需要容器元素？

<div>
  <h3>Heading</h3>
  <p>This is the text for this section.</p>
</div>

第一个例子不适合我，但内容编辑问我，我意识到我真的不知道它是否可以。

【问题讨论】：

你的HTML validation tool 说了什么？
公平点，它说它是有效的。不过，我仍然认为我不喜欢它。
从技术上讲，它们都是有效的。根据经验，通过将所有文本放入某种较低级别的容器（如paragraph 或div）中，您的标记更易于维护。您的开发人员（和设计师）同事也会喜欢它。

标签： html standards w3c semantic-markup

【解决方案1】：

这两个例子都有效。

从技术上讲，在第一个中，文本位于容器内部，外部为 <div>。

无论如何，将文本直接放在<body> 中是完全有效的，这意味着以下HTML 文档将通过validation 而不会出现错误或警告：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
    <h3>Heading</h3>
    This is the text for this section.
</body>
</html>

更相关的问题是是否是semantically correct。简单来说，段落文本应该被<p> 标签包围。更一般地说，每种类型的内容都应该写在语义相关的标签内。

【讨论】：

这两个标记不仅有效，在 HTML5 规则下，它们在语义上是相同的。未添加<p> 标记的文本仍然是Paragraph，与包裹在<p> 标记中时完全相同。
然而它不是一个段落元素，你可以单独定位、设置样式、操作......所以将内容包装在适当的标签中有很多优势，别忘了搜索引擎。

【解决方案2】：

我会建议您使用第二种方法。当您使用正确的标题标签时，它有助于提高您的页面 SEO 明智。此外，段落标签 P 可以帮助某些浏览器以“阅读模式”呈现您的页面。最后，div 是块显示元素。这段 CSS 代码看起来有点奇怪：div {color: blue}。但是，p { color: red; } 对很多人来说更有意义。

【讨论】：

【解决方案3】：

从技术上讲，两者都符合 HTML（除非您根据 has no connection to reality anymore 的严格 HTML4.x/XHTML1.x 方案对其进行验证）。然而，从样式/脚本的角度来看，第二种方法可能更方便，在这种情况下，最好有可能直接处理任何内容。第一个例子有一个implicit paragraph，显式通常比隐式好。

【讨论】：