HTML Aside Tag

The <aside> tag in HTML is used to define content that is related to the main content, but not a part of the main flow itself. You can think of it as extra or supporting information. In short, the <aside> tag is like a sidebar — it gives users some extra helpful content without interrupting the main content.

The <aside> tag can be used in two ways, depending on where you place it:

  • Outside the main content - Use it as a sidebar, showing things like ads, navigation links, author bios, or related articles. It supports the page as a whole.
  • Inside the main content - Use it as a note or box that adds info related to a specific section, like a definition, a quote, or a tip.
Syntax -
<aside>content here</aside>

Inside the <aside>, you can place anything: headings, paragraphs, lists, images, links, or even another article. Whatever you include should be related but not essential to the main content.

Example -

Scenario - A basic example where the <aside> tag is used alongside a blog post

<!DOCTYPE html>
<html>
	<head>
		<title> aside example</title>
	<style>
	  aside {
		background-color: #f0f0f0;
		padding: 15px;
		margin-top: 20px;
		border-left: 4px solid #007BFF;
	  }
	</style>
	</head>
	<body>
		<article>
			<h2>How to Learn HTML</h2>
			<p>Learning HTML is the first step to becoming 
			a web developer. Start with basic tags like headings,
			paragraphs, and lists.</p>

			<aside>
				<h3>Did You Know?</h3>
				<p>HTML stands for HyperText Markup Language 
					and it was created in 1991!</p>
			</aside>

			<p>As you go deeper, you'll explore forms, tables, 
			and semantic elements.</p>
		</article>
	</body>
</html>
Output -

How to Learn HTML

Learning HTML is the first step to becoming a web developer. Start with basic tags like headings, paragraphs, and lists.

As you go deeper, you'll explore forms, tables, and semantic elements.

Explaining Example -

The main article explains how to learn HTML. The <aside> adds an interesting fact that’s related but not critical to the main topic. If you removed the <aside>, the article still makes complete sense.