جلسه سی و هشتم: آموزش کامل تگ aside در HTML

آموزش‌ها آموزش طراحی سایت فرانت‌اند آموزش HTML
به‌روزرسانی‌شده در 17 مرداد 1404

به دوره حرفه‌ای آموزشHTML در آوای وب خوش اومدی! اینجا قراره تگ aside رو از صفر تا صد، با زبانی ساده و حرفه‌ای یاد بگیری.
با ما همراه باش تا محتوای جانبی صفحه‌ات رو مثل یه متخصص بسازی و تجربه کاربر و سئوی سایتت رو متحول کنی!
استفاده درست ازش باعث میشه ساختار صفحه بهتر بشه، دسترسی‌پذیری بالا بره و سئو سایت قوی‌تر شه.
تو این مقاله همه چیز از کاربرد و نکات فنی تا مثال‌های عملی و ترفندهای سئو و دسترس‌پذیری رو یاد می‌گیری.

آنچه در این مقاله می‌خوانید:

🏷️ تگ aside چیه و چرا انقدر مهمه؟

تگ <aside> یکی از تگ‌های معنی‌دار (Semantic) تو HTML5 هست که برای محتوای جانبی و تکمیلی صفحه استفاده میشه. یعنی بخش‌هایی که به محتوای اصلی مرتبطن ولی خودشون جزوی از اون نیستن؛ مثل تبلیغات، لینک‌های مرتبط، بیوگرافی نویسنده و اینجور چیزا.

🧩 چرا استفاده از aside مهمه؟

سئوی بهتر: گوگل بهتر می‌فهمه محتوای اصلی کجاست و این باعث میشه رتبه سایتت بهتر بشه.

ساختار صفحه رو منطقی‌تر می‌کنه: موتورهای جستجو و مرورگرها راحت‌تر متوجه میشن این بخش جانبیه.

دسترسی‌پذیری بهتر: صفحه‌خوان‌ها (Screen Reader) این بخش رو بهتر می‌تونن تشخیص بدن و کاربر راحت‌تر مطلب رو دنبال کنه.

✨ چطوری `<aside>` رو استفاده کنیم؟

تگ <aside> باید باز و بسته باشه و هر محتوایی می‌تونی داخلش بذاری:

<aside>
  <h3>نکات مرتبط</h3>
  <p>این یه اطلاعات اضافیه</p>
</aside>

🆚 فرق `<aside>` با بقیه تگ‌ها چیه؟

تگ	کاربرد	توضیح
`<aside>`	محتوای جانبی و مرتبط با محتوا	اطلاعات جانبی مثل تبلیغات
`<article>`	محتوای مستقل و جدا	مثل یک مقاله یا پست بلاگ
`<div>`	بلاک عمومی بدون معنی خاص	فقط برای گروه‌بندی عناصر

💡 کاربردهای تگ `<aside>`

تبلیغات کنار صفحه
ابزارک‌هایی مثل فرم جستجو یا فهرست مطالب
لینک‌های مرتبط یا مطالب پیشنهادی
بیوگرافی نویسنده یا اطلاعات تماس
نقل قول‌ها یا یادداشت‌های جانبی

📝 مثال‌های عملی

✏️ وقتی <aside> داخل <main> قرار می‌گیره:

این یعنی محتوای جانبی، مربوط به محتوای اصلی داخل اون <main> هست.
مثلاً وقتی توی یک مقاله یا صفحه محتوای خاصی داری و چندتا نکته، تبلیغ مرتبط یا لینک‌های پیشنهادی مرتبط با همون مقاله داری، <aside> رو داخل <main> قرار می‌دی.

مثال:

<main>
  <article>
    <h1>مقاله اصلی</h1>
    <p>محتوای اصلی اینجاست.</p>
  </article>
  <aside>
    <h2>مطالب مرتبط</h2>
    <p>لینک‌ها و نکات تکمیلی مربوط به این مقاله</p>
  </aside>
</main>

✏️ وقتی <aside> بیرون از <main> باشه:

این یعنی محتوای جانبی، مرتبط با کل صفحه یا سایت هست، نه فقط محتوای اصلی داخل <main>.
مثلاً سایدبار کلی سایت، تبلیغات کلی، یا اطلاعاتی که به همه صفحات ربط داره.

مثال:

<body>
  <header>...</header>
  <main>
    <article>...</article>
  </main>
  <aside>
    <h2>ابزارک‌های سایت</h2>
    <p>اطلاعات جانبی که به کل سایت مربوط میشه</p>
  </aside>
  <footer>...</footer>
</body>

🌟 نکات مهم سئو و دسترس‌پذیری برای `<aside>`

محتوای داخل aside باید به موضوع صفحه مرتبط باشه.
زیاده‌روی نکن و بیش از حد از aside استفاده نکن.
عنوان مناسب براش بذار که صفحه‌خوان‌ها بتونن راحت تشخیصش بدن.
اگه محتوای سنگینی داره (مثلاً تبلیغات یا ویدیو)، می‌تونی از لیزی لود استفاده کنی که سرعت صفحه پایین نیاد.

🚫 اشتباهاتی که باید ازش دوری کنی

نذار محتوای اصلی داخل aside باشه.
برای منو یا ناوبری از aside استفاده نکن، این کار مخصوص <nav>ه.
aside رو فقط یه ظرف بدون معنی نبین، معنیش رو رعایت کن.
داخل aside حتما ساختار و عنوان مناسب داشته باش.

❓ سوالات پرتکرار (FAQ)

🔹فرق aside با div چیه؟
aside معناییه و برای محتوای جانبیه، div فقط یه ظرف بی‌معنی برای گروه‌بندی.

🔹 چند تا aside میشه تو صفحه داشت؟
هرچقدر بخوای، فقط باید هر کدوم مرتبط و جانبی باشن.

🔹 آیا aside برای ناوبری مناسبه؟
نه، برای ناوبری باید از nav استفاده کنی.

🎯 پروژه عملی: بیا خودت یه تگ `<aside>` بساز!

حالا که همه چی رو درباره تگ <aside> یاد گرفتی، وقتشه آستینا رو بالا بزنی و یه بخش جانبی واقعی برای یه صفحه بسازی. این تمرین بهت کمک می‌کنه تا کارت رو با HTML از حالت فقط “فهمیدن” بیاری تو فاز “انجام دادن”! 😎

💡 هدف پروژه:

ساخت یه بخش مطالب پیشنهادی با استفاده از تگ <aside> که کنار یه مقاله اصلی نمایش داده بشه. محتوای جانبی باید با موضوع مقاله در ارتباط باشه.

💡 در ضمن، یادت نره اگه مبتدی هستی، کدات رو تو W3C Validator چک کنی و مطمئن شی درست نوشتی.

🏁 جمع‌بندی

تگ <aside> یه ابزار فوق‌العاده‌ست برای اینکه محتوای جانبی و مرتبط رو تو صفحه وب مرتب و حرفه‌ای نشون بدی.
با استفاده درست ازش، سایتت هم ساختار بهتری پیدا می‌کنه، هم دسترسی‌پذیریش بالا میره و هم گوگل بیشتر دوستت داره!
حالا نوبت توئه که این تگ رو تو سایتت به کار ببری و حرفه‌ای‌تر بشی! ما تا آخر خط باهاتیم!

💬 ایده‌هات رو فریاد بزن!

نظرت راجب تگ aside چیه؟ دلت می‌خواد چه چیزی به این آموزش اضافه کنیم؟ سوالی تو ذهنت مونده؟ تو نظرات برامون بگو! تیم حرفه‌ای پشتیبانی با جون و دل جوابت رو می‌ده!

شهرام نجفی

شهرام نجفی — بیش از ۱۵ سال طراحی و توسعهٔ وب به‌صورت فریلنس. قالب اختصاصی آوای وب را از صفر نوشته‌ام. مطالب این سایت را بر پایهٔ مستندات رسمی MDN و WHATWG می‌نویسم و قبل از انتشار در مرورگرهای واقعی تست می‌کنم. نمونه‌کارهایم در shahramnajafi.com است.