为什么使用 .h1 而不是实际的 h1？答案

【问题标题】：Why use .h1 instead of actual h1?为什么使用 .h1 而不是实际的 h1？
【发布时间】：2013-10-06 14:55:53
【问题描述】：

Within the Bootstrap CSS project，为您的标题标签提供样式（H1、H2、H3、H4、H5、H6），但也有一系列基于标题的类名（.h1、.h2、. h3、.h4、.h5、.h6)。使用 H1 的类名而不正确使用 H1 标签有什么好处？我认为您总是希望确保您的 HTML 反映您的视觉重要性。

任何解释使用 .h1 而不是使用 h1 标签的充分理由的想法将不胜感激。

【问题讨论】：

这是一个很好的问题，因为老实说我想不出这样做的理由。但 Bootstrap 以宣传无语义代码而闻名……
Bootstrap 还滥用 <i> 元素来表示 icon，我认为任何看起来没有意义的东西都是垃圾。
@PedroEstrada — 但是为什么要使用 <div class="h1"> 而不是 <h1>？
@Rahul Tripathi：这只会让它变得更加多余。
在 html 中标准是在旁观者的眼中，而不是一成不变的。 Bootstrap 试图为您特别可能使用的设计提供更大的灵活性，而不是强制对什么是正确的特定视图。这可能不是 stackoverflow 的最佳问题类型，因为它更多地基于意见而不是事实。

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

我能想到的几个原因：

使用 div 而不是适当的标签来获得标题的视觉效果而不影响 SEO
为避免浏览器不一致导致的复杂情况
与出于原因 1 和 2 选择执行相同操作的其他库和框架的兼容性
设计灵活性（如 cmets 中的 @scrappedcola 所述）

【讨论】：

【解决方案2】：

我唯一能想到的就是搜索引擎。许多人会将实际的 h1 标签视为页面的标题或主题，并将其用于搜索等。拥有多个 h1 标签可能会使搜索引擎蜘蛛感到困惑，并且可能会搞砸会返回您网站结果的搜索（我已经还听说它可能会让你进入一些像谷歌这样的蜘蛛的“坏网站”名单。

拥有这些样式可以让您对元素拥有相同的视觉外观，而不会搞砸搜索引擎。

【讨论】：

【解决方案3】：

大多数样式表都有一组与标题样式 1 到 6 相对应的字体大小。有时，在页面的其他地方，网页设计师希望在文本上使用相同的字体大小，而不出于语义原因，实际标题元素的一部分。与其为每个大小提供名称，如.size-12、.size-14、.size-16 等，不如使用与您的标题相似的类名来命名它们更容易。这样，您就知道文本与 H1 元素的大小相同，即使它实际上不是 H1 元素。我自己也做过几次。

【讨论】：

+1 您可以将文本样式设置为不是 Hn 的 Hn：字段集中的表格标题和图例可以轻松设置为 H2 样式，因此只需添加 .H2跨度>
在我看来，它允许您使用 .h1(); 导入带有 LESS 的现有样式；然后扩展样式。

【解决方案4】：

这允许视觉层次结构与语义层次结构的分离。例如，我想告诉观众一件事，同时告诉计算机（搜索引擎）另一件事。

<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>

见：

【讨论】：

【解决方案5】：

你问：

为什么使用.h1 而不是实际的h1？

简答：

我们的目标是同时使用两者。

.h* 类的有用性在设计中的排版大小与语义上适当的标题级别不相关时发挥作用。通过将问题一分为二，我们可以彻底解决这两个问题。

第一位是元素/标签。 “<h*>”负责语义、可访问性和 SEO。

第二位是类。 '.h*' 负责视觉语义和印刷层次结构。

长答案：

我相信这些类的起源来自 OOCSS 项目：

Object-Oriented CSS

自从我上次查看 OOCSS 以来，它的最新迭代发生了一些变化，但这里是相关的 heading.css 文件，来自一个较旧的提交，其中包含我熟悉的 .h1 - .h6 类：

6e481bc18foocss / core / heading / heading.css

来自cmets：

.h1-.h6 类应用于维护语义上适当的标题级别 - 不适用于非标题
...
如果需要额外的标题，它们应该通过额外的类来创建，而不是通过位置相关的样式

注意上面的重点。

关于为什么要使用这些类的一个很好的解释，请参阅：

stubbornella.org:Don’t Style Headings Using HTML5 Sections（本文作者Nicole是OOCSS的创建者）
csswizardry.com: Pragmatic, practical font sizing in CSS
Google Groups › Object Oriented CSS › Headings question: Basic concept/usage?（我在 12 年 9 月问过的一个问题）

以上链接的相关引用：

1。 stubbornella.org

... [HTML5] 部分元素旨在帮助浏览器确定标题的真正级别，但不一定决定如何设置样式。

那么，我们如何在 HTML5 世界中设置标题样式？

...我们不应该使用分段元素来进行样式设置。我们应该让他们完成他们设计的工作，即整理文档树，并以另一种更好地满足我们目标的方式解决样式问题：使用简单的可重用类名，无论多深都可以应用于我们的任何标题它们可能在分段内容中。

我建议将站点范围的标题抽象到类中，因为这样它们是可移植的、可预测的和枯燥的。你可以随意称呼他们。

2。 csswizardry.com

[Nicole Sullivan] 给我们的另一个绝对一流的智慧块是我所说的双链标题层次结构。这是每次在 CSS 中定义标题时定义一个类的做法。

...通过为每个标题样式分配一个类，我们现在将这些样式附加到一个非常灵活的选择器上，该选择器可以移动到任何地方，而不是一个非常具体且不可移动的选择器。

3。 groups.google.com

这是一个伪 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>

请通过上面的链接阅读完整的文章（和主题），以获取与此问题/主题相关的更多详细信息。

【讨论】：

哇！多么棒的答案@mwhulse！这无疑阐明了实践并帮助我理解为什么我应该将这种实践纳入我的前端开发。
感谢@StephanMuller 和@Hynes！最重要的是，stubbornella.org article（和OOCSS code）确实帮助我澄清了用法......我很高兴分享链接/知识。
这是所有有趣的信息，但我完全不理解 OOCSS 注释“不用于非标题” - 为什么不呢？老实说，这对我来说毫无意义。
@animuson 好问题。 我的猜测： 这是合乎逻辑的。例如，在非标题上使用.h1 可能会让外人（或您未来的自己）感到有些困惑。无论如何，我不认为有任何硬性规定说你不能在任何你喜欢的地方使用这些类（我个人喜欢将它们的使用限制在标题中）。话虽如此，我选择在 OOCSS Google Group 上创建一个新线程：Object Oriented CSS: Question about heading classes，而不是在黑暗中拍摄。
我的方法会失败的地方是当您拥有几乎无法控制的小部件时，或者当您拥有在多个地方使用且没有标记更改的小部件时。有时这意味着对于简单的博客，最好为核心内容样式和页面镶边（如侧边栏、页眉、页脚）分别编写代码。

【解决方案6】：

我最近遇到的另一个原因...这不是 Angular 特有的，但它是一个很好的例子：

我想在 Angular 中创建动态/声明性表单（请参阅 Angular Cookbook 中的动态表单）并允许设置样式的文本元素。最大的灵活性要求允许我以声明方式将任意 HTML 元素添加到我的表单中，但这对脚本攻击是开放的，并且需要明确地颠覆 Angular 编译器才能允许它。相反，我允许将文本元素以及用于控制样式的类添加到表单中。所以我可以使用 .h1 样式，但不能使用 h1 元素。

【讨论】：

【解决方案7】：

这肯定有助于 SEO 和谷歌爬虫更好地理解您的页面。当它读取 h1 时，它假定其中的任何内容都必须是页面的焦点。 H2，将是第二个组件，依此类推。这样，Google 就可以了解您的网页所涵盖内容的“范围”。

不完全确定，但我认为一个很大的变量是页面的“读取”模式。这将允许设备和阅读器组织内容，尤其是针对视障人士使用的设备。

它还为页面提供了结构和秩序感。

【讨论】：