Within the Bootstrap CSS project，为你的标题标签（H1，H2，H3，H4，H5，H6）提供了样式，但也有一系列基于标题的类名（.h1，.h2） ，.h3，.h4，.h5，.h6）。如果没有正确使用H1标签，使用H1的类名会带来什么好处？我认为你总是希望确保你的HTML反映你的视觉重要性。
任何解释使用.h1而不是使用h1标签的充分理由的想法都将受到赞赏。
答案 0 :(得分：56)
你问：
为什么要使用
.h1而不是实际h1？
目标是同时使用两者。
当设计中排版的大小与语义上合适的标题级别无关时，.h*类的有用性就会发挥作用。通过将问题分成两部分，我们可以彻底解决这两个问题。
第一位是元素/标签。 '<h*>'负责语义，可访问性和SEO。
第二位是班级。 '.h*'负责视觉语义和印刷层次结构。
我相信这些课程的起源来自OOCSS项目：
自上次查看以来，OOCSS的最新版本已经发生了一些变化，但是这里的相关heading.css文件来自旧版提交，其中包含.h1 - .h6个类我很熟悉：
6e481bc18f oocss / core / heading / heading.css
来自评论：
.h1-.h6类应该用于维护语义上合适的标题级别 - 不用于非标题
...
如果需要额外的标题，则应通过其他类创建，而不是通过依赖于位置的样式
请注意强调。
有关为何使用这些类的详细解释，请参阅：
以上链接的相关引用：
... [HTML5]部分元素旨在帮助浏览器确定标题的真实级别，但不一定要决定如何设置样式。
那么，我们如何在HTML5世界中标题？
...我们不应该使用切片元素进行样式设置。我们应该让他们完成他们设计的工作，即整理文档树，并以另一种更好地满足我们目标的方式解决样式问题：使用可以应用于任何标题的简单可重用类名，无论多深他们可能在分段内容中。
我建议将网站范围的标题抽象为类，因为它们是可移植的，可预测的，干燥的。你可以随便给他们打电话。
另一个绝对出色的智慧金块[Nicole Sullivan]给我们的是我称之为双链标题层次结构。这是每次在CSS中定义标题时定义类的做法。
...通过为每个标题样式分配一个类，我们现在将这些样式附加到一个非常灵活的选择器上，该选择器可以移动到任何地方，而不是移动到非常特定和不可移动的选择器。
这是一个伪html5用法示例（h / t Jamund Ferguson）：
<body>
<div class="main">
<h1>Main Heading</h1>
<section>
<h1 class="h2">Section Header</h1>
</section>
</div>
<aside class="side">
<article class="widget">
<h1 class="h3">Sidebar Headings</h1>
</article>
<article class="widget">
<h1 class="h3">Sidebar Headings</h1>
</article>
</aside>
</body>
请通过上面的链接阅读完整的文章（和主题），以获取与此问题/主题相关的更多详细信息。
答案 1 :(得分：32)
大多数样式表都有一组与标题样式1到6相对应的字体大小。有时候，在页面的其他地方，网页设计师希望在不的文本上使用相同的字体大小出于语义原因，实际标题元素的一部分。不是为.size-12，.size-14，.size-16等其他每种尺寸提供名称，而是使用与您的标题类似的类名称来命名它们更容易。这样，您就知道文本的大小与H1元素的大小相同，即使它实际上不是H1元素。我自己已经做过几次了。
答案 2 :(得分：8)
我能想到的几个原因：
答案 3 :(得分：5)
这允许从语义层次结构中分离视觉层次结构。例如，我想告诉观众一件事，同时告诉计算机（搜索引擎）别的东西。
<article>
<h1 class="h1">Page Title</h1>
<p>Some content</p>
<section>
<h1 class="h2">Section Heading</h1>
<div class="h6">Sub Heading</div>
<p>Some content</p>
</section>
<section>
<h1 class="h2">Section Heading 2</h1>
<div class="h6">Sub Heading 2</div>
<p>Some content 2</p>
</section>
</article>
请参阅：
答案 4 :(得分：1)
我唯一能想到的就是搜索引擎。许多人会将实际的h1标签视为页面的标题或主题，并将其用于搜索等。拥有多个h1标签可能会使搜索引擎蜘蛛感到困惑，并可能搞砸搜索结果，从而为您的网站返回结果（我已经还听说它可能会让你在像谷歌这样的蜘蛛的“坏网站”名单上。）
拥有样式可以让您在不搞砸搜索引擎的情况下拥有相同的视觉外观。
答案 5 :(得分：0)
我最近遇到的另一个原因......这对Angular并不特别，但它是一个很好的例子：
我想在Angular中创建动态/声明表单（请参阅Angular Cookbook中的Dynamic Forms）并允许样式化的文本元素。最大的灵活性要求允许我声明性地将任意HTML元素添加到我的表单中，但这对脚本攻击是开放的，并且需要显式颠覆Angular编译器甚至允许它。相反，我允许将文本元素添加到表单，以及用于控制样式的类。所以我可以使用.h1样式但不能使用h1元素。
答案 6 :(得分：0)
这绝对有助于SEO和Google搜寻器的术语更好地了解您的页面。 读取h1时，它假定页面中的任何内容都必须是焦点。 H2将是第二个组件，依此类推。通过这种方式，Google可以了解您的页面涵盖内容术语的“范围”。
不确定，但是我认为一个很大的变量是页面的“读取”模式。这样一来，设备和阅读器就可以组织内容，尤其是针对视障人士使用的设备。
它还提供了页面的结构和秩序感。