العنصر article

الكاتب: سامي -
العنصر article
العنصر <article>

يُمثِّل العنصر <article> جزءًا من المستند أو الصفحة أو التطبيق أو الموقع الغرض منها هو القدرة على إعادة توزيعها واستخدامها بشكل مستقل، مثل موضوع في منتدى أو مقالة في صحيفة أو تدوينة.

مثال عن استخدام عناصر <article> لتمثيل محتوى المنشور ولتمثيل التعليقات، ويبين هذا المثال كيف يستعمل العنصر <article> مع بقية عناصر HTML:

<article>
  <h1>الموسوعة التقنية</h1>
  <p>تهدف الموسوعة التقنية بتقديم أهم الشروحات والأخبار التقنية وأخبار الألعاب عبر موقعنا ومواقع التواصل الإجتماعي عالم التقنية والإبداع الربح الإلكتروني</p>
</article>

بطاقة العنصر

تصنيفات المحتوى عنصر تنظيمي.
المحتوى المسموح المحتوى التنظيمي.
الوسم المختصر لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب أي عنصر يقبل المحتوى التنظيمي.

لاحظ أنَّ العنصر <article> لا يجوز أن يكون ابنًا للعنصر <address>.

واجهة DOM HTMLElement

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

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

الخاصيات

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

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

  • يجب أن يكون كل عنصر <article> مُعرَّفًا (identified)، ويتم ذلك عمومًا بتضمين ترويسة (العناصر <h1>‏-<h6>) ضمن العنصر <article>.
  • عند استخدام أكثر من عنصر <article> داخل بعضها، فالعنصر الداخلي يُمثِّل مقالًا متعلقًا بالعنصر الأب، فمثلًا تكون التعليقات على تدوينة ما محتواةً ضمن عناصر <article> والموجودة ضمن عنصر <article> الذي يمثِّل التدوينة نفسها.
  • يمكن توفير معلومات الكاتب ضمن عنصر <article> عبر العنصر <address>، لكن هذه المعلومات لن تُطبَّق على عناصر <article> المتشعبة داخل العنصر الأب.
  • يمكن وصف تاريخ ووقت النشر في عنصر <article> عبر استخدام الخاصية datetime التابعة للعنصر <time>.

أمثلة

مثال موسَّع يوضِّح كيفية استعمال العنصر <article> وداخله عناصر متشعبة مختلفة مثل <section> (والذي يحتوي بدوره على عناصر <article> أخرى)، وكيفية وصف وقت النشر باستخدام العنصر <time> (الذي يمكن أن يوجد داخل تذييل <footer>):

<article>
  <h1>التفاح</h1>
  <section>
    <h2>أصناف التفاح</h2>
    <p>فقرة أو فقرات تشرح أنواع التفاح المختلفة</p>
  </section>
  <section>
    <article>
      <h2>تعليق لبروفيسور في علم النبات</h2>
      <p>فقرة توضِّح رأي البروفيسور</p>
      <footer>
        <p>
          نشر في
          <time datetime="2021-02-18 01:00">20 شباط/فبراير</time>
        </p>
      </footer>
    </article>
    <article class="user_review">
      <h2>رأينا في تعليق البروفيسور</h2>
      <p>فقرة نوضح فيها رأينا فيما قاله البروفيسور</p>
      <time datetime="2021-02-18 01:00"></time>
    </article>
  </section>
  <footer>
    <p>
      نشر المقال في
      <time datetime="2021-02-18 01:00">20 شباط/فبراير</time>
      من قبل سامي.   
    </p>
  </footer>
</article>

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

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

article {
  display: block;
}

 

شارك المقالة:
101 مشاهدة
المراجع +

هل أعجبك المقال
0
0

مواضيع ذات محتوي مطابق

مقالات عشوائية

تعملها إزاى؟.. كيفية توقيع ملف PDF رقميًا
بيل جيتس يخطط لنشر ملايين الأطنان من الطباشير فى الجو ليعكس ضوء الشمس
الأمريكيون يقترحون وضع جهاز يسجل هزات موجات الجاذبية على القمر
اليابان تدعو لدعم شركة Renesas المنكوبة مع تفاقم أزمة الرقائق الإلكترونية عالميا
انتهاء اختبارات أفراد البعثة الروسية القادمة إلى المحطة الفضائية
إنتل العالمية تستثمر 20 مليار دولار فى مصانع جديدة لإنتاج الرقائق الإلكترونية
إيه الفرق؟.. أبرز الاختلافات بين iPad Pro 12.9- inch و iPad Pro 10.5-inch
تقرير: يوتيوب يستكشف ميزة جديدة قد تنهى الإعلانات التقليدية
إطلاق اسم يورى جاجارين على مركبة فضائية
مجلة أمريكية: الكاميرات الموجودة داخل سيارات تسلا تثير مخاوف حول الخصوصية
جوجل تزود محركها بأدوات جديدة تحسن قدرات التعلم عبر الإنترنت للطلاب والمعلمين
إيلون ماسك: SpaceX ستهبط بصواريخ Starship على المريخ قبل عام 2030
جارتنر: نمو سوق برامج التواصل الاجتماعي والعمل التشاركي بمعدل 17% خلال الجائحة
انستجرام يحدد المنشورات المعاد مشاركتها فى القصص
رغم تخفيف حظر كورونا.. شركات التكنولوجيا ليست مستعدة لفتح مكاتبها حاليا
التصنيفات تصفح المواضيع
youtubbe twitter linkden facebook