何时使用 H1、H2、H3、H4、H5 标签？ [关闭]答案

【问题标题】：When use H1, H2, H3, H4, H5 tags? [closed]何时使用 H1、H2、H3、H4、H5 标签？ [关闭]
【发布时间】：2014-07-09 21:44:25
【问题描述】：

我的问题是假设我们有一些文本，如“与我们一起享受这一天”，其字体大小、字体粗细、行高与 H2 标记相同，但该文本不是标题或副标题文本。所以现在我的问题是对于这个文本我们应该使用什么？如果我们使用 H2 标签，那么我们只需要编写 font-family，如果我们使用 P 标签，那么我们需要应用所有这些属性，例如字体大小、字体粗细、行高和字体系列。

此方案的标准做法是什么？

【问题讨论】：

标签： html css

【解决方案1】：

当使用 HTML 标题时，它可以确保您的代码在语义上是正确的。这是 H1 最大的主要原因（如果您没有样式），因为这是您页面的主要“标题”。 H2 用于与您的页面相关的内容，但不是主页标题（例如文章），但不太重要。

<h1>News Page</h1> <h2>StackOverflow Is Awesome</h2> <p>Lorem ipsum...</p> <h2>StackOverflow Is Even More Awesome</h2> <p>Lorem ipsum...</p>

【讨论】：

【解决方案2】：

应该使用<h1><h2>等标签来表示一个文本块是一个标题。

它不应该必要用于使文本变粗、变大等。但是通常标题将具有更突出（例如更粗、更大）的文本（例如<p>）它的标题.

标题也应该是分层的，例如

<h1>Main heading</h1>
<p>Introduction text</p>
<h2>Section</h2>
<p>Further text</p>
<h3>Sub section</h3>
<p>Further text</p>
<h2>A new section</h2>
<p>New sections text</p>

等

BBC have some good guidance on semantic use of headings。

【讨论】：

【解决方案3】：

您的标记应该是语义化的，因此您应该为相关内容使用适当的元素。如果它不是标题，请不要使用标题标签。最好使用 p 或其他标签。如果这种样式经常重复，为了便于使用，您可以为其附加一个类。

【讨论】：

【解决方案4】：

此场景的标准做法是什么？

使用标签不是为了展示，而是关于semantics。如果您使用各种h1、h2 等标签，您将提供有关其中文本内容的含义的信息。这为阅读您的文档的任何内容提供了有关文档结构和含义的信息。规范中有一个section about the semantics of headings and sections。

以下标记告诉读取它的软件，文本“Web Semantics”是文档中内容的标题，因此以下段落可能与 Web 语义有关：

<h1>Web Semantics</h1>
<p>Blah blah blah blah</p>

相反，如果你有这个：

<div>Web Semantics</div>
<p>Blah blah blah blah</p>

那么即使div 的样式看起来就像h1，您的文档中也没有关于文本“网络语义”的含义的信息（在您的上下文中）文件）。

这对于内容提取很重要，包括广受欢迎的 SEO。

【讨论】：

【解决方案5】：

嗯，这是一个非常笼统的问题。有很多方法可以决定何时使用哪个标题标签...

一些最常见的原因是：

结构化内容 - 标题使其看起来很突出。
SEO - 是的，SEO 优化很大程度上取决于您如何使文章标题具有吸引力。

您可能想要关注的一些链接：

http://www.kenkai.com/seo-blog-article-249.htm

http://www.hobo-web.co.uk/headers/

【讨论】：

【解决方案6】：

不要假设任何 H 元素的样式。浏览器仅在您的页面未指定时应用一些默认样式。但元素主要有一个语义值。

<Hx> 元素用于标题。如果您的文本是段落而不是标题，请使用<P>。

如今，大多数网页都会重置大部分元素的默认样式以引入自己的样式。这很好。那么，为什么不使用<P> 做任何事情呢？就像我说的那样，使用特定元素为文档提供了语义结构，并使其易于被搜索引擎和屏幕阅读器（视障者阅读助手）阅读。

如果您想改变事物的外观，请使用 CSS，不要依赖浏览器为元素提供的默认样式。

【讨论】：