The HTML <aside> tag is utilized to indicate the primary content of a webpage. This tag signifies the content that constitutes the main text flow within a document.
This feature serves to provide additional information to users, offering key insights about the article or webpage, though it is not essential for the page itself. It can also serve to showcase key elements of the webpage, often utilized to display sidebars. Its purpose is to elucidate aspects related to the content featured on the webpage.
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.
In the context of semantic HTML, we will explore the positioning of the <aside> element tag as illustrated below:
Semantic HTML is characterized by HTML elements that convey the meaning of the content they enclose.
To be positioned off-center is the definition of aside. In HTML, the <aside> tag is typically utilized on the periphery of a webpage, aligning with its namesake. The placement of the <aside> tag can vary depending on the layout of your webpage, allowing for placement on either the right or left side.
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
Let's explore the functionality of the HTML <aside> tag through the provided examples.
Example 1:
In this illustration, we will demonstrate the utilization of <aside tag>.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of <aside> tag in HTML</title>
</head>
<body>
<h1>Example of <aside> 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:
Utilizing the <aside> tag is a straightforward method to offer extra details to visitors of a webpage.
Example 2:
In this demonstration, we will employ CSS to enhance the visibility of the <aside> element.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of <aside> 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 <aside> 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> element can be readily identified in this instance through the utilization of CSS.
Example 3:
Another instance demonstrating the implementation of <aside tag> will be presented, along with the utilization of CSS to apply styling to the specified <aside> element.
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 <aside> 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 <aside> tag, <h1> tag, <h2> tag, etc.</p>
</div>
<aside>
<h4>Aside Tag</h4>
<p>The <aside> tag is the tag in HTML used to add extra information about the content on the web page.</p>
<h4><h1> tag</h4>
<p>The <h1> tag is the heading tag used for the main heading of the web page.</p>
<h4><h2> tag</h4>
<p>The <h2> tag is the heading tag which is smaller size than <h1> tag.</p>
</aside>
</body>
</html>
Output:
The <aside> tag is prominently displayed on the right-hand side of the webpage, easily recognizable through CSS styling, and offers supplementary details regarding the primary content featured on the webpage.
The HTML aside element also accommodates global and event attributes within an HTML document.
Supporting Browsers
Here are the browsers that support the <aside> tag:
- Google Chrome
- Firefox
- Internet Explorer
- Opera
- Safari