Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 663287 of <aside>

  • Revision slug: Web/HTML/Element/aside
  • Revision title: <aside>
  • Revision id: 663287
  • Created:
  • Creator: NinjaBanjo
  • Is current revision? No
  • Comment

Revision Content

The HTML element < aside> represents a section of the page with content connected tangentially to the rest , which could be considered separate from that content. These sections are often represented as sidebars or inserts. They often contain the definitions on the sidebars, such as definitions from the glossary ; there may also be other types of information , such as related advertisements ; the biography of the author ; web applications ; profile information or related links on the blog.

Usage notes:

  • Do not use the <aside> element to tag parenthesized text, as this kind of text is considered part of the main flow.
  • Content categories Flow content, sectioning content, palpable content.
  • Permitted contentFlow content.
  • Tag omission {{no_tag_omission}}
  • Permitted parent elements Any element that accepts flow content. Note that an <aside> element must not be a descendant of an {{HTMLElement("address")}} element.
  • DOM interface {{domxref("HTMLElement")}}

Attributes

This element only includes the global attributes.

Examples

<article>
  <p>
    The Disney movie <em>The Little Mermaid</em> was
    first released to theatres in 1989.
  </p>
  <aside>
    The movie earned $87 million during its initial release.
  </aside>
  <p>
    More info about the movie...
  </p>
</article>

{{EmbedLiveSample("Examples")}}

 

Specifications

Specification Status Comment
{{SpecName('HTML WHATWG', 'sections.html#the-aside-element', '<aside>')}} {{Spec2('HTML WHATWG')}}  
{{SpecName('HTML5 W3C', 'sections.html#the-aside-element', '<aside>')}} {{Spec2('HTML5 W3C')}}  

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 5 {{CompatGeckoDesktop("2.0")}} 9.0 11.10 4.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.2 {{CompatGeckoMobile("2.0")}} 9.0 11.0 5.0 (iOS 4.2)

See also

  • Others section-related elements: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};
  • Sections and outlines of an HTML5 document.
{{HTMLRef}}

Revision Source

<p>The HTML element &lt; aside&gt; represents a section of the page with content connected tangentially to the rest , which could be considered separate from that content. These sections are often represented as sidebars or inserts. They often contain the definitions on the sidebars, such as definitions from the glossary ; there may also be other types of information , such as related advertisements ; the biography of the author ; web applications ; profile information or related links on the blog.</p>
<div class="note">
 <p><em>Usage notes:</em></p>
 <ul>
  <li>Do not use the <code>&lt;aside&gt;</code> element to tag parenthesized text, as this kind of text is considered part of the main flow.</li>
 </ul>
</div>
<ul class="htmlelt">
 <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, sectioning content, palpable content.</li>
 <li><dfn>Permitted content</dfn><a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Flow content</a>.</li>
 <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li>
 <li><dfn>Permitted parent elements</dfn> Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">flow content</a>. Note that an <code>&lt;aside&gt;</code> element must not be a descendant of an {{HTMLElement("address")}} element.</li>
 <li><dfn>DOM interface</dfn> {{domxref("HTMLElement")}}</li>
</ul>
<h2 id="Attributes">Attributes</h2>
<p><span style="line-height: 21px;">This element only includes the&nbsp;</span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p>
<h2 id="Examples">Examples</h2>
<pre class="brush: html">
&lt;article&gt;
  &lt;p&gt;
    The Disney movie &lt;em&gt;The Little Mermaid&lt;/em&gt; was
    first released to theatres in 1989.
  &lt;/p&gt;
  &lt;aside&gt;
    The movie earned $87 million during its initial release.
  &lt;/aside&gt;
  &lt;p&gt;
    More info about the movie...
  &lt;/p&gt;
&lt;/article&gt;</pre>
<p>{{EmbedLiveSample("Examples")}}</p>
<h2 id="Specifications" name="Specifications">&nbsp;</h2>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'sections.html#the-aside-element', '&lt;aside&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'sections.html#the-aside-element', '&lt;aside&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>5</td>
    <td>{{CompatGeckoDesktop("2.0")}}</td>
    <td>9.0</td>
    <td>11.10</td>
    <td>4.1</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE Mobile</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>2.2</td>
    <td>{{CompatGeckoMobile("2.0")}}</td>
    <td>9.0</td>
    <td>11.0</td>
    <td>5.0 (iOS 4.2)</td>
   </tr>
  </tbody>
 </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
 <li>Others section-related elements: {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}};</li>
 <li><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Sections and outlines of an HTML5 document</a>.</li>
</ul>
<div>
 {{HTMLRef}}</div>
Revert to this revision