twitter-bootstrap 为什么使用 .h1 而不是实际的 h1？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19099401/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why use .h1 instead of actual h1?
提问by Hynes
Within the Bootstrap CSS project, styles are provided for your heading tags (H1, H2, H3, H4, H5, H6), but there's also a series of class names based on the headings as well (.h1, .h2, .h3, .h4, .h5, .h6). What is the benefit gained from using the class name of a H1 without properly using the H1 tag? I would think that you always want to make sure your HTML mirrors your visual importance.
在 Bootstrap CSS 项目中，为标题标签提供了样式（H1、H2、H3、H4、H5、H6），但也有一系列基于标题的类名（.h1、.h2、.h3 、.h4、.h5、.h6）。在不正确使用 H1 标签的情况下使用 H1 的类名有什么好处？我认为您总是希望确保您的 HTML 反映您的视觉重要性。
Any thoughts explaining a good reason for using .h1 instead of using a h1 tag would be appreciated.
任何解释使用 .h1 而不是使用 h1 标签的充分理由的想法都将不胜感激。
采纳答案by mhulse
You ask:
你问：
Why use
.h1instead of actualh1?
为什么使用
.h1而不是实际的h1？
Short answer:
简答：
The goal is to use both, together.
目标是同时使用两者。
The usefulness of the .h*classes comes into play when the size of the typography in the design does not correlate with the semantically appropriate heading levels. By splitting the problem in two, we can cleanly solve for both.
.h*当设计中排版的大小与语义上适当的标题级别不相关时，类的用处就会发挥作用。通过将问题一分为二，我们可以干净利落地解决这两个问题。
The first bit is the element/tag. The '<h*>' takes care of semantics, accessibility and SEO.
第一位是元素/标签。' <h*>' 负责语义、可访问性和 SEO。
The second bit is the class. The '.h*' takes care of visual semantics and typographical hierarchy.
第二位是类。' .h*' 负责视觉语义和排版层次结构。
Long answer:
长答案：
I believe that the origins of these classes come from OOCSS project:
我相信这些类的起源来自 OOCSS 项目：
The latest iteration of OOCSS has changed a little since I last looked at it, but here's the relevant heading.cssfile, from an older commit, that has the .h1- .h6classes that I'm familiar with:
OOCSS 的最新版本自我上次查看以来发生了一些变化，但这是heading.css来自较旧提交的相关文件，其中包含我熟悉的.h1-.h6类：
6e481bc18foocss / core / heading / heading.css
6e481bc18foocss / 核心 / 标题 / heading.css
From the comments:
来自评论：
.h1-.h6classes should be used to maintain the semantically appropriate heading levels - NOT for use on non-headings
...
if additional headings are needed they should be created via additional classes, never via location dependant styling
.h1-.h6类应该用于维护语义上适当的标题级别 - 不适用于非标题
......
如果需要额外的标题，它们应该通过额外的类创建，而不是通过位置相关的样式
Note the emphasis above.
注意上面的强调。
For a good explanation as to why one would use these classes, see:
有关为什么要使用这些类的一个很好的解释，请参阅：
- stubbornella.org: Don't Style Headings Using HTML5 Sections(Nicole, the author of this post, is the creator of OOCSS)
- csswizardry.com: Pragmatic, practical font sizing in CSS
- Google Groups ? Object Oriented CSS ? Headings question: Basic concept/usage?(A question I asked back in September of '12)
- stubbornella.org：不要使用 HTML5 部分来设计标题（Nicole，这篇文章的作者，是 OOCSS 的创建者）
- csswizardry.com:实用、实用的 CSS 字体大小调整
- 谷歌群组？面向对象的 CSS ？标题问题：基本概念/用法？（我在 12 年 9 月问过的一个问题）
Relevant quotes from the above links:
以上链接的相关引述：
1. stubbornella.org
1. stubbornella.org
... [HTML5] Section elements are meant to help the browser figure out what level the heading really is, but not necessarily to decide how to style it.
So, how do we style headings in an HTML5 world?
... We shouldn't use sectioning elements for styling. We should let them do the job they were designed for, which is sorting out the document tree, and solve styling issues another way that meets our goals better: with simple reusable class names that can be applied to any of our headings no matter how deep they may be in the sectioning content.
I recommend abstracting site wide headings into classes because then they are portable, predictable, and dry. You can call them anything you like.
... [HTML5] Section 元素旨在帮助浏览器确定标题的真正级别，但不一定决定如何对其进行样式设置。
那么，我们如何在 HTML5 世界中设置标题的样式？
... 我们不应该使用分段元素进行样式设置。我们应该让他们完成他们设计的工作，即整理文档树，并以另一种更好地满足我们目标的方式解决样式问题：使用简单的可重用类名，无论多深，都可以应用于我们的任何标题它们可能在切片内容中。
我建议将站点范围的标题抽象为类，因为这样它们是可移植的、可预测的和干燥的。你可以随意称呼他们。
2. csswizardry.com
2. csswizardry.com
Another absolutely stellar nugget of wisdom [Nicole Sullivan has] given us is what I call double-stranded heading hierarchy. This is the practice of defining a class every time you define a heading in CSS.
... By assigning a class along with each heading style we now have those styles attached to a very flexible selector that can be moved anywhere, rather than to a very specific and non-movable one.
[妮可·沙利文 (Nicole Sullivan) 给我们的另一个绝对一流的智慧金块是我所说的双链标题层次结构。这是每次在 CSS 中定义标题时定义一个类的做法。
...通过为每个标题样式分配一个类，我们现在将这些样式附加到一个非常灵活的选择器上，该选择器可以移动到任何地方，而不是一个非常具体且不可移动的选择器。
3. groups.google.com
3. groups.google.com
Here's a pseudo-html5 usage example (h/t Jamund Ferguson):
这是一个伪 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>
Please read full articles (and thread), via links above, for more detailed information related to this question/topic.
请通过上面的链接阅读完整的文章（和主题），以获取与此问题/主题相关的更多详细信息。
回答by animuson
Most stylesheets have a set of font-sizes that correspond with heading styles 1 through 6. Sometimes, elsewhere on the page, web designers want to use those same font sizes on text which should notbe a part of an actual heading element, for semantic reasons. Rather than providing names for each of those sizes like .size-12, .size-14, .size-16, etc, it's easier just to name them all with class names similar to your headings. That way, you know that the text will be the same size as an H1 element, even though it's not actually an H1 element. I've done this a few times myself.
大多数样式有一套字体大小相对应通过6标题样式1有时，别处的网页上，网页设计师想使用这些文字相同的字体大小应该不会是一个实际的标题元素的一部分，语义原因。与其为每个大小（如.size-12、.size-14、.size-16等）都提供名称，不如将它们全部命名为与您的标题相似的类名。这样，您就知道文本的大小将与 H1 元素相同，即使它实际上不是 H1 元素。我自己已经这样做了几次。
回答by Mike H.
A few reasons I can think of:
我能想到的几个原因：
- Using div instead of proper tag to get the visual of a header without an impact on SEO
- To avoid complications from browser inconsistencies
- Compatibility with other libraries and frameworks that choose to do the same for reasons 1 and 2
- Design flexibility (as noted by @scrappedcola in the comments)
- 使用 div 而不是适当的标签来获得标题的视觉效果而不影响 SEO
- 避免浏览器不一致引起的并发症
- 与出于原因 1 和 2 选择相同的其他库和框架的兼容性
- 设计灵活性（如@scrappedcola 在评论中所指出的）
回答by Byran Zaugg
This allows for a separations of visual hierarchy form semantic hierarchy. eg, I want to tell the viewer one thing, while telling a computer (search engines) something else.
这允许视觉层次结构与语义层次结构的分离。例如，我想告诉观众一件事，同时告诉计算机（搜索引擎）另一件事。
<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>
See:
看：
回答by Becuzz
The only thing I can think of offhand is for search engines. Many will look at an actual h1 tag as the title or subject of a page and use that for searches, etc. Having multiple h1 tags can confuse the search engine spiders and may screw up searches that would return results for your site (I've also heard it may get you on the "bad site" list with some spiders like Google).
我唯一能想到的就是搜索引擎。许多人会将实际的 h1 标签视为页面的标题或主题，并将其用于搜索等。拥有多个 h1 标签可能会混淆搜索引擎蜘蛛，并可能会搞砸为您的网站返回结果的搜索（我已经还听说它可能会使您与某些蜘蛛（如 Google）一起进入“不良站点”列表）。
Having the styles allows you to have the same visual look to an element without screwing up search engines.
拥有样式可以让您对元素具有相同的视觉外观，而不会搞砸搜索引擎。
回答by Peter Swords
Another reason I have come across recently... this is not particular to Angular but it serves as a good example:
我最近遇到的另一个原因......这不是 Angular 特有的，但它是一个很好的例子：
I want to create dynamic/declarative forms in Angular (see Dynamic Forms in the Angular Cookbook) and allow styled text elements. Maximum flexibility would call for allowing me to declaratively add arbitrary HTML elements to my forms, but this is open to scripting attacks, and requires explicit subversion of the Angular compiler to even allow it. Instead, I allow text elements to be added to forms, along with a class for controlling style. So I can use the .h1 style but not the h1 element.
我想在 Angular 中创建动态/声明性表单（请参阅 Angular Cookbook 中的动态表单）并允许样式化文本元素。最大的灵活性要求允许我以声明方式将任意 HTML 元素添加到我的表单中，但这对脚本攻击是开放的，并且需要显式颠覆 Angular 编译器才能允许它。相反，我允许将文本元素以及用于控制样式的类添加到表单中。所以我可以使用 .h1 样式而不是 h1 元素。
回答by agc
This would definitely help in-terms of SEO and google crawlers to understand your page better. When it reads h1, it assumes that whatever is in there must be the focal point of the page. H2, would be the second components and so on. This way Google can understand the "scope" of what your page is covering in-terms of content.
这肯定有助于 SEO 和谷歌爬虫更好地了解您的页面。当它读取 h1 时，它假定其中的任何内容都必须是页面的焦点。H2，将是第二个组件，依此类推。通过这种方式，Google 可以了解您的网页在内容方面所涵盖的“范围”。
Not entirely sure, but a big variable in my opinion would be the "read" mode of pages. This would allow devices and readers to organize content especially for devices used by visually impaired people.
不完全确定，但我认为一个很大的变量是页面的“阅读”模式。这将允许设备和阅读器组织内容，特别是为视障人士使用的设备。
Also it provides structure to the page and a sense of order.
它还为页面提供了结构和秩序感。
