家里财神图像摆放位置

書名： Mastering Responsive Web Design
作者名： Ricardo Zea
本章字數： 212字
更新時間： 2021-07-16 20:33:20

The <aside> element

As per the MDN definition:

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>&lt;main></code> element  </h1>
              </header>
              <p>As per the MDN definition:</p>
              <blockquote>
                  <p>The HTML Main Element (<code>&lt;main></code>) 
  represents&hellip;</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>

Tip

Tangential content means that the content refers to the subject at hand, but it's not part of the main message. If this content inside the <aside> element is removed, the main message is not affected.

官术网_书友最值得收藏!

Mastering Responsive Web Design

The <aside> element

Tip