Question

I am writing an online tutorial with sort of side notes or as they call it “admonitions” similar to those in Django tutorial:
https://docs.djangoproject.com/en/dev/intro/tutorial01/ (I mean the the boxes with green a frame and a note icon).

Which HTML tag I should use to enclose such notes to add a semantic meaning of a note that may be useful to read at a given point of a tutorial, but is not part of the main tutorial flow?

Noteworthy, the tag must allow for enclosing block elements.

Answer 1

In HTML5 (supported by all modern browsers), the tag is aside.

From http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-aside-element:

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.
Such sections are often represented as sidebars in printed typography.

The element can be used for typographical effects like pull quotes or
sidebars, for advertising, for groups of nav elements, and for other
content that is considered separate from the main content of the page.

It’s not appropriate to use the aside element just for parentheticals,
since those are part of the main flow of the document.

This is a block-level element and enclose anything a block-level element usually can (i.e. almost anything). It is essentially a “semantic div”.