【问题标题】:Bootstrap | When should you use <p class="h1"> over <h1>?引导程序 |什么时候应该使用 <p class="h1"> 而不是 <h1>?
【发布时间】:2021-02-24 13:19:04
【问题描述】:
就 Bootstrap 提供的功能而言,我不明白为什么有人会使用 p 标签而不是 h 标签来创建标题。
<h1>Bootstrap</h1>
<p class="h1">Bootstrap</p>
Bootstrap 文档中关于p 标签的内容如下:
.h1 到 .h6 类也可用,当您想要匹配标题的字体样式但不能使用关联的 HTML 元素时。
作为一个刚接触前端开发的人,我不明白这种情况...不能使用相关的 HTML 元素,如果有人能解释一下。
【问题讨论】:
标签:
html
twitter-bootstrap
frontend
web-frontend
【解决方案1】:
每个标签都有它自己的含义 - semantic HTML。例如。 h1:
每个页面或视图只使用一个。它应该简明扼要地描述内容的总体目的。
但如果你不想为你的页面部分添加任何特殊含义,只是为了它看起来像 <h1>,那么你可以使用 CSS 来设置类似它的元素样式。
【解决方案2】:
一般来说,HTML 标签(h1、p、a 等)具有语义含义。也就是说,除了一些基本样式之外,它们还提供有关元素的信息,这是可访问性的关键(例如在使用屏幕阅读器时)。
有时,您可能希望拥有一个具有 h1 方面(字体系列、大小...)的文本元素,但从语义的角度来看并没有那么重要,这就是 Bootstrap 提供 h1 作为一个类的原因。
我希望这能澄清你的问题:)
【解决方案3】:
这些类为元素提供相同的样式,但不是它们的 HTML 属性,这意味着任何 scraper、解析器或搜索引擎索引器都不会将其视为一个标题,但只是一个普通的段落文本,当您需要在视觉上向用户突出显示某些内容但不将其标记为索引器的标题时,有时这是所需的输出。
【解决方案4】:
就语义 HTML 和 SEO 而言,您应该使用标题标签(h1、h2、h3...),但是,例如,如果您想将 H1 外观赋予一个
元素或不影响语义,你应该使用标题类