Question

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.

Answer 1

The semantically closest one seems to be the <details> element – usage