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＆gt; 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 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来表示.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>

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

1 个答案: