HTML aside Tag

HTML <aside> tag is used to show the content which is related to the main content and a part of it but it's just some additional information that is useful for the viewer of the webpage.

For example, if you have a webpage for your portfolio, and you have specified all your skills, the projects you have worked about, information about your schooling, and your hometown. Now to add to this information, you can add a few lines about your hometown, which is not directly related to your portfolio but is definitely some additional information, so you can keep this inside the <aside> tag.

The contents inside the <aside> tag usually has content that adds to the main content. You can actually add a few extra lines to explain briefly, what's inside the main content.

• The <aside> tag contains mainly author information, links, related content, etc.

• The <aside> tag is used to easily differentiate between the main text and subordinated text.

• It needs CSS for any specific styling.

• Also, this is a block-level element.

HTML <aside> Tag - Syntax and Usage

The <aside> element requires the start(opening) tag and end(closing) tag.

Below we have a basic syntax for the same:

<aside>
    ...
</aside>

HTML <aside> Tag Basic Example

Below we have a basic example for a clear understanding of <aside> tag:

Let's take one more example with some different styling given to the <aside> tag.

HTML <aside> Tag Attributes

This element does not have any specific attributes although this element supports Global attributes and Event attributes.

Difference between <aside> tag and <div> tag

The <aside> and <div> both elements have the same function but possess different meanings:

<div>: This tag creates a division or section on a website.

<aside>: The <aside> also creates section or division on a webpage but it only contains the content related to the main content of that webpage.

The HTML <aside> tag is useful for the search engine, browsers, etc to understand which content is the main content and which part of content is just some additional information.

Default CSS Style for HTML <aside> tag

Most Browsers has the default values as given below:

aside {
    display: block;
}

Browser Support for HTML <aside> tag

Following browsers support this attribute:

• Firefox 4+

• Google Chrome 6+

• Internet Explorer 9+

• Apple Safari 5+

• Opera 11.1+