Search code examples
csshtmlsemantics

Correct way to put an <aside> element in the middle of a paragraph?

I have been reading about the semantic uses of the <aside> HTML5 element and it seems like a good way to handle footnotes/sidenotes since these are tangential to the main flow of text. However, this is a block-level element, so I cannot put an aside element inside larger paragraphs, e.g.:

<p>
    A b c. 
    <aside>X y z.</aside>
    D e f.
</p>

This breaks the paragraph into two with the aside content in the middle. My goal, after styling, is to see a continuous flow of text, "A b c. D e f." (with the aside content repositioned), or "A b c. X y z. D e f." (with the aside content not breaking the flow of the text).

Is aside the Right Thing for this job, semantically and stylistically?

Solution

  • <aside> is intended to hold a section of a page that can stand alone. It's not appropriate for a footnote/sidenote within a paragraph