I am using XML-safe HTML5 and would like to know the semantic way of documenting extra tip/warning/error boxes (like those often found in technical manuals):
<div class="info-tip" role="contentinfo">
<p><strong>Tip:</strong> Holding the control key when doing this will make life easier.</p>
</div>
Except if possible I would like to use a more appropriate element. I am not even sure if contentinfo is an appropriate choice here.
ADDED: I am after a HTML5 alternative of the <note> element in DITA.
A little context: I will be using stylesheets (both XSLT2 and CSS) to re-format the content for a number of outputs.
The semantically closest one seems to be the <details> element - usage