将文本放入 <h1>、<h2>、<p> 或仅 <div> 之间的区别答案

【问题标题】：Difference between putting text in <h1>, <h2>, <p> or just <div>将文本放入 <h1>、<h2>、<p> 或仅 <div> 之间的区别
【发布时间】：2018-07-03 16:23:03
【问题描述】：

例如，如果我想显示任何文本，将其放入 <h1>、<h2>、<p> 或只是 <div> 标记有什么区别？它是否只有助于提高可读性和更好的 SEO？

【问题讨论】：

语义差异。特别是对于屏幕阅读器之类的东西。
对于 p 和 div，它是语义。对于 headers 与 p/div，它们的呈现方式不同。 stackoverflow.com/questions/2226562/…
解释语义 HTML 的良好响应：stackoverflow.com/questions/271743/…

标签： html

【解决方案1】：

实际上是 SEO、CSS、可读性和语义。

值得一提的是浏览器会在<p>标签前后自动添加一些空白（边距）并设置display为block然而，为了保存文本，它们不知道空格，不像pre 等其他标签，最终两者都是保存文本值的标签。

标题<h1>....<h6> 在 SEO 问题上确实是一个角色扮演者，他们在每个页面上的计数很重要，当然还有可读性！

<div>'s 是为了划分你的元素来构建你的页面，而其他标签如sections、articles、header...等只是我们 div 的一种别名知道，让我们用他们的名字来面对现实，他们让我们的生活更轻松！

【讨论】：

【解决方案2】：

不同之处在于浏览器使用默认样式（例如，在没有任何 CSS 的情况下，h1 中编写的文本与p 中的文本看起来不同，样式因浏览器而异）。要取消设置默认样式，可以使用一种通常称为 CSS 规范化或 CSS 重置的技术。此外，屏幕阅读器可以更好地使用语义标签。 SEO 还根据标签获取线索（例如，它希望标题在 h 标签内，段落在 p 内等）。

div 是一个包罗万象的标签。只要有可能，您应该使用语义标签，因为它们确实传达了重要信息。

【讨论】：