-3

Most of the news articles I've seen are peppered with HTML elements containing unrelated content that

  • weren't written by the author,
  • don't semantically belong to the story,
  • are only there for marketing or other purposes, and
  • they can mess up accessibility (e.g., screen reader navigation).

Thus, these should be probably placed at a different place in the HTML markup.

How would it be possible to visually mix these unrelated content with the article text while still keeping the semantic integrity of the HTML markup?

For example, have a <div> container somewhere in the HTML markup containing the ads (or anchors to generate the ads dynamically), and visually intersperse them with the <p>'s of the <article>. (That is, don't reorganize the DOM but render elements in other places that would achieve the same effect, as if those elements were included there in the DOM.)

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Article title</title>
  </head>

  <body>
    <main>
      <article>
        <h1>Article title</h2>
        <p>...</p>
        <h2>Subsection</h3>
        <p>...</p>
        <p>...</p>
        <h2>Another subsection</h3>
        <p>...</p>
      </article>

      <aside>
        <h2>Related articles</h2>

        <ul>
          <li><a href="#">It never stops raining</a></li>
          <li><a href="#">Oh well...</a></li>
        </ul>
      </aside>

      <div id="ad-container">
        <div class="ad">Tis an ad</div>
        <div class="ad">Yet another ad</div>
      </div>

    </main>

but render it so:

Article title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.

Related articles

  • It never stops raining
  • Oh well...

Subsection

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.

AD BLOCK: Tis an ad.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.

Another subsection

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.

AD BLOCK: Yet another ad.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.

Share a link to this question (includes your user id)
|edit|reopen| undelete |flag|
0

No, it's not possible. Maybe possible? (See Update.)

Elements can't be moved around in the DOM with CSS (see answer to this question), but that was never the point: the HTML markup is static int this scenario (and semantically sound), and would like to render elements in a way that they appear in a different flow.

Some resources:

Update: The answer's to the linked question are probably missing the point that it was about rendering elements in different places and not move it around in the DOM.

Share a link to this answer (includes your user id)
|edit|| undelete |flag|
  • 1
    Elements can be moved around with CSS only, visually. They can't be moved within the DOM. In other words, an ad could be placed at the end of the DOM, but be shown underneath the header of the article using CSS only. See CSS Zen Garden for examples of using the same HTML to achieve very different visual outcomes using CSS. – Heretic Monkey May 4 at 14:59
  • Yes, I meant visually, thanks for the comment and for link! I presumed that it is possible, but CSS beginner here. Updated the question, and please feel free to amend it too, if it could be clarified further. – toraritte May 4 at 15:54