آموزش و یادگیری تگ aside در HTML

در اين بخش از دوره آموزش HTML در آموزش دون، با تگ <aside> آشنا مي‌شويم. اين تگ براي نمايش محتواي جانبي (sidebar) يا اطلاعات تکميلي مرتبط با محتواي اصلي صفحه استفاده مي‌شود. محتواي داخل aside معمولاً به‌صورت مکمل و نه بخشي از متن اصلي نمايش داده مي‌شود.

تگ aside در HTML چيست؟

تگ <aside> يکي از تگ‌هاي معنايي HTML5 است که براي بخش‌هاي جانبي و غيرمستقيم مرتبط با محتواي اصلي استفاده مي‌شود. اين تگ معمولاً در طراحي سايت براي نمايش نوار کناري (Sidebar)، تبليغات، لينک‌هاي مرتبط، باکس‌هاي اطلاع‌رساني و فهرست مطالب به کار مي‌رود.

مثال ساده از تگ aside

<article>
  <h2>آموزش تگ aside در HTML</h2>
  <p>در اين آموزش با نحوه استفاده از تگ aside آشنا مي‌شويد.</p>

  <aside>
    <p>نکته: تگ aside براي محتواي جانبي يا توضيحات اضافي استفاده مي‌شود.</p>
  </aside>
</article>

در اين مثال، محتواي <aside> شامل توضيح جانبي مرتبط با متن اصلي مقاله است.

مثال کاربردي در طراحي صفحه

<main>
  <article>
    <h2>آموزش HTML مقدماتي</h2>
    <p>در اين مقاله با تگ‌هاي پايه HTML آشنا مي‌شويم...</p>
  </article>

  <aside>
    <h3>مطالب مرتبط</h3>
    <ul>
      <li><a href="/blog/2">تگ article در HTML</a></li>
      <li><a href="/blog/3">تگ section در HTML</a></li>
      <li><a href="/blog/4">تگ header در HTML</a></li>
    </ul>
  </aside>
</main>

در اين مثال، بخش aside به‌عنوان نوار کناري شامل لينک‌هاي مرتبط با مقاله فعلي عمل مي‌کند.

مثال aside در صفحه اصلي سايت

<aside>
  <h3>تبليغات</h3>
  <a href="https://learndun.ir">
    <img src="/images/banner.jpg" alt="بنر آموزش دون">
  </a>
</aside>

در اين حالت، تگ <aside> براي نمايش بنر تبليغاتي در کنار محتواي اصلي استفاده شده است.

صفات مهم تگ aside

استايل‌دهي پيشنهادي براي aside

aside {
  background-color: #f9f9f9;
  border-left: 4px solid #2196f3;
  padding: 12px 16px;
  margin: 20px 0;
  border-radius: 8px;
  font-size: 0.95rem;
}

aside h3 {
  margin-top: 0;
  color: #2196f3;
}

با اين استايل، بخش aside ظاهر مرتب و متمايزي نسبت به محتواي اصلي خواهد داشت و خوانايي بيشتري پيدا مي‌کند.

نکات حرفه‌اي در استفاده از aside

• از تگ <aside> براي محتوايي استفاده کنيد که ارتباط غيرمستقيم با بخش اصلي دارد.
• در صفحات خبري و وبلاگي، aside معمولاً در کنار مقاله يا در پايين آن قرار مي‌گيرد.
• در طراحي واکنش‌گرا، مي‌توانيد aside را با flexbox يا grid در کنار main قرار دهيد.
• از تگ‌هاي <h3> يا <h4> براي عنوان محتواي جانبي استفاده کنيد تا ساختار معنايي صفحه حفظ شود.

نکته: اگر محتواي aside ارتباطي با متن اصلي ندارد (مثلاً تبليغات عمومي)، مي‌توانيد آن را در خارج از <main> قرار دهيد.

براي يادگيري تگ‌هاي معنايي ديگر مانند <article> و <section>، پيشنهاد مي‌کنيم در دوره آموزش HTML مقدماتي تا پيشرفته آموزش دون شرکت کنيد.

براي مشاهده تمام آموزش‌هاي HTML، به صفحه اصلي آموزش دون مراجعه کنيد.