<aside>- Sidebar content
<aside> is a semantic tag introduced in HTML5, used to define parts of a page that are separate from the main content, typically appearing as a sidebar or supplementary content. It is related to the main content but not essential, making it suitable for displaying ads, quotes, annotations, or other auxiliary information.
Basic Usage of <aside>
<aside> is a paired tag, requiring both opening and closing tags. Its content can include text, images, lists, or other HTML elements. By default, browsers do not apply special styling to <aside>, so its appearance must be customized using CSS.
<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</aside>
Semantic Role of <aside>
The core value of <aside> lies in its semantics. It clearly indicates to browsers and developers that this content is related to but independent of the main content. Screen readers recognize its semantic role, enhancing accessibility. For example:
<article>
<h2>Main Title</h2>
<p>This is the main content of the article...</p>
<aside>
<p>Note: The data in this article comes from the 2023 statistical report.</p>
</aside>
</article>
Typical Use Cases for <aside>
Sidebar Navigation
The most common usage is as a container for sidebar navigation menus or tool links:
<body>
<main>
<!-- Main content area -->
</main>
<aside class="sidebar">
<nav>
<h3>Quick Navigation</h3>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
</ul>
</nav>
</aside>
</body>
Article Supplementary Information
Marking supplementary notes or references in blog posts:
<article>
<h1>CSS Grid Layout Guide</h1>
<p>Grid layout is a modern CSS technique...</p>
<aside class="footnotes">
<h4>References</h4>
<ol>
<li>MDN Web Docs: CSS Grid</li>
</ol>
</aside>
</article>
Advertisements or Promotional Content
Ad content is often unrelated to the main content but needs clear labeling:
<main>
<article>...</article>
</main>
<aside aria-label="Advertisement Area">
<img src="ad-banner.jpg" alt="Promotional Ad">
</aside>
Layout Implementation with <aside>
CSS is required to implement sidebar layouts. Here’s a classic two-column layout example:
<style>
body { display: flex; margin: 0; }
main { flex: 1; padding: 20px; }
aside {
width: 300px;
padding: 15px;
background: #f5f5f5;
border-left: 1px solid #ddd;
}
</style>
<body>
<main>...</main>
<aside>...</aside>
</body>
For responsive design, combine with media queries to adjust the layout:
@media (max-width: 768px) {
body { flex-direction: column; }
aside { width: 100%; border-left: none; }
}
Differences Between <aside> and <div>
While visually similar, their semantic differences are significant:
<div>is a non-semantic container.<aside>explicitly indicates "supplementary content."
Incorrect example:
<div class="sidebar"> <!-- Should use aside -->
<p>Recommended Reading</p>
</div>
Accessibility Considerations
-
Use
aria-labeloraria-labelledbyto provide descriptions for screen readers:<aside aria-labelledby="sidebar-heading"> <h3 id="sidebar-heading">Tool Panel</h3> ... </aside> -
Avoid placing critical content in
<aside>, as assistive technologies may skip it by default.
Dynamic Content Example
Combine with JavaScript to implement a dynamic sidebar:
<aside id="news-feed">
<button onclick="loadNews()">Load Latest Updates</button>
<div id="news-container"></div>
</aside>
<script>
function loadNews() {
fetch('/api/news')
.then(res => res.json())
.then(data => {
document.getElementById('news-container').innerHTML =
data.map(item => `<p>${item.title}</p>`).join('');
});
}
</script>
Browser Compatibility
All modern browsers support <aside>, including:
- Chrome 5+
- Firefox 4+
- Safari 5+
- Edge 12+
- Opera 11.5+
For IE9 and earlier, add the following code to the HTML head to recognize the new tag:
<!--[if lt IE 9]>
<script>
document.createElement('aside');
</script>
<![endif]-->
Coordination with Other Semantic Tags
<aside> is often used alongside these tags:
<main>: Identifies the main content area.<article>: Wraps independent content.<nav>: Contains navigation links.
Typical structure example:
<body>
<header>...</header>
<main>
<article>
...
<aside>...</aside>
</article>
</main>
<aside class="site-sidebar">...</aside>
<footer>...</footer>
</body>
Print Style Optimization
Use CSS print queries to control sidebar display when printing:
@media print {
aside {
display: none; /* Hide non-essential content */
}
}
本站部分内容来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn
上一篇：
下一篇：<figure>-媒体内容组合
