تگ aside در HTML

  /  فرانت اند   /  HTML   /  تگ aside در HTML

با استفاده از تگ aside در HTML میتوانیم سایر مطالب مرتبط با سایت را در صفحات وب قرار دهیم ، مطالبی همچون سایر پست های سایت ، لینک های متفرقه ، بنر های تبلیغاتی و…

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

مثال

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>


جهت آزمایش و تست عنصر aside در HTML دکمه تست آنلاین کد را کلیک کنید.


تعریف و کاربرد

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

نکته: محتوای عنصر aside معمولاً به عنوان یک نوار یا ستون کناری در صفحات قرار میگیرد.

توجه: عنصر aside در حالت عادی سبک و ظاهر خاصی در مرورگر ها ندارد ، شما می توانید با استفاده از CSS به این عنصر سبک و ظاهر خاصی را بدهید.


پشتیبانی مرورگر ها

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

عنصر
<aside>6.09.04.05.011.1

خواص عمومی

تگ aside از خواص عمومی در HTML پشتیبانی میکند.

رویداد های عمومی

تگ aside از رویداد های عمومی در HTML پشتیبانی میکند.

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

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

aside {
  display: block;
}

مثال های بیشتر

<!DOCTYPE html>
<html>
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>

<h1>The aside element - Styled with CSS</h1>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

</body>
</html>

برای دسترسی به آموزش های بیشتر و ویدیو های من ، کلمه کلیدی متین برونسی را داخل گوگل سرچ کنید.

ارسال یک نظر