تگ aside در HTML

به نام خداوند علم و دانش. سلام به دوستان گرامی و مخاطبین وب سایت آموزشی کدیونی، وقت همگی بخیر، در این صفحه با مطلب تگ aside در HTML از سری آموزش های HTML در خدمت شما عزیزان هستیم.

در نسخه های قبلی HTML تگ های معنا داری برای شناسایی قسمت های مختلف سایت وجود نداشت و عموما از تگ هایی مانند div برای طراحی اکثر قسمت ها استفاده می شد. تگ های معنادار که در HTML5 معرفی شده اند تگ هایی هستند که به موتور های جستجو جهت درک بیشتر سایت و محتوا کمک فراوانی می کند. تگ <aside> یکی از آن تگ هاست که در بخش های کناری سایت نمایش داده می شود.

تگ aside چیست؟

این تگ معمولا در سایدبار یا بخش های کناری سایت مانند مطالب مرتبط، پروفایل و ... به کار می رود.

این تگ با <aside> شروع شده و با </aside> پایان می یابد.

<aside></aside>

از تگ aside در دو حالت می توان استفاده کرد:

حالت اول: زمانی که این تگ، درون تگ article قرار گرفته و به عنوان بخش کناری محتوا شناخته شود. در این صورت باید با محتوای آن ارتباط معنایی داشته باشد.

حالت دوم: زمانی که این تگ به عنوان بخش کناری سایت جهت نمایش مطالب مرتبط، نمایش موضوعات و ... به کار می رود.

این تگ از صفات global مانند id و ... پشتیبانی می کند.

مثال های تگ aside

مثال 1:

<article>
  <p>متن</p>
  <aside>
    <p>متن</p>
  </aside>
</article>

مثال 2:

<aside>
  <p>متن</p>
</aside>

تنظیمات پیش فرض CSS

تنظیمات پیش فرض CSS تگ aside در اکثر مرورگرها به صورت زیر است:

aside {
  display: block;
}

از آن جایی که این تگ برای بخش های کناری به کار می رود پیشنهاد می شود حتما از css برای استایل مدنظر خود استفاده کنید.

سازگاری با مرورگرها

تگ aside با مرورگرهای زیر سازگار است:

• گوگل کروم نسخه 5 و بالاتر
• فایرفاکس نسخه 4 و بالاتر
• اج نسخه 12 و بالاتر
• اپرا نسخه 11.1 و بالاتر
• سافاری نسخه 5 و بالاتر
• گوگل کروم اندروید
• فایرفاکس اندروید نسخه 4 و بالاتر
• اپرا اندروید نسخه 11.1 و بالاتر
• سافاری iOS نسخه 4.2 و بالاتر