برچسب <aside> HTML

تعریف و استفاده

<aside> برچسب محتوایی را که خارج از محتوای اصلی آن قرار دارد، تعریف می‌کند.

محتوای aside باید به محتوای اطراف به صورت غیر مستقیم مرتبط باشد.

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

توجه داشته باشید:<aside> این عنصر در مرورگر به هیچ استایلی خاصی تبدیل نمی‌شود. اما شما می‌توانید از CSS برای تنظیم استفاده کنید <aside> استایل عناصر (لطفاً به مثال زیر مراجعه کنید).

لطفاً به: مراجعه کنید

دستورالعمل مرجع HTML DOM:مفهوم Aside

مثال

مثال 1

نمایش محتوایی که خارج از محتوای اصلی است:

<p>امسال تابستان من و خانواده‌ام به پارک اقیانوس‌نما شانگهای رفتیم. هوا خوب بود و پارک اقیانوس‌نما بسیار رویایی بود! من و خانواده‌ام تابستانی خوبی گذراندیم!</p>
<aside>
<h4>پارک اقیانوس‌گردی هنگ‌تونگ شانگهای</h4>
<p>پارک اقیانوس‌نما شانگهای پارک تفریحی موضوعی در منطقه پودونگ نو است که با ویژگی‌های فرهنگی اقیانوس‌ها ساخته شده و مساحت کل آن حدود 29.7 هکتار است و همچنین یک مقصد گردشگری سطح AAAA است.</p>
</aside>

آزمایش کنید

مثال 2

استفاده از CSS برای تنظیم استایل عناصر <aside>:

<html>
<head>
<style>
aside {
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  font-style: italic;
  background-color: lightgray;
}
</style>
</head>
<body>
<h1>aside عناصر</h1>
<p>امسال تابستان من و خانواده‌ام به پارک اقیانوس‌نما شانگهای رفتیم. هوا خوب بود و پارک اقیانوس‌نما بسیار رویایی بود! من و خانواده‌ام تابستانی خوبی گذراندیم!</p>
<aside>
<p>پارک اقیانوس‌نما شانگهای پارک تفریحی موضوعی در منطقه پودونگ نو است که با ویژگی‌های فرهنگی اقیانوس‌ها ساخته شده و مساحت کل آن حدود 29.7 هکتار است و همچنین یک مقصد گردشگری سطح AAAA است.</p>
</aside>
<p>امسال تابستان من و خانواده‌ام به پارک اقیانوس‌نما شانگهای رفتیم. هوا خوب بود و پارک اقیانوس‌نما بسیار رویایی بود! من و خانواده‌ام تابستانی خوبی گذراندیم!</p>
<p>امسال تابستان من و خانواده‌ام به پارک اقیانوس‌نما شانگهای رفتیم. هوا خوب بود و پارک اقیانوس‌نما بسیار رویایی بود! من و خانواده‌ام تابستانی خوبی گذراندیم!</p>
</body>
</html>

آزمایش کنید

ویژگی‌های جهانی

<aside> این برچسب همچنین از ویژگی‌های رویداد پشتیبانی می‌کند ویژگی‌های جهانی در HTML.

ویژگی‌های رویداد

<aside> این برچسب همچنین از ویژگی‌های رویداد پشتیبانی می‌کند ویژگی‌های رویداد در HTML.

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

بیشتر مرورگرها از تنظیمات پیش‌فرض زیر برای نمایش استفاده می‌کنند <aside> عنصر:

aside {
  display: block;
}

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

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
6.0 9.0 4.0 5.0 11.1