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

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 中的编码非常困难，因为面包屑（Home > Departement...）被放置在它实际所属的标题之前。

事实上，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 articles 来拯救我们，所以我们可以简单地用它包围每个搜索元素？这是正确的吗？

<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 来表示.location 是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>