Introduction
The ‘<aside>‘ element in HTML is used to define content that is tangentially related to the content around it. It is typically used for content such as sidebars, pull quotes, or information that is not directly related to the main content but provides additional context or supplementary material. The content within an ‘<aside>‘ element is considered separate from the main content but should still be related in some way.
Syntax for ‘<aside>’ tag :
<aside>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas consectetur sunt </p>
</aside>Uses of <aside> tag :
1. Sidebar Content : Often used for sidebars that contain additional information, links, or related content.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<aside>
<h2>Related Links</h2>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</aside>
</body>
</html>Output :
2. Pull Quotes : Used for quoting a relevant piece of text that is pulled out from the main content for emphasis.
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<aside>
<blockquote>
<p> "A journey of a thousand miles begins with a single step." </p>
</blockquote>
</aside>
</body>
</html>Output :
3. Advisory Information : Provides additional information, tips, or warnings related to the main content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<aside>
<p>Tip: Remember to save your work frequently.</p>
</aside>
</body>
</html>Output :
