Aside Tag in HTML

The HTML <aside> tag provides information about the main content. It represents content that forms the main textual flow of a document.

It is used to bring out extra information to users to know important points about the article or the web page, but it is unnecessary for the page. It can also be used to write highlights of the web page. It is mostly used to represent sidebars. It explains something associated with the content present on the web page.

The content inside the <aside> tag looks like the content inside other HTML tags, so it isn't easy to differentiate between the content of the <aside> tag and some other HTML tags. We can use Cascading Style Sheets to make the different appearance of the content written inside the <aside> tag.

We will see the placement of the <aside> tag in semantic HTML, which is given below:

Semantic HTML refers to the HTML tags describing the meaning of the content inside the tags.

Aside means to one side, and you can see that the <aside> tag in HTML is used on the side of the web page, so it conveys the same meaning as its name. Depending on your web page design, it can be on the right or left side so you can place the <aside> tag on the right or left.

Syntax of the <aside> Tag:

<aside>
	<h4>Heading</h4>
	<p>Some text</p>
</aside>

The <aside> is the opening tag, and the </aside> is the closing tag in the above syntax. The heading and paragraph tags are used inside the <aside> tag to add important information about the main content. The <h4> is the opening tag, and the </h4> is the closing tag of the heading used to denote the heading. The <p> is the opening tag, and the </p> is the closing tag used to denote the paragraph.

Examples of the HTML <aside> Tag

We will comprehend the HTML <aside> tag with the help of the following examples.

Example 1:

We will see the use of <aside tag> in this example.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of &lt;aside&gt; tag in HTML</title>
</head>
<body>
    <h1>Example of &lt;aside&gt; tag in HTML</h1>
    <p>My family and I visited the Kingdom of Dreams, Gurugram. We learned about many cultures of different states, such as cuisines, local fine arts, etc. We had a lot of fun there.</p>
    <aside>
        <h4>Kingdom of Dreams (KOD)</h4>
        <p>KOD is the amusement and theme park located in Gurugram.</p>
    </aside>
</body>
</html>

Output:

It is a simple use of the <aside> tag to provide additional information to web page users.

Example 2:

We will use the CSS to make the <aside> tag recognizable in this example.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of &lt;aside&gt; tag in HTML</title>
    <style>
        div {
            width: 60%;
            float: left;
        }
        aside {
            width: 250px;
            border-radius: 10px;
            float: right;
            margin-left: 30px;
            font-family: Georgia, Times, serif;
            font-style: italic;
            color: rgb(63, 65, 63);
            background: linear-gradient(to right, #7f8585, #e5eaf5);
        }
    </style>
</head>
<body>
    <h1>Example of &lt;aside&gt; tag using CSS</h1>
    <div>
    <p>My family and I visited the Kingdom of Dreams, Gurugram. We learned about many cultures of different states, such as cuisines, local fine arts, etc. We had a lot of fun there.</p>
    </div>
    <aside>
        <h4>Kingdom of Dreams (KOD)</h4>
        <p>KOD is the amusement and theme park located in Gurugram.</p>
    </aside>
</body>
</html>

Output:

The <aside> tag is easily recognizable in this example using the CSS.

Example 3:

Let us see one more example to show the use of <aside tag>, and we will also use CSS to give <aside> tag a style.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of <aside> tag with CSS</title>
    <style>
        div {
            width: 60%;
            float: left;
        }
        aside {
            width: 200px;
            border-radius: 6px;
            float: right;
            margin-left: 30px;
            font-family:'Courier New', Courier, monospace;
            font-style: italic;
            color: rgb(52, 52, 169);
            background: linear-gradient(to right, #42f4f4, #8e99b4);
        }
    </style>
</head>
<body>
    <h1>Example of &lt;aside&gt; tag with CSS</h1>
    <div>
    <h2>HTML Tags</h2>
    <p> You need to know HTML tags when learning HTML. The HTML tags are used to show the content on the web page in various formats. HTML consists of various tags such as &lt;aside&gt; tag, &lt;h1&gt; tag, &lt;h2&gt; tag, etc.</p>
    </div>
    <aside>
        <h4>Aside Tag</h4>
        <p>The &lt;aside&gt; tag is the tag in HTML used to add extra information about the content on the web page.</p>
        <h4>&lt;h1&gt; tag</h4>
        <p>The <h1&gt; tag is the heading tag used for the main heading of the web page.</p>
        <h4>&lt;h2&gt; tag</h4>
        <p>The &lt;h2&gt; tag is the heading tag which is smaller size than &lt;h1&gt; tag.</p>
    </aside>
</body>
</html>

Output:

The <aside> tag can be seen clearly on the right side of the web page as it is easily identifiable with the help of the CSS and provides additional information about the main content on the web page.