62

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

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

4

7 回答 7

59

你问：

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

简短的回答：

目标是同时使用两者。

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

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

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

长答案：

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

面向对象的 CSS

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

6e481bc18f oocss / 核心 / 标题 /heading.css

从评论：

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

注意上面的重点。

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

  1. stubbornella.org : Don't Style Headings Using HTML5 Sections（这篇文章的作者 Nicole 是 OOCSS 的创建者）
  2. csswizardry.com :实用的 CSS 字体大小调整
  3. Google Groups › 面向对象的 CSS › 标题问题：基本概念/用法？（我在 12 年 9 月问过的一个问题）

以上链接的相关引用：

1. stubbornella.org

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

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

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

我建议将站点范围的标题抽象到类中，因为这样它们是可移植的、可预测的和枯燥的。你可以给他们起任何你喜欢的名字。

2. cswizardry.com

[妮可沙利文]给我们的另一个绝对一流的智慧金块是我所说的双链标题层次结构。这是每次在 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>

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

于 2013-10-03T18:50:19.500 回答
32

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

于 2013-09-30T16:51:48.400 回答
8

我能想到的几个原因：

  • 使用 div 而不是适当的标签来获得标题的视觉效果而不影响 SEO
  • 避免浏览器不一致导致的并发症
  • 与出于原因 1 和 2 选择执行相同操作的其他库和框架的兼容性
  • 设计灵活性（@scrappedcola 在评论中指出）
于 2013-09-30T16:48:52.153 回答
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>

看：

于 2013-09-30T17:06:26.873 回答
1

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

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

于 2013-09-30T16:50:19.223 回答
0

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

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

于 2017-04-25T01:25:44.597 回答
0

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

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

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

于 2018-09-21T07:09:56.783 回答