- Mastering Responsive Web Design
- Ricardo Zea
- 212字
- 2021-07-16 20:33:20
The <aside> element
The HTML
<aside>element represents a section of the page with content connected tangentially to the rest, which could be considered separate from that content. These sections are often represented as sidebars or inserts. They often contain the definitions on the sidebars, such as definitions from the glossary; there may also be other types of information, such as related advertisements; the biography of the author; web applications; profile information or related links on the blog.
Here are a few important points to remember about the <aside> element:
- Content that is tangential to the main content can be included in an
<aside>element. If this content was to be separated from the main content, it would still make sense on its own. - There can be more than one
<aside>in a single page.
Consider the following example:
<body>
<main class="main-container" role="main">
<article class="article-container flex-container">
<section class="main-content">
<header>
<h1>The <code><main></code> element </h1>
</header>
<p>As per the MDN definition:</p>
<blockquote>
<p>The HTML Main Element (<code><main></code>)
represents…</p>
</blockquote>
</section>
<aside class="side-content" role="complementary">
<h2>What Does "Semantic HTML" Mean?</h2>
<p>Semantic markup basically means that we use HTML tags
to describe what a specific piece of content is.</p>
</aside>
</article>
</main>
</body>