What HTML element for semantic sidenotes? : <p>I like to add responsive sidenotes to my blog posts. Responsive as in: hidden on small viewports, visible in the margin on wide viewports.</p>

<p>When hidden on small screens, a visible element ('link') is needed indicating there's more to read. My solution for this so far is: </p>

<pre><code>&lt;p&gt;Some sentence with
&lt;span class="sidenote" onclick="this.classList.toggle('active');"&gt;
  underlined text
  &lt;span class="sidenote__content"&gt;
    Sidenote content
  &lt;/span&gt;
&lt;/span&gt;, which is clickable on small viewports.&lt;/p&gt;
</code></pre>

<p>(with  added line breaks for readability)</p>

<p>With CSS I add asterisks to both the underlined text and the sidenote content to visually connect them on large screens.</p>

<p>The problems with this solution are that the <code>sidenote__content</code> correct display depends on CSS. It's shown in readers like Pocket, with:</p>

<ul>
<li>The sidenote content showing up mid sentence without any visual cues</li>
<li>No space between the underlined text and the sidenote content. </li>
</ul>

<p>I'm hoping that there's a more semantic solution than simple spans. <code>&lt;aside&gt;</code> and <code>&lt;section&gt;</code> can't be used as they're block elements and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p" rel="noreferrer">can automatically close</a> the parent's p element.</p>

<p>A solution could be to separate the sidenote content from the link. However  I'd prefer to keep the set of sidenote and its link as one set or pair, so they can be inserted as such into posts. Splitting them up would require javascript logic to match links with their content and can cause maintenance issues when one half of the set is missing.</p>
