يُمثِّل العنصر <article>
جزءًا من المستند أو الصفحة أو التطبيق أو الموقع الغرض منها هو القدرة على إعادة توزيعها واستخدامها بشكل مستقل، مثل موضوع في منتدى أو مقالة في صحيفة أو تدوينة.
مثال عن استخدام عناصر <article>
لتمثيل محتوى المنشور ولتمثيل التعليقات، ويبين هذا المثال كيف يستعمل العنصر <article>
مع بقية عناصر HTML:
<article>
<h1>الموسوعة التقنية</h1>
<p>تهدف الموسوعة التقنية بتقديم أهم الشروحات والأخبار التقنية وأخبار الألعاب عبر موقعنا ومواقع التواصل الإجتماعي عالم التقنية والإبداع الربح الإلكتروني</p>
</article>
تصنيفات المحتوى | عنصر تنظيمي. |
---|---|
المحتوى المسموح | المحتوى التنظيمي. |
الوسم المختصر | لا يمكن حذف أيّ من وسمَي البداية أو النهاية. |
العناصر الأب | أي عنصر يقبل المحتوى التنظيمي.
لاحظ أنَّ العنصر |
واجهة 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;
}