如何在不破坏逻辑标题结构的情况下在标题之前直观地放置一些文本？

Question

设计师通常需要这样的东西，例如显示搜索结果时：

<H1>Search results</h1>

<div class="location">Home > Departement > Section > Bla</div>
<H2>Title of the document</h2>
<p>Some content... some content...</p>

<div class="location">Home > Departement > Section > Bla</div>
<H2>Title of the document</h2>
<p>Some content... some content...</p>

...etc...

虽然在视觉上这很好，但很难在 HTML 中对其进行编码，因为面包屑导航（主页 > 部门...）位于它实际所属的标题前面。

事实上，HTML 看起来像这样：

<H1>Search results</h1>

<H2>Title of the document</h2>
<div class="location">Home > Departement > Section > Bla</div>
<p>Some content... some content...</p>

<H2>Title of the document</h2>
<div class="location">Home > Departement > Section > Bla</div>
<p>Some content... some content...</p>

...etc...

我知道有一些方法可以绝对定位东西等，让东西看起来像需要的同时在后台保持正确的 HTML，但这总是很棘手并且取决于你知道的一些假设绝对定位的元素需要预留多少高度等等，很快就到了极限

有更好的方法吗？也许 HTML article 可以帮到我们，所以我们可以简单地用它包围每个搜索元素？这是正确的吗？

<H1>Search results</h1>

<article>
  <div class="location">Home > Departement > Section > Bla</div>
  <H2>Title of the document</h2>
  <p>Some content... some content...</p>
</article>

<article>
  <div class="location">Home > Departement > Section > Bla</div>
  <H2>Title of the document</h2>
  <p>Some content... some content...</p>
</article>

Answer 1

是的，这正是对内容元素进行分段的目的（如 article）。

由于在此处使用了分段内容元素，.location 为 in scope of its heading, even when the heading comes later。
以及分段内容元素 article is appropriate for a search result.

这不是必需的，但您可能想使用 header element to denote that the .location is not part of the section’s main content:

<article>
  <header>
    <div class="location">Home → Departement → Section → Bla</div>
    <h2>Title of the document</h2>
  </header>
  <p>Some content … some content …</p>
</article>

如何在不破坏逻辑标题结构的情况下在标题之前直观地放置一些文本？

How to place some text visually before a heading without breaking the logical heading structure?

html

accessibility

semantic-markup