title: Semantically Appropriate Markup of Headings for Content Flow and Accessibility
body: <p>I have a design that has a section that looks like the following:</p>
  <p><a href="https://i.stack.imgur.com/VPhot.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VPhot.png" alt="enter image description here" /></a></p>
  <p>As with anything, this could be marked up in several ways:</p>
  <pre><code>&lt;section&gt;
      &lt;header&gt;
          &lt;p&gt;About Area Title&lt;p&gt;
          &lt;h2&gt;Lorem ipsum[...]&lt;/h2&gt;
      &lt;/header&gt;
  
      &lt;p&gt;Lorem ipsum dolor sit amet[...]&lt;/p&gt;
      &lt;!-- ... --&gt;
  &lt;/section&gt;
  
  &lt;!-- OR --&gt;
  
  &lt;section&gt;
      &lt;p&gt;About Area Title&lt;p&gt;
      &lt;h2&gt;Lorem ipsum[...]&lt;/h2&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet[...]&lt;/p&gt;
      &lt;!-- ... --&gt;
  &lt;/section&gt;
  
  &lt;!-- OR --&gt;
  
  &lt;section&gt;
      &lt;h2&gt;About Area Title&lt;h2&gt;
      &lt;h3&gt;Lorem ipsum[...]&lt;/h3&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet[...]&lt;/p&gt;
      &lt;!-- ... --&gt;
  &lt;/section&gt;
  </code></pre>
  <p>What would be the the best solution (might not be listed above) that not only is semantically correct but still preserves content flow and hierarchy for screen readers, bots, etc.?</p>