组件标题文本的元素是什么

Question

我有一个组件需要这样的标题文本

<div class="custom-component">
  <h?>MY COMPONENT HEADER</h?>
  <p>My component content</p>
</div>

我应该在这里使用什么元素（代替

<h?>

）？

如果我使用

<h3>

或

<h4>

或其他内容，我就有破坏标题树的风险，因为该组件可能在页面上的任何位置使用，并且可能位于

<h1>

、

<h2>

、

<h3>

或其他内容下方。 （注意：HTML 规范 要求

<h3>

不能跟在

<h1>

后面，除非中间有

<h2>

）

是否有任何通用方法来定义标题元素，将其内容适当地定义为标题，而无需事先知道它将出现在页面上与其他

<h#>

元素相关的位置？

澄清一下，我不需要任何 CSS 建议。 我想要一个语义 HTML 标头标签，将其自身指示为标头（对于我的组件），不需要预先了解文档中的其他

<h#>

- 即它应该可以灵活地在各种地方使用或页面。

Answer 1

我找到了问题的答案！

答案是：目前还没有使用纯 HTML 的解决方案。 :(

有趣的是，Tim Berners-Lee（万维网创始人）实际上早在 1991 年就提出了通用的

<h>

标签！ 但它尚未被任何主要浏览器正式采用或使用。

如果您使用 React 或 Vue，

这是一个不错的解决方案，可能在大多数情况下都有效。

Answer 2

您可以将

<div>

与

role='heading'

属性一起使用，并使用JS分析页面结构以添加正确的

aria-level

属性。 （

aria-level

 的默认值为 

2

。）

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/heading_role

（想想看，这基本上和使用

<h2>

 然后用 JS 将其替换为正确的标题标签是一样的。）

https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceWith

Answer 3

我相信您可以从使用 BEM 约定中受益。

在 BEM 中，您有块、元素和修饰符。

对于这个具体情况，我会这样做。

<div class="custom-component">
  <div class="custom-component__header">MY COMPONENT HEADER</div>
  <div class="custom-component__content">My component content</div>
</div>

只需定义您所需的样式即可使组件看起来像您想要的那样。

但是您需要一个特定的情况，即标题中的文本需要略有不同，该怎么办？比如说，把它变大吗？

<div class="custom-component">
  <div class="custom-component__header custom-component__header--big">MY COMPONENT HEADER</div>
  <div class="custom-component__content">My component content</div>
</div>

您只需要以适当的方式编写所有 css 即可。我可以推荐您阅读此文档：

http://getbem.com/