Bootstrap |什么时候应该使用 <p class="h1"> 而不是 <h1>?

Bootstrap | When should you use <p class="h1"> over <h1>?

就 Bootstrap 提供的内容而言,我不明白为什么有人会在 h 标签上使用 p 标签来创建 headers。

<h1>Bootstrap</h1>

<p class="h1">Bootstrap</p>

Bootstrap 文档说明了以下关于 p 标签的内容:

.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

作为前端开发的新手,我不明白这种情况...无法使用关联的HTML 元素,如果有人可以解释一下。

每个标签都有自己的含义 - semantic HTML. E.g. h1:

Use only one per page or view. It should concisely describe the overall purpose of the content.

但是如果你不想给你的页面部分添加任何特殊意义,只是为了它看起来像 <h1>,那么你使用CSS像这样设计元素样式。

这些 类 为元素提供相同的 样式 ,但不是它们的 HTML 属性,这意味着任何 scraper、解析器或搜索引擎索引器不会将其视为 header,而只是一个普通的段落文本,当您需要以视觉方式向用户突出显示某些内容但不对其进行标记时,这有时是所需的输出作为索引器的 header。

一般来说,HTML 标签(h1、p、a 等)具有语义。也就是说,除了一些基本样式之外,它们还提供有关元素的信息,这是可访问性的关键(例如,在使用屏幕 reader 时)。 有时,您可能希望文本元素具有 h1 方面(字体系列、大小...),但从语义的角度来看并不那么重要,这就是为什么 Bootstrap 提供 h1 作为 class . 我希望这能澄清你的问题:)

在语义 HTML 和 SEO 方面,您应该使用标题标签(h1、h2、h3...),但是,例如,如果您想给

元素或者不影响语义的,应该使用heading 类