html-为什么使用.h1代替实际的h1?

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

任何解释使用.h1代替使用h1标签的好理由的想法都将不胜感激。

7个解决方案
56 votes

你问:

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

简短回答:

目标是将两者一起使用。

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

第一位是元素/标签。 “ .h1”负责语义,可访问性和SEO。

第二位是类。 “ .h1”负责视觉语义和印刷层次结构。

答案很长:

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

面向对象的CSS

自上次查看以来,OOCSS的最新版本已发生了一些变化,但这是来自较早提交的相关.h1文件,该文件具有我熟悉的.h6-.h6类:

.h1 oocss /核心/航向/ .h1

从评论:

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

请注意上面的重点。

有关为什么要使用这些类的很好的解释,请参见:

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

以上链接的相关报价:

1. stubbornella.org

... [HTML5] Section元素旨在帮助浏览器确定标题的真正级别,但不一定决定其样式。

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

...我们不应使用sectioning元素进行样式设置。 我们应该让他们去完成他们想要的工作,即整理文档树,并以另一种更好地满足我们目标的方式解决样式问题:使用简单的可重用类名,无论其深度如何,都可以将其应用于我们的任何标题 它们可能在章节内容中。

我建议将站点范围的标题抽象为类,因为它们是可移植的,可预测的且干燥的。 您可以随便给他们打电话。

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>

请通过上面的链接阅读全文(和主题),以获得与此问题/主题相关的更多详细信息。

mhulse answered 2019-10-08T09:57:10Z
32 votes

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

animuson answered 2019-10-08T09:57:36Z
8 votes

我能想到的几个原因:

  • 使用div代替适当的标签来获得标题的外观,而不会影响SEO
  • 为了避免浏览器不一致带来的麻烦
  • 与其他出于原因1和2选择执行相同操作的库和框架的兼容性
  • 设计灵活性(如@scrappedcola在评论中所述)
Mike H. answered 2019-10-08T09:58:27Z
5 votes

这允许将视觉层次结构与语义层次结构分离。 例如,我想告诉观众一件事,而告诉计算机(搜索引擎)其他事情。

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

看到:

  • [http://www.w3.org/html/wg/drafts/html/master/sections.html#headings-and-sections](朝该部分的底部)
  • [http://html5doctor.com/html5-seo-search-engine-optimisation/]
  • [http://www.youtube.com/watch?v=GIn5qJKU8VM]
Byran answered 2019-10-08T09:59:13Z
1 votes

我唯一能想到的就是搜索引擎。 许多人会将实际的h1标签视为页面的标题或主题,并将其用于页面搜索等。拥有多个h1标签可能会使搜索引擎蜘蛛迷惑,并且可能搞乱了会返回您网站结果的搜索(我已经 也听说它可能会让您和某些蜘蛛(例如Google)进入“恶意网站”列表。

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

Becuzz answered 2019-10-08T09:59:46Z
0 votes

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

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

Peter Swords answered 2019-10-08T10:00:19Z
0 votes

这无疑将有助于SEO和Google搜寻器的术语更好地了解您的页面。读取h1时,它假定页面中的任何内容都必须是焦点。 H2将是第二个组件,依此类推。 通过这种方式,Google可以了解您的页面涵盖内容术语的“范围”。

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

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

agc answered 2019-10-08T10:00:57Z
translate from https://stackoverflow.com:/questions/19099401/why-use-h1-instead-of-actual-h1