<aside>

<aside> is a Sectional component that renders a collapsible, boxed section of content that is expanded when the user clicks the banner to display supplementary material.

Attributes and Properties

Example: <aside> with default title

An <aside> with its default title is automatically numbered in sequence with other sectional components on the page.

Example: <aside> with custom title

<section>
<p>Here is the main content.</p>
</section>
<aside><title>And now for something completely different...</title>
  Here is bonus content!
</aside>

An <aside> with a custom title does not have automatic numbering.

Attribute Example: startOpen

<p>Here is the main content.</p>
<aside startOpen>
  I really want you to see this before you close it...
</aside>

The startOpen attribute overrides the default behavior in which the <aside> section appears closed upon opening the page.

Attribute Example: includeParentNumber

<section>
  <aside>
    <p>This aside is nested inside a section. The default number does not include the parent number.</p>
  </aside>
</section>
 
<section>
  <aside includeParentNumber="true">
    <p>This aside is nested inside a section. Rendering of the parent section number has been included.</p>
  </aside>
</section>

The includeParentNumber attribute is false by default for the <aside> component (and true by default for the <section> component).

In order to include the number of the parent sectional component, set includeParentNumber to true.

Attribute Example: includeAutoNumber

  <aside><title>Custom title</title>
    <p>In this aside, the custom title overrides the default numbering of the aside.</p>
  </aside>
 
  <aside boxed includeAutoNumber="true"><title>Custom title with auto-numbering</title>
    <p>In this problem, the number of the aside is still rendered in addition to the custom title.</p>
  </aside>

The includeAutoNumber attribute is false by default for the <aside> component. This means that if an aside contains a nested <title>, it will not render the default numbering (although it will still be counted in the numbering scheme behind the scenes).

In order to display the aside number in addition to the custom <title>, set the includeAutoNumber attribute to true.