العنصر `<main>`

يُمثِّل العنصر <main> المحتوى الرئيسي لجسم المستند (العنصر <body>) أو لجزءٍ من المستند أو التطبيق. تضم منطقة المحتوى الرئيسي جميع المحتوى المرتبط مباشرةً بموضوع المستند أو يضيف عليه، أو يمثِّل الوظيفة الرئيسية للتطبيق.

يمكنك استخدام عدِّة عناصر <main> في الصفحة إن كان ذلك ملائمًا، فمثلًا لو كان هنالك صفحةٌ تُمثِّل عدِّة مقالات (كل واحدة منها ضمن عنصر <article>، وكل منها لها محتوى إضافي داخلها مثل معلومات الكاتب والإعلانات ...إلخ.) فمن المنطقي وضع العنصر <main> داخل كل مقالة لتعريف المحتوى الرئيسي لتلك المقالة.

يبيّن هذا المثال كيف يستعمل العنصر <main> مع عناصر <article> استعمالًا صحيحًا:

<!-- بقية المحتوى -->

<main>
  <article>
    <h1>التفاح</h1>
    <section>
      <h2>أصناف التفاح</h2>
      <p>فقرة أو فقرات تشرح أنواع التفاح المختلفة</p>
    </section>
    <section>
      <article>
        <h2>تعليق لبروفيسور في علم النبات</h2>
        <p>فقرة توضِّح رأي البروفيسور</p>
        <footer>
          <p>
            نشر في
            <time datetime="2017-05-16 19:00">16 أيار/مايو</time>
          </p>
        </footer>
      </article>
      <article class="user_review">
        <h2>رأينا في تعليق البروفيسور</h2>
        <p>فقرة نوضح فيها رأينا فيما قاله البروفيسور</p>
        <time datetime="2017-05-17 19:00"></time>
      </article>
    </section>
    <footer>
      <p>
        نشر المقال في
        <time datetime="2017-05-15 19:00">20 أيار/مايو</time> من قبل عبد اللطيف.
      </p>
    </footer>
  </article>
</main>

<!-- بقية المحتوى -->

بطاقة العنصر

تصنيفات المحتوى	محتوى تنظيمي.
المحتوى المسموح	المحتوى تنظيمي.
الوسم المختصر	يجب أن يملك وسم بداية، ولا يجب أن يملك وسم نهاية.
العناصر الأب	أي عنصر يقبل المحتوى التنظيمي، على ألّا يكون أحد العناصر الآتية: `<aside>` أو `<footer>` أو `<header>` أو `<nav>`.
واجهة DOM	HTMLElement

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

Chrome	Firefox	Edge	Safari	Opera
26	21.0	مدعوم	7	16

الخاصيات

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

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

يجب أن يكون محتوى العنصر <main> فريدًا بالنسبة إلى المستند أو أقسام المستند، فالمحتوى المكرر في مجموعة من المستندات أو في أكثر من قسم من المستند مثل الشريط الجانبي أو روابط التنقل أو حقوق النشر أو شعار الموقع أو نماذج البحث يجب ألّا تُضمَّن داخل العنصر <main> إلا إذا كان نموذج البحث (مثلًا) هو جزء رئيسي من وظيفة المستند.

لا يساهم العنصر <main> في تخطيط المستند، وعلى النقيض من العناصر مثل <body> أو الترويسات مثل <h2>، فالعنصر <main> لا يؤثر على بنية الصفحة من وجهة نظر DOM، فالغرض منه زيادة توصيف محتويات الصفحة ليس إلا.

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

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

main {
  display: block;
}

مصادر ومواصفات

معيار HTML Living Standard، سمح هذا المعيار باستخدام العنصر <main> عدِّة مرات في المستند، أو كأبن للعنصر <article>.
مواصفة HTML 5.1.
مواصفة HTML5.