عنصر الـ <article> الموجود في الـ html فهو مفهوم من عنوانه والذي يعني (مقال) ونعرف جميعنا ان المقالات بنية مستقلة بذاتها. وتوجد في الوثائق, الصفحات, التطبيقات او المواقع. ما نتحدث عنه اليوم هو كيف نكتب عناصر الـ html لصفحة تحتوي على مقالات مثل : منشور المنتديات, مقالات الصفحات و المجلات. حتى منشورات المدونات blogs تعتبر مقالة.
في حالة اردت ان تبرمج صفحة تختص بالمقالات لابد لك ان تقوم باستخدام تاك او عنصر <article>. المثال التالي يوضع استخدام المقالة بابسط صوره لها:
يمكن لصفحة الواحدة ان تحتوي على الكثير من المقالات. وهذا المثال دليل على ذلك. ليس هذا فحسب, فيمكن ان يكون عنصر المقالة يحتوي على عناصر مقالة بداخله ( تسمى nested element اي العناصر المتداخلة ).
اليك معلومات خاطفة عن هذا العنصر:
| فئة المكون | |
|---|---|
| Permitted content | Flow content. |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that accepts flow content. Note that an <article> element must not be a descendant of an <address> element. |
| Implicit ARIA role | article |
| Permitted ARIA roles | application, document, feed, main, none, presentation, region |
| DOM interface | HTMLElement |
الخصائص
هذا العنصر يحتوي على الخصائص العامة فقط. يمكنك زيارتها من هنا
ملاحظات الاستخدام
انت حر في استخدام هذا العنصر. ولكننا نفضل ان تقوم بمراعات هذه النقاط على الاقل.
- كل عنصر <article> يجب ان يتم تعريفه من خلال تضمين عناوين heading باستخدام h1-h6 وتكون هذه العناصر بداخل هذا العنصر
- عندما تحاول ان تكتب عنصر <article> (اي عندما تحول كتابة nested element) عليك مراعاة ان يكون العنصر الداخلي متصل بالعنصر الخارجي. مثلا تعليقات المنشور يجب ان تكون article .
- معلومات مؤلف المنشور اذا امكن ان تكون في عنصر الـ <address>
- التواريخ الخاص بالمقالة مثل تاريخ النشر وغيرها يجب ان تكون من اختصاص العنصر <time> ويمكنك الاطلاع على هذا العنصر من هنا
المثال التالي يلخص لك هذه النقاط:
<article class="film_review">
<header>
<h2>Jurassic Park</h2>
</header>
<section class="main_review">
<p>Dinos were great!</p>
</section>
<section class="user_reviews">
<article class="user_review">
<p>Way too scary for me.</p>
<footer>
<p>
Posted on
<time datetime="2015-05-16 19:00">May 16</time>
by Lisa.
</p>
</footer>
</article>
<article class="user_review">
<p>I agree, dinos are my favorite.</p>
<footer>
<p>
Posted on
<time datetime="2015-05-17 19:00">May 17</time>
by Tom.
</p>
</footer>
</article>
</section>
<footer>
<p>
Posted on
<time datetime="2015-05-15 19:00">May 15</time>
by Staff.
</p>
</footer>
</article>
Specifications
| Specification | Status | Comment |
|---|---|---|
| HTML Living Standard The definition of '<article>' in that specification. |
Living Standard | |
| HTML 5.1 The definition of '<article>' in that specification. |
Recommendation | |
| HTML5 The definition of '<article>' in that specification. |
Recommendation |
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
article | Chrome Full support 5 | Edge Full support 12 | Firefox Full support 4 | IE Full support 9 | Opera Full support 11.1 | Safari Full support 5 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 4 | Opera Android Full support 11.1 | Safari iOS Full support 4.2 | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support