title: What's the most semantically correct way to do subheadings?
body: <p>What's the most semantically correct way to do subheadings or subtitles? Example below.</p>
  
  <hr />
  
  <h2>About</h2>
  
  <p><em><h3><sup>We sell apples, yay!</sup></h3></em></p>
  
  <p>Lorem ipsum...</p>
  
  <hr />
  
  <p>Since the contents of the subheading aren't of much importance when compared to actual, informative headings, I thought that they should not be seen as separate headings by screen readers and search engines.</p>
  
  <p>So, the options that I thought of are as follows:</p>
  
  <ul>
  <li><code>&lt;h2&gt;About&lt;/h2&gt;&lt;h3&gt;We sell apples, yay!&lt;/h3&gt;</code> -> This is what I would like to avoid.</li>
  <li><code>&lt;h2&gt;About&lt;/h2&gt;&lt;span class="subheading"&gt;We sell apples, yay!&lt;/span&gt;</code> -> Works. Is it the best way? Don't know.</li>
  <li><code>&lt;h2&gt;About&lt;span class="subheading"&gt;We sell apples, yay!&lt;/span&gt;&lt;/h2&gt;</code> -> Part of the heading. I don't really know if it's a good or bad thing.</li>
  </ul>
  
  <p>Any advice on this one?</p>