What is the semantic HTML tag for displaying side notes and warnings?

Question

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

What HTML tag should I use to enclose such notes in order to add the semantic meaning of the note, which may be useful for reading at a given point in the textbook, but is not part of the main flow of textbooks?

It is noteworthy that the tag must include blocking elements.

Answer 1

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

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

A pending element is a section of a page that consists of content regarding content around the element and which can be considered separate from that content. Such sections are often presented as side panels in a print shop.

An element can be used for typographic effects, such as pulling quotes or sidebars, for advertising, for groups of navigation elements, and for other content that is considered separate from the main content of the page.

You cannot use an element aside only for brackets, since they are part of the main flow of the document.

This is an element of the block level and encompasses all the elements of the block level (usually almost all). This is essentially a "semantic div".

Answer 2

I believe that the accepted answer is not entirely correct. According to the HTML5 working draft , the <aside> element can be used to indicate side notes in certain, but not all cases:

• <aside> is appropriate if the side note “ can be viewed separately from the content ”, for example, Switzerland reference material in a much longer news story or draft quote in a longer article (examples from W3C)
• <aside> not suitable if the side of the note is “ in brackets ”. W3C does not give any examples of what this means. A narrow interpretation will be everything that is placed in parentheses, between commas or between dashes.

If you want to strictly interpret the W3C specification, not all alerts in the Django tutorial may be marked with <aside> . For example, a note under the heading "Doesn't match what you see?" really can’t be considered separate from the content, because it does not make sense without the content next to it. Perhaps, "Where should this code live?" also is not <aside> , since it mentions "this code", which associates it with the content.

In my opinion, the definition of W3C is unnecessarily confusing and restrictive. The definition of the dictionary in the dictionary is “a temporary departure from the main topic or topic,” and the specification should simply adhere to this, and not introduce subtle differences. Of course, there is no reason why you cannot use <aside> for all sidenotes if this makes your code simpler. Think of it as civil disobedience. :)

---

Relevant quote:

A pending element is a section of a page that consists of content regarding content around the element and which can be considered separate from that content. Such sections are often presented as side panels in a print shop.

An element can be used for typographic effects, such as pulling quotes or sidebars, for advertising, for groups of navigation elements, and for other content that is considered separate from the main content of the page.

Note. It is not recommended to use an auxiliary element only for parentheses, since they are part of the main document flow.