HTML - <aside> Tag

Quiz

Introduction to <aside> Tag

The HTML <aside> is used to define content that is indirectly related to the main content of the document. It is typically used for information such as sidebars, advertisements, links to related content.

The content inside the <aside> tag is often displayed alongside the main content on a webpage, such as in the sidebar layouts, but it can also be used somewhere. It improves the accessibility and organization of the webpage by indicating that the enclosed content is not the primary focus.

Syntax

Following is the syntax of HTML <aside> tag −.

<aside>.....</aside>

Attributes

HTML aside tag supports Global and Event attributes of HTML.

Example : Basic Usage

In the following example, we are going to consider the basic usage of the <aside> tag.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML aside Tag</title>
</head>

<body>
   <!-- Creating aside Element -->
   <p>
      It is typically used to improve an article by
      adding more details or emphasizing passages that
      the reader would find interesting. If you remove
      aside content from a web page, the main content 
      will not be impacted because aside content is a 
      separate, optional component of the page.
   </p>
   <aside>About HTML aside Tag</aside>
</body>

</html>

Example : Applying CSS

Consider the following example, where we are going to use the <aside> tag and applying the CSS properties to it.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML aside Tag</title>
    <style>
        aside {
            width: 30%;
            padding-left: 15px;
            margin-left: 15px;
            float: right;
            background-color: lightgray;
            border-radius: 10px;
        }
        p {
            width: 60%;
            float: left;
        }
    </style>
</head>

<body>
    <!-- Creating aside Element -->
    <h2>HTML 'aside' Element</h2>
    <p>
        It is typically used to improve an article by adding more details 
        or emphasizing passages that the reader would find interesting. 
        If you remove aside content from a web page, the main content will
        not be impacted because aside content is a separate, optional 
        component of the page.
    </p>
    <aside>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>Angular</li>
            <li>React</li>
        </ul>
    </aside>
</body>

</html>

Supported Browsers

Tag
aside	Yes 6.0	Yes 9.0	Yes 4.0	Yes 5.0	Yes 11.1

html_tags_reference.htm

Print Page