CODEWITHSUNDEEP
htmlaccessibilitysemantic-markup
Joshua Muheim
Joshua Muheim

Reputation: 13195

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

Often designers require something like this, e.g. when displaying search results:

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

While visually this is nice, it's pretty hard code it in HTML, because the breadcrumb (Home > Departement...) is placed in front of the heading to which it actually belongs.

In fact, the HTML would look something like this:

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

I know there are ways to position stuff absolutely etc., making stuff look as needed while keeping the correct HTML in the background, but this is always tricky and is dependent of some assumptions like that you know how much height needs to be reserved for the absolutely positioned element, etc., which comes to its limits quickly.

Are there better ways of doing this? Maybe the HTML articles come to our rescue, so we can simply surround each search element with it? Would this be correct?

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

Upvotes: 1

Views: 82

Answers (1)

unor
unor

Reputation: 96547

Yes, this is exactly the purpose of sectioning content elements (like article).

Thanks to using a sectioning content element here, the .location is in scope of its heading, even when the heading comes later.
And the sectioning content element article is appropriate for a search result.

It’s not required, but you might want to use a 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>

Upvotes: 1

Related Questions