تخطَّ إلى المحتوى

<main>

وسم المحتوى الرئيسي <main>

وسم main يحدد المحتوى الرئيسي الفريد للصفحة — واحد لكل صفحة، خارج الترويسة والتذييل والأشرطة.

يجيب عن سؤال «ما موضوع هذه الصفحة تحديدًا؟»: كل ما هو فريد فيها يعيش داخله، بينما يبقى المتكرر عبر الموقع (ترويسة، تنقل، تذييل، أشرطة جانبية) خارجه. قاعدة صارمة: main واحد ظاهر لكل صفحة.

فائدته العملية الفورية: رابط «تخطَّ إلى المحتوى» لمستخدمي لوحة المفاتيح يقفز إليه مباشرة متجاوزًا قوائم التنقل — وهو نمط مطبق في هذا الموقع نفسه.

الصياغة

<body>
  <header>...</header>
  <main>
    <!-- المحتوى الفريد -->
  </main>
  <footer>...</footer>
</body>

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS
<header style="background:#eee; padding:8px; text-align:center">الترويسة</header>
<main style="padding:24px; border:2px dashed #7c5cff; margin:8px 0">
  <h2 style="margin-top:0">المحتوى الرئيسي</h2>
  <p>الجزء الفريد من هذه الصفحة.</p>
</main>
<footer style="background:#eee; padding:8px; text-align:center">التذييل</footer>
النتيجة المباشرة:

أهم الخصائص

الخاصيةالوظيفة
idعادة id="main" ليكون هدف رابط «تخطَّ إلى المحتوى»

💡 نصائح عملية

  • زاوج main مع رابط تخطٍّ في أول الصفحة — مكسب وصولية بأسطر معدودة
  • لا يجوز وضع main داخل article أو section أو header — هو ابن مستوى أعلى

⚠️ أخطاء شائعة

  • أكثر من main ظاهر بالصفحة
  • إدخال التنقل أو الأشرطة الجانبية فيه — المتكرر يبقى خارجه

وسوم ذات صلة

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs