On pages where I display a single blog post, my HTML markup structure can be broken down into the following:
<body> <header><h1>Site Header</h1></header> <main> <article></article> </main> <aside>Sidebar here</aside> </body>
What I'm trying to solve is the issue where I want the blog article title to appear full width with a background image, exactly like this: https://avada.theme-fusion.com/movers/moving-your-business/.
The only way I've found to accomplish this without doing anything "hacky" due to container constraints is to do exactly like they have done and put the full width visible article title outside of the
<article> tag, and then include a duplicate hidden article title inside of the tag, like this:
<body> <header><h1>Site header</h1></header> <!-- Visible and full page width --> <div><h1>Article title</h1></div> <main> <article> <!-- Hidden but included for semantics --> <span style="display: none;">Article title</span> </article> </main> <aside></aside> </body>
They have used a
<span> tag in this case, but I'm wondering if there would be any SEO or potentially accessibility concerns with duplicating the blog post title in the article tag for semantic reasons, and putting one outside of it for visual reasons.