'Isolate DIV from outer HTML

I need to "isolate/separate" a <div> from the html around it. Meaning, the <p>More text</p> underneath the <div> should be connected to the <h1> and the first paragraph but NOT the <h2> and the paragraph inside the information panel. Is that possible?

    <h1>Header</h1>
    <p>Some text</p>
    <div> //this div should be isolated in a machine reading perspective from the HTML around it
      <h2>Information</h2>
      <p>Some information text</p>
    </div>
    <p>More text that follows the paragraph above the div, NOT the div itself.</p>

Edit. It has to do with Web Content Accessibility Guidelines (WCAG). The HTML itself works just fine but I got a review from some WCAG instance telling me this is not machine readable in a correct way. The text that follows the information div should be the continuation of the text above the information div, not the text in the div itself.

They say this would be correct:

<h1>Header</h1>
<p>Some text</p>
<div>
  <h2>Information</h2>
  <p>Some information text</p>
</div>
<h2><Header</h2>
<p>More text</p>

Or this:

<h1>Header</h1>
<p>Some text</p>
<p>More text</p>
<div>
   <h2>Information</h2>
   <p>Some information text</p>
</div>

Problem is this is about a cms and the editors wants to be able to add information panels in the middle of a paragraph without the need of a new header underneath it. That's why I'm asking. Mission impossible?

html


Solution 1:[1]

<p>Some information text<p>

Should be

<p>Some information text</p>

Solution 2:[2]

You can this

<!DOCTYPE html>
<html>
<title>Web Page Design</title>
<head>
<style>
h1{
    color: #000;
    font-size: 25px;
}

p {
    color: red;
    font-size:15px;
}

div.more-area{
    border:1px solid gray;
    padding: 10px;
}

div.more-area > h2 {
    color: blue;
    font-size: 20px;
}

div.more-area > p {
    color: pink;
    font-size: 12px;
}

</style>
</head>
<body>

<h1>Header</h1>
<p>Some text</p>
<p>More text</p>
<div class="more-area">
   <h2>Information</h2>
   <p>Some information text</p>
</div>


</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 thetaprime
Solution 2

Related Questions