عنصر المقالة <article>

عنصر الـ <article> الموجود في الـ html فهو مفهوم من عنوانه والذي يعني (مقال) ونعرف جميعنا ان المقالات بنية مستقلة بذاتها. وتوجد في الوثائق, الصفحات, التطبيقات او المواقع. ما نتحدث عنه اليوم هو كيف نكتب عناصر الـ html لصفحة تحتوي على مقالات مثل : منشور المنتديات, مقالات الصفحات و المجلات. حتى منشورات المدونات blogs تعتبر مقالة. 

في حالة اردت ان تبرمج صفحة تختص بالمقالات لابد لك ان تقوم باستخدام تاك او عنصر <article>. المثال التالي يوضع استخدام المقالة بابسط صوره لها: 

يمكن لصفحة الواحدة ان تحتوي على الكثير من المقالات. وهذا المثال دليل على ذلك. ليس هذا فحسب, فيمكن ان يكون عنصر المقالة يحتوي على عناصر مقالة بداخله ( تسمى nested element اي العناصر المتداخلة ).

اليك معلومات خاطفة عن هذا العنصر:

فئة المكون

Flow content, sectioning content, palpable content

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
articleChrome Full support 5Edge Full support 12Firefox Full support 4IE Full support 9Opera Full support 11.1Safari Full support 5WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support 11.1Safari iOS Full support 4.2Samsung Internet Android Full support Yes

Legend

Full support  
Full support

يمكنك زيارة التالي: