组件的 header 文本的什么元素

Question

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

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

我应该在这里使用什么元素（代替 <h?>）？

如果我使用 <h3> 或 <h4> 或其他任何东西，我冒着破坏 header 树的风险，因为该组件可能在页面上的任何位置使用，并且可能低于 <h1>、<h2>、<h3> 或其他。（注意：The HTML spec 要求 <h3> 不能跟在 <h1> 之后，除非中间有 <h2>）

是否有任何通用的方法来定义 header 元素，将其内容适当地定义为 header，而无需事先知道它将出现在页面上的哪个位置，与另一个 <h#> 元素?

澄清一下，我不需要任何 CSS 建议。我想要一个语义 HTML header 标记，它表明自己是一个 header （对于我的组件），不需要文档中其他 <h#> 的任何预知 - - 即它应该灵活地用于各种地方或页面。

Answer 1

我相信您可以从使用 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>

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

但是您需要一个特定的案例，即 header 中的文本需要略有不同怎么办？比方说，让它变大？

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

Answer 2

我找到了问题的答案！

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

有趣的是，Tim Berners-Lee（万维网创始人）居然提出了一个通用的 <h> 标签 as early as 1991！但它从未被任何主流浏览器正式采用或使用。

如果您使用的是 React 或 Vue，here is a decent solution that will probably work in most cases。

组件的 header 文本的什么元素

What element for a component's header text

html

tags

components

element