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

在Bootstrap CSS项目中 ,为您的标题标签(H1,H2,H3,H4,H5,H6)提供样式,但也有一系列基于标题的类名称(.h1,.h2,.h3 ,.h4,.h5,.h6)。 如果没有正确使用H1标签,使用H1的类名有什么好处? 我认为你总是想确保你的HTML反映你的视觉重要性。

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

你问:

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

简短的回答:

目标是一起使用两者。

当devise中的印刷字体的大小与语义上合适的标题水平不相关时, .h*类的用处就起作用了。 通过将问题分成两部分,我们可以干净地解决这两个问题。

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

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

很长的回答:

我相信这些课程的起源来自OOCSS项目:

面向对象的CSS

自从我上次查看OOCSS以来,最近一次迭代已经发生了一些变化,但是下面是相关的heading.css文件,来自一个较老的提交,它具有我熟悉的.h1.h6类:

6e481bc18f oocss / core / heading / heading.css

来自评论:

.h1.h6类应用于维护语义上合适的标题级别 – 不适用于非标题

如果需要额外的标题,则应该通过附加的类创build,而不是通过位置相关的样式

注意上面重点

为了解释为什么要使用这些类,请参阅:

  1. stubbornella.org : 不要使用HTML5部分样式标题 (Nicole,这篇文章的作者是OOCSS的创build者)
  2. csswizardry.com:CSS中 实用,实用的字体大小
  3. Google网上论坛>面向对象的CSS>标题问题:基本概念/用法? (我在12年9月份问过的一个问题)

以上链接相关引用:

1. stubbornella.org

… [HTML5]段元素是为了帮助浏览器找出真正的标题级别,但不一定要决定如何devise。

那么,我们如何在HTML5世界中定义标题呢?

…我们不应该使用切片元素的造型。 我们应该让他们完成他们所devise的工作,即整理文档树,解决样式问题的另一种方式,以更好地实现我们的目标:使用简单的可重复使用的类名,可以应用于我们的任何标题,不pipe多深他们可能在切片内容中。

我build议将网站的标题抽象为类,因为那样它们便于携带,可预测和干燥。 你可以称他们任何你喜欢的。

2. csswizardry.com

另一个智慧[Nicole Sullivan]给我们提供的绝对精彩的东西就是我所说的双层标题层次结构。 这是每次在CSS中定义标题时定义一个类的习惯。

…通过分配一个类以及每个标题样式,我们现在将这些样式附加到一个非常灵活的select器,可以移动到任何地方,而不是一个非常具体和不可移动的select器。

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> 

请阅读完整的文章(和主题),通过上面的链接,获取更多与这个问题/主题相关的详细信息。

大多数样式表都有一组对应于标题样式1到6的字体大小。有时在页面上的其他地方,网页devise师想要在文本上使用相同的字体大小, 而不应该是实际标题元素的一部分,原因。 而不是为每个像.size-12.size-14.size-16等大小的名称提供名称,只需要使用类似于标题的类名来命名。 这样,即使它实际上不是H1元素,也知道文本的大小与H1元素的大小相同。 我自己做了几次。

我能想到的一些原因是:

  • 使用div而不是适当的标签来获得一个标题的视觉,而不会影响search引擎优化
  • 避免浏览器不一致的问题
  • 与其他图书馆和框架的兼容性,select做原因1和2相同
  • devise灵活性(正如@scrappedcola在评论中指出的那样)

这允许从视觉层次分离语义层次结构。 例如,我想告诉观众一件事,同时告诉一台电脑(search引擎)另外一件事。

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

看到:

我唯一能想到的就是search引擎。 许多人会看到一个实际的H1标签作为一个页面的标题或主题,并将其用于search等。有多个H1标签可以混淆search引擎蜘蛛,可能会搞砸search,将返回结果为您的网站(我也听说它可能会让你在像蜘蛛一样的“坏站点”列表中)。

拥有这些样式可以让你在不使用search引擎的情况下拥有相同的视觉效果。

我最近遇到的另一个原因…这不是特别的Angular,但它是一个很好的例子:

我想在Angular中创builddynamic/声明式表单(请参阅Angular Cookbook中的dynamic表单)并允许使用样式化的文本元素。 最大的灵活性要求允许我声明式地向我的表单添加任意的HTML元素,但是这对于脚本攻击是开放的,并且需要对Angular编译器进行明确的颠覆,甚至允许它。 相反,我允许将文本元素添加到表单中,以及用于控制样式的类。 所以我可以使用.h1风格但不是h1元素。