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

<body>

وسم جسم المستند <body>

وسم body يحتضن كل المحتوى المرئي للصفحة — النصوص والصور والأزرار وكل ما يراه الزائر ويتفاعل معه.

التوأم المرئي لـ head: كل ما يظهر على الشاشة يعيش هنا — من الترويسة إلى التذييل. لا يوجد إلا body واحد لكل صفحة، وهو نقطة انطلاق شجرة DOM التي تتعامل معها الجافاسكريبت (document.body).

عادات التنسيق العامة تبدأ منه: خط الموقع، لون الخلفية، وإزالة الهامش الافتراضي الشهير margin:8px الذي تضعه المتصفحات.

الصياغة

<body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</body>

⚡ جرّب بنفسك

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

🎨 محرّر HTML/CSS
<p style="background:#ede9fe; padding:12px; border-radius:8px">
  كل ما تراه في أي صفحة ويب — بما فيه هذا الصندوق —
  يعيش داخل &lt;body&gt;.
</p>
النتيجة المباشرة:

أهم الخصائص

الخاصيةالوظيفة
class / idشائعان لتبديل السمات العامة (وضع داكن dark مثلًا)

💡 نصائح عملية

  • البنية الدلالية الكلاسيكية داخله: header ثم main ثم footer
  • المتصفح يعطيه margin افتراضيًّا — أزله بـ body{margin:0} في بداية أي مشروع

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

  • أكثر من body أو وضع محتوى بعده — بنية غير صالحة
  • وضع وسوم meta أو title داخله — مكانها head

وسوم ذات صلة

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

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