aside للمحتوى التكميلي

عنصر aside

استخدام aside داخل article

<article>
  <h2>How the Internet Works</h2>
  <p>The Internet is a global network of computers...</p>

  <aside>
    <h3>Did You Know?</h3>
    <p>The first email was sent in 1971 by Ray Tomlinson.</p>
  </aside>

  <p>Data travels in packets across routers...</p>
</article>

aside على مستوى الصفحة

<div class="layout">
  <main>
    <article>...</article>
  </main>

  <aside>
    <h2>Related Articles</h2>
    <ul>...</ul>

    <h2>Newsletter</h2>
    <p>Subscribe for updates.</p>
  </aside>
</div>

دور ARIA لـ aside

<aside aria-label="Related resources">
  <h2>Related resources</h2>
  ...
</aside>
<!-- Multiple asides should be uniquely labeled
     Screen reader users can jump directly to complementary regions -->

الاقتباسات البارزة باستخدام aside

<aside class="pullquote">
  <blockquote>
    <p>HTML is the foundation of the web — learn it well.</p>
  </blockquote>
</aside>

الإعلانات باستخدام aside

<aside aria-label="Advertisement">
  <p class="sr-only">Advertisement</p>
  <img src="ad.jpg" alt="Learn JavaScript online — 50% off">
</aside>

aside مقارنةً بـ section

استخدام aside لمصطلحات المسرد

<article>
  <p>The DOM (Document Object Model) is updated when...</p>

  <aside id="dom-def">
    <dl>
      <dt>DOM</dt>
      <dd>Document Object Model — the browser's tree representation of an HTML page.</dd>
    </dl>
  </aside>
</article>

أقسام متعددة في الشريط الجانبي

<aside aria-label="Sidebar">
  <section>
    <h2>About the Author</h2>
    <p>Jane Smith is a senior web developer...</p>
  </section>
  <section>
    <h2>Popular Posts</h2>
    <ul>...</ul>
  </section>
</aside>

لا يحتاج aside إلى عنوان

<!-- Valid aside without heading: -->
<aside>
  <img src="banner.jpg" alt="20% off this week only">
</aside>
<!-- But adding a heading (even visually hidden) improves accessibility -->
<aside>
  <h2 class="sr-only">Promotions</h2>
  <img src="banner.jpg" alt="20% off this week only">
</aside>

لا تستخدم aside للتنسيق الجانبي

<!-- BAD: aside used for layout only -->
<aside class="right-column">  <!-- no semantic relationship to main content -->
  <div class="ad">...</div>
</aside>

<!-- GOOD: aside for related content -->
<main><!-- article content --></main>
<aside><!-- genuinely related supplementary info --></aside>

تحقق سريع

مراجعة: aside