Question

I'm looking for a proper way to add HTML5 (semantic) content-related marginalia (like images, notes, amendments, lists,...) to the text of an article (which means inside of <article> within <p>).

My first though was to use <aside> but on the W3C Wiki I found this:

The <aside> element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. (via W3C Wiki)

...even though marginalia is not indirect (like copyright) but direct related (like amendments) to the content, the aside tag seems to be a suitable option but only as a sections-tag instead of text-level semantics. The markup would result in something like this:

<article>
  <p>Lorem ipsum dolor sit amet.</p>
  <aside>(dolor euismod tincidunt)</aside>
</article>

Instead of this:

<article>
  <p>Lorem ipsum dolor <span>(dolor euismod tincidunt)</span> sit amet.</p>
</article>

On text-level layer there are possibly <small> and/or <mark> (instead of <span> above):

The <small> element represents side comments such as small print. (via W3C Wiki)

...which could be used for attribution but is made for small print (like copyrights).

The <mark> element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. (via W3C Wiki)

...which could be used for reference purposes in another additional context (like single search keywords).


To sum it up: I'm looking for a proper way to add additional (related) content after a specific word within a text. How would I achieve this semantically? Are there any more suitable (HTML5) tags or even other options to do this?

A possible use case could be a misspelled word in a text, with the right spelling added as marginalia with additional information about the evolutionary history of the affected word.

No correct solution

OTHER TIPS

<dfn> would be a solution for text terms.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top