علامة <aside> في HTML

التعريف والاستخدام

<aside> علامة تعريف العنصر ببعض المحتويات الموجودة خارج المحتوى الموجود في الموقع.

المحتوى لعنصر side يجب أن يكون له علاقة غير مباشرة بالمحتوى المحيط به.

إرشاد:<aside> المحتوى عادة ما يتم وضعها كجانب في المستند.

ملاحظة:<aside> العنصر لا يظهر كنمط خاص في المتصفح. ولكن يمكنك استخدام CSS لضبط <aside> نمط العنصر (انظر الأمثلة أدناه).

يرجى الرجوع أيضًا إلى:

دليل مرجع HTML DOM:عنصر Aside

مثال

مثال 1

عرض بعض المحتويات خارج المحتوى الموجود في الموقع:

<p>زرت هذا الصيف مع عائلتي حديقة Shanghai Haichang Ocean Park. كان الطقس رائعًا، وحديقة المحيطات كانت خيالية! قضيت مع عائلتي صيفًا رائعًا!</p>
<aside>
<h4>حديقة الحياة البحرية هانشون بالعربية</h4>
<p>حديقة Shanghai Haichang Ocean Park هي حديقة ترفيهية تقع في منطقة Pudong New District، وتغطي مساحة إجمالية تقدر بـ 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>عنصر side</h1>
<p>زرت هذا الصيف مع عائلتي حديقة Shanghai Haichang Ocean Park. كان الطقس رائعًا، وحديقة المحيطات كانت خيالية! قضيت مع عائلتي صيفًا رائعًا!</p>
<aside>
<p>حديقة Shanghai Haichang Ocean Park هي حديقة ترفيهية تقع في منطقة Pudong New District، وتغطي مساحة إجمالية تقدر بـ 29.7 هكتار، وهي أيضًا منطقة سياحية من الدرجة AAAA،</p>
</aside>
<p>زرت هذا الصيف مع عائلتي حديقة Shanghai Haichang Ocean Park. كان الطقس رائعًا، وحديقة المحيطات كانت خيالية! قضيت مع عائلتي صيفًا رائعًا!</p>
<p>زرت هذا الصيف مع عائلتي حديقة Shanghai Haichang Ocean Park. كان الطقس رائعًا، وحديقة المحيطات كانت خيالية! قضيت مع عائلتي صيفًا رائعًا!</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