---
title: عنصر المقالة <article>
slug: HTML/Element/article
translation_of: Web/HTML/Element/article
---
<div>{{HTMLRef}}</div>

<p dir="rtl">عنصر الـ &lt;article&gt; الموجود في الـ html فهو مفهوم من عنوانه والذي يعني (مقال) ونعرف جميعنا ان المقالات بنية مستقلة بذاتها. وتوجد في الوثائق, الصفحات, التطبيقات او المواقع. ما نتحدث عنه اليوم هو كيف نكتب عناصر الـ html لصفحة تحتوي على مقالات مثل : منشور المنتديات, مقالات الصفحات و المجلات. حتى منشورات المدونات blogs تعتبر مقالة. </p>

<p dir="rtl">في حالة اردت ان تبرمج صفحة تختص بالمقالات لابد لك ان تقوم باستخدام تاك او عنصر &lt;article&gt;. المثال التالي يوضع استخدام المقالة بابسط صوره لها: </p>

<div>{{EmbedInteractiveExample("pages/tabbed/article.html", "tabbed-standard")}}</div>

<div></div>

<div class="hidden" dir="rtl">مصدر هذا المثال موجود في موقع GitHub ويمكنك المشاركة من خلال نسخ المثال الموجود في الرابط ادناه <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>بعدها يمكن ان ترسل لنا طلبا.</div>

<p dir="rtl">يمكن لصفحة الواحدة ان تحتوي على الكثير من المقالات. وهذا المثال دليل على ذلك. ليس هذا فحسب, فيمكن ان يكون عنصر المقالة يحتوي على عناصر مقالة بداخله ( تسمى nested element اي العناصر المتداخلة ).</p>

<p dir="rtl">اليك معلومات خاطفة عن هذا العنصر:</p>

<table class="properties" dir="rtl">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">فئة المكون </a></th>
   <td>
    <p><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Sectioning_content">sectioning content</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Palpable_content">palpable content</a></p>
   </td>
  </tr>
  <tr>
   <th scope="row">Permitted content</th>
   <td><a href="/en-US/docs/HTML/Content_categories#Flow_content">Flow content</a>.</td>
  </tr>
  <tr>
   <th scope="row">Tag omission</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Permitted parents</th>
   <td>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content">flow content</a>. Note that an <code>&lt;article&gt;</code> element must not be a descendant of an {{HTMLElement("address")}} element.</td>
  </tr>
  <tr>
   <th scope="row">Implicit ARIA role</th>
   <td><code><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Article_Role">article</a></code></td>
  </tr>
  <tr>
   <th scope="row">Permitted ARIA roles</th>
   <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("main")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}</td>
  </tr>
  <tr>
   <th scope="row">DOM interface</th>
   <td>{{domxref("HTMLElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 dir="rtl" id="الخصائص">الخصائص</h2>

<p dir="rtl">هذا العنصر يحتوي على الخصائص العامة فقط.<a href="/ar/docs/docs/HTML/Global_attributes"> يمكنك زيارتها من هنا</a></p>

<h2 dir="rtl" id="ملاحظات_الاستخدام">ملاحظات الاستخدام</h2>

<p dir="rtl">انت حر في استخدام هذا العنصر. ولكننا نفضل ان تقوم بمراعات هذه النقاط على الاقل.</p>

<ul>
 <li dir="rtl">كل عنصر &lt;article&gt; يجب ان يتم تعريفه من خلال تضمين عناوين heading باستخدام <a href="/ar/docs/Web/HTML/Element/Heading_Elements">h1-h6 </a>وتكون هذه العناصر بداخل هذا العنصر</li>
 <li dir="rtl">عندما تحاول ان تكتب عنصر &lt;article&gt; (اي عندما تحول كتابة nested element) عليك مراعاة ان يكون العنصر الداخلي متصل بالعنصر الخارجي. مثلا تعليقات المنشور يجب ان تكون article . </li>
 <li dir="rtl">معلومات مؤلف المنشور اذا امكن ان تكون في عنصر الـ &lt;address&gt; </li>
 <li dir="rtl">التواريخ الخاص بالمقالة مثل تاريخ النشر وغيرها يجب ان تكون من اختصاص العنصر <a href="/ar/docs/Web/HTML/Element/time#attr-datetime">&lt;time&gt; ويمكنك الاطلاع على هذا العنصر من هنا</a></li>
</ul>

<p dir="rtl">المثال التالي يلخص لك هذه النقاط:</p>

<pre class="brush: html notranslate">&lt;article class="film_review"&gt;
  &lt;header&gt;
    &lt;h2&gt;Jurassic Park&lt;/h2&gt;
  &lt;/header&gt;
  &lt;section class="main_review"&gt;
    &lt;p&gt;Dinos were great!&lt;/p&gt;
  &lt;/section&gt;
  &lt;section class="user_reviews"&gt;
    &lt;article class="user_review"&gt;
      &lt;p&gt;Way too scary for me.&lt;/p&gt;
      &lt;footer&gt;
        &lt;p&gt;
          Posted on
          &lt;time datetime="2015-05-16 19:00"&gt;May 16&lt;/time&gt;
          by Lisa.
        &lt;/p&gt;
      &lt;/footer&gt;
    &lt;/article&gt;
    &lt;article class="user_review"&gt;
      &lt;p&gt;I agree, dinos are my favorite.&lt;/p&gt;
      &lt;footer&gt;
        &lt;p&gt;
          Posted on
          &lt;time datetime="2015-05-17 19:00"&gt;May 17&lt;/time&gt;
          by Tom.
        &lt;/p&gt;
      &lt;/footer&gt;
    &lt;/article&gt;
  &lt;/section&gt;
  &lt;footer&gt;
    &lt;p&gt;
      Posted on
      &lt;time datetime="2015-05-15 19:00"&gt;May 15&lt;/time&gt;
      by Staff.
    &lt;/p&gt;
  &lt;/footer&gt;
&lt;/article&gt;
</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-article-element', '&lt;article&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', 'sections.html#the-article-element', '&lt;article&gt;')}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '&lt;article&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>



<p>{{Compat("html.elements.article")}}</p>

<h2 dir="rtl" id="يمكنك_زيارة_التالي">يمكنك زيارة التالي:</h2>

<ul>
 <li dir="rtl">العناصر المرتبطة بهذا العنصر - او ربما تستخدمها معه: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li>
 <li><a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Using HTML sections and outlines</a></li>
</ul>