HTML <aside> Tag
What Does the <aside> Tag Stand For?
The <aside> tag is used for defining content that is on the periphery of a web page but can stand on its own. It is allowed to stand by itself in a classic layout containing a sidebar, a pull quote, linked articles, or related notes. While not part of the primary narrative, it nonetheless offers added value to or interpretation for the reader.
In a more practical sense, you could use it for:
- A sidebar with related links
- A block of quotes or references
- A callout box with extra information
- News or updates that aren’t part of the main article
The Syntax of <aside> Tag?
Here’s how you use the <aside> tag in your HTML code:
<aside>
<h2>Related Articles</h2>
<ul>
<li><a href="#">How to Learn HTML</a></li>
<li><a href="#">CSS Best Practices</a></li>
<li><a href="#">Mastering JavaScript</a></li>
</ul>
</aside>In the example above, we designed an aside that might act as a sidebar for related links. See how the heading and the links are introduced within the <aside> tag. This content in this aside is touch-related, but not crucial to the main topic on this page.
When to use the <aside> tag.
The <aside> element is said to be most beneficial when the content-
1- offers additional insights that support the primary discourse but is not strictly necessary or fundamental to it.
2- usually presides afloat in a sidebar or as secondary annotation.
3- is presumed to be removable without affecting in structure or meaning the sense of the main content.
Some cases in which the <aside> should be applied are:
Author Bio: This may be a small part about the author of the article, which usually appears towards the bottom or the side of the article.
Related Resources: Links to other articles or documents that might capture the reader’s interest.
Advertisements: Occasional use put for advertisements, but of course, do take care with respect DDA.
Quotes or References: Pulling out a piece of quote or reference from the source that complements the article.
Important Considerations:
Not for Decorative Content: The <aside> tag is not meant for decoration items like images, icons, or other such purely decorative stuff. Other HTML tags like <figure>,<img> or <div> are supposed to be used for those.
Conformability: One has to be mindful that, for screen readers, the content contained in an <aside> should make sense contextually. Headings or titles usually make clear for users what that aside is for.
SEO: Search engines usually regard the contents of an <aside> as less important than the main content, though, still, some value is given to it for the general structure of the page. Be cautious, though, not to pack it full of unrelated links or content! Such a messy packing will both confuse the users and the search engines.
Example of a Full Page with <aside>
Here’s a simple example of how the <aside> tag might be used on a blog page. In this case, we have a main article about web development, and a sidebar that provides related links and additional information.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Development 101</title>
</head>
<body>
<article>
<header>
<h1>Web Development 101</h1>
</header>
<section>
<p>Web development is an exciting field where you can create websites and web applications. In this article, we'll explore the basics of HTML, CSS, and JavaScript.</p>
</section>
</article>
<aside>
<h2>Related Articles</h2>
<ul>
<li><a href="#">HTML for Beginners</a></li>
<li><a href="#">CSS Grid Layout</a></li>
<li><a href="#">JavaScript Essentials</a></li>
</ul>
</aside>
</body>
</html>Conclusion
The tag is an indispensable markup that helps organize the content into a more structured and readable format. It permits the separate rendering of the supplementary text from the main text while still being within the flow of the page. When used wisely, the tag can contribute to better usability and organization for your website.