如何在標題之前直觀地放置一些文本而不破壞邏輯標題結構？

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相當困難的代碼，因爲麪包屑（首頁> 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>