HTML <aside> tag

HTML <aside> tag : Definition

The <aside> tag in HTML represents some portion of a document or a page whose content is only indirectly related to the document's or page's main content.

The aside content should be indirectly related to the primary content of a page or a document.

The <aside> content is often placed as a sidebar in a document.

The <aside> element can be used for typographical effects such as pulling quotes or sidebars, for advertising, for groups of nav elements, and for other content that is separate from the primary content of the page.

<aside> tag example

aside {
    width: 40%;
    padding-left: .5rem;
    margin-left: .5rem;
    float: right;
    box-shadow: inset 5px 0 5px -5px #29627e;
    font-style: italic;
    color: #29627e;
}



aside > p {
    margin: .5rem;
}

p {
    font-family: 'Fira Sans', sans-serif;
}
<p>The <aside> tag in HTML represents some portion of a document or a page whose 
  content is only indirectly related to the document's or page's main content.</p>
<aside>
    <p>The <aside> element in html</p>
</aside>
<p>The aside content should be indirectly related to the primary content of a page or 
a document. </p>
<p>The <aside> content is often placed as a sidebar in a document.> </p>

Output:

The <aside> tag in HTML represents some portion of a document or a page whose 
  content is only indirectly related to the document's or page's main content.
The <aside> content should be indirectly related to the primary content of a page or 
a document. 
The <aside> content is often placed as a sidebar in a document.