الفرق بين المراجعتين ل"HTML/aside"

المراجعة الحالية بتاريخ 03:39، 18 فبراير 2018

يُمثِّل العنصر <aside> جزءًا من المستند الذي يتعلق محتواه بشكلٍ أو بآخر بالمحتوى الرئيسي للمستند (ويُمثَّل هذا العنصر عادةً على شكل شريط جانبي).

مثال عن استخدام العنصر <aside> داخل عنصر <article> لإظهار معلومات جانبية تتعلق بالمحتوى الرئيسي.

<article>
  <p>
    دورة تطوير واجهات المستخدم الموجودة في أكاديمية حسوب تساعد من
    يحاول تعلم تطوير الويب عبر تقديم دورة احترافية
  </p>
  <aside>
    <p>
      أكاديمية حسوب تطمح لكتون المرجع الأساسي للمطور العربي بخصوص الدروس والدورات.
    </p>
  </aside>
  <p>
    لمزيدٍ من المعلومات حول هذه الدورة، يمكنك الاطلاع على الرابط
    <a href="https://academy.hsoub.com/learn/front-end-web-development/">الآتي</a>.
  </p>
</article>

بطاقة العنصر

تصنيفات المحتوى	عنصر تنظيمي.
المحتوى المسموح	المحتوى التنظيمي.
الوسم المختصر	لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب	أي عنصر يقبل المحتوى التنظيمي. لاحظ أنَّ العنصر `<aside>` لا يجوز أن يكون ابنًا للعنصر `<address>`.
واجهة DOM	`HTMLElement`

دعم المتصفحات

Chrome	Firefox	Edge	Safari	Opera
5	4.0	مدعوم	4.1	11.10

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

ملاحظات الاستخدام

لا يجوز استعمال العنصر <aside> لتوسيم النص الذي نضعه عادةً بين قوسين، فهذا النص يُصنَّف على أنها من المحتوى الرئيسي للصفحة.

التنسيق الافتراضي

أغلبية المتصفحات تعرض العنصر <aside> مع ضبط الخاصية display إلى block:

aside {
  display: block;
}

مصادر ومواصفات

معيار HTML Living Standard.
مواصفة HTML5.

@@ سطر 5: / سطر 5: @@
 <article>
    <p>
-     The Disney movie <em>The Little Mermaid</em> was
+     دورة تطوير واجهات المستخدم الموجودة في أكاديمية حسوب تساعد من
-     first released to theaters in 1989.
+     يحاول تعلم تطوير الويب عبر تقديم دورة احترافية
    </p>
    <aside>
      <p>
-       The movie earned $87 million during its initial release.
+       أكاديمية حسوب تطمح لكتون المرجع الأساسي للمطور العربي بخصوص الدروس والدورات.
      </p>
    </aside>
    <p>
-     More info about the movie...
+     لمزيدٍ من المعلومات حول هذه الدورة، يمكنك الاطلاع على الرابط
+    <a href="https://academy.hsoub.com/learn/front-end-web-development/">الآتي</a>.
    </p>
 </article>
 </syntaxhighlight>
+== بطاقة العنصر ==
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 55: / سطر 57: @@
 == ملاحظات الاستخدام ==
-*لا يجوز استعمال العنصر <code><aside></code> لتوسيم النص الذي نضعه عادةً بين قوسين، فهذا النص يُصنَّف على أنها من المحتوى الرئيسي للصفحة.<code></code>
+*لا يجوز استعمال العنصر <code><aside></code> لتوسيم النص الذي نضعه عادةً بين قوسين، فهذا النص يُصنَّف على أنها من المحتوى الرئيسي للصفحة.
+== التنسيق الافتراضي ==
+أغلبية المتصفحات تعرض العنصر <code><aside></code> مع ضبط الخاصية <code>[[CSS/display|display]]</code> إلى <code>block</code>:<syntaxhighlight lang="css">
+aside {
+  display: block;
+}
+</syntaxhighlight>
 ==مصادر ومواصفات==
 *معيار [https://html.spec.whatwg.org/multipage/semantics.html#the-aside-element HTML Living Standard].
 *مواصفة [http://www.w3.org/TR/html5/sections.html#the-aside-element HTML5].
-[[تصنيف:HTML]]
+[[تصنيف:HTML|{{SUBPAGENAME}}]]
-[[تصنيف:HTML Elements]]
+[[تصنيف:HTML Elements|{{SUBPAGENAME}}]]
-[[تصنيف:HTML Content sectioning]]
+[[تصنيف:HTML Content sectioning|{{SUBPAGENAME}}]]