HTML <aside> Tag
The <aside> tag in HTML defines content that is related to the main content but is not the primary focus. It's often used for sidebars, pull quotes, advertisements, related links, or any other content that could be considered tangential or supplementary to the main topic of the page or section.
Syntax
<aside>
Content to be placed in the aside
</aside>
Attributes
The <aside> tag supports the Global Attributes in HTML.
| Attribute | Value | Description |
|---|---|---|
| class | classnames | Specifies one or more class names for an element |
| id | id | Specifies a unique id for an element |
| style | CSS properties | Specifies CSS styling for an element |
| title | text | Specifies extra information about an element |
| dir | ltr, rtl, auto | Specifies the text direction for the element |
| lang | language_code | Specifies the language of the element's content |
| hidden | hidden | Specifies that the element is not yet, or is no longer, relevant |
| tabindex | number | Specifies the tabbing order for an element |
| accesskey | character | Specifies a keyboard shortcut to activate or focus an element |
| draggable | true, false, auto | Specifies whether an element is draggable or not |
| spellcheck | true, false | Specifies if spellcheck is enabled or disabled for the element |
| contenteditable | true, false, inherit | Specifies if the element is editable or not |
| contextmenu | menu_id | Specifies a context menu for an element |
| data-* | data | Stores custom data private to the page or application |
Example
<article>
<h1>Main Article Title</h1>
<p>This is the main content of the article.</p>
<aside>
<h3>Related Information</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</aside>
<p>Additional content of the main article goes here.</p>
</article>
More Examples
Simple Sidebar
This example shows a basic sidebar with a list of related articles.
<article>
<h2>Main Article</h2>
<p>This is the main article content.</p>
</article>
<aside>
<h3>Related Articles</h3>
<ul>
<li><a href="#">Article 1</a></li>
<li><a href="#">Article 2</a></li>
<li><a href="#">Article 3</a></li>
</ul>
</aside>
Aside with a Pull Quote
This example shows how to use aside for a pull quote to highlight content.
<article>
<p>This is a longer piece of text. It has some ideas worth emphasizing.</p>
<aside>
<blockquote>
"This is an important quote that deserves attention."
</blockquote>
</aside>
<p>And the main text continues after the quote.</p>
</article>
Aside with Advertisements
You can also use <aside> to contain advertisements.
<article>
<p>Main content of the page.</p>
</article>
<aside>
<div class="ad">
<h3>Advertisement</h3>
<p>Buy our product!</p>
</div>
</aside>
Aside Within a Section
The <aside> can be used within a section of an article for contextually related material.
<article>
<h2>Article Title</h2>
<p>First paragraph of the article.</p>
<section>
<h3>A Section of the Article</h3>
<p>Content of the section.</p>
<aside>
<h4>Related to this Section</h4>
<p>Additional details, links or notes relevant to this section.</p>
</aside>
</section>
<p>More text after section.</p>
</article>
Browser Support
The <aside> tag is supported in all modern browsers:
- Chrome
- Edge
- Firefox
- Safari
- Opera
Notes and Tips
- The
<aside>tag should contain content that is complementary to the main content of the page or section. - Use
<aside>for content that could be removed without significantly affecting the core message of the main content. - Avoid using
<aside>for primary content; stick to the main page content or related articles for key information. - The placement of the aside content can be controlled via CSS. Usually, is used as a sidebar on the right or left of the main content.
- While
<aside>commonly appears next to<article>, they aren't directly related; use<aside>based on content role rather than placement. - You can nest multiple
<aside>elements for different purposes but be cautious to avoid semantic confusion. - Always strive for a clear content structure that accurately reflects the semantic meaning of your webpage.
