شرح العنصر <body> في HTML
مقدمة عن عنصر<body>
عنصر <body> هو العنصر الرئيسي الذي يحتوي على كل المحتوى المرئي في صفحة الويب. وهو ثاني أهم عنصر في هيكل مستند HTML بعد <html> مباشرة، ويأتي بعد عنصر <head>.
البنية الأساسية
HTML
<!DOCTYPE html>
<html>
<head>
<title>عنوان الصفحة</title>
</head>
<body>
<!-- هنا كل محتوى الصفحة المرئي -->
<h1>مرحباً بالعالم!</h1>
<p>هذه فقرة نصية داخل body.</p>
</body>
</html>السمات (Attributes) الرئيسية
السمات العامة
-
id: معرف فريد للعنصر -
class: فئة CSS لتنسيق العنصر -
style: أنماط CSS مدمجة -
dir: تحديد اتجاه النص (rtl/ltr) -
lang: تحديد لغة المحتوى
السمات الخاصة
onbeforeunload- سكريبت ينفذ عندما يحاول المستخدم مغادرة الصفحةonhashchange- سكريبت ينفذ عند تغيير عنوان URLonmessage- سكريبت ينفذ عند استلام رسالة من التطبيقonoffline- سكريبت ينفذ عندما يبدأ المتصفح العمل في وضع عدم الاتصالononline- سكريبت ينفذ عندما يبدأ المتصفح العمل في وضع الاتصالonpagehide- سكريبت ينفذ عندما ينتقل المستخدم بعيدًا عن الصفحةonpageshow- سكريبت ينفذ عندما ينتقل المستخدم إلى الصفحةonload: تنفيذ سكريبت عند تحميل الصفحةonunload- سكريبت ينفذ عندما يغادر المستخدم الصفحةonafterprint- سكريبت ينفذ بعد طباعة صفحة الويبonbeforeprint- سكريبت ينفذ قبل طباعة صفحة الويبonlanguagechange- سكريبت ينفذ عند تغيير لغة المستندonmessageerror- سكريبت ينفذ عند حدوث خطأ في الرسالة المستلمة عبر واجهة الرسائلonpopstate- سكريبت ينفذ عند تغيير حالة سجل المتصفحonrejectionhandled- سكريبت ينفذ عند معالجة وعد مرفوض في كائن Promiseonstorage- سكريبت ينفذ عند تغيير البيانات في كائن localStorage أو sessionStorageonunhandledrejection- سكريبت ينفذ عند ظهور وعد مرفوض في كائن Promise بدون معالجة
العناصر المسموحة داخل <body>
العناوين (
<h1> إلى <h6>)
الفقرات (
<p>)
الروابط (
<a>)
الصور (
<img>)
الجداول (
<table>)
القوائم (
<ul> , <ol>, <dl>)
النماذج (
<form>)
العناصر الهيكلية (
<div> , <div>, <article>)
الوسائط المتعددة (
<video> , <audio>)
أهمية عنصر <body>
الحاوية الرئيسية
يحتوي على كل المحتوى الذي يراه المستخدم
التفاعل مع المستخدم
يستجيب لأحداث المستخدم مثل النقر والتمرير
التنسيق المرئي
أساس تطبيق أنماط CSS على الصفحة
التواصل مع JavaScript
نقطة البداية لمعالجة DOM
أفضل الممارسات
تنظيم المحتوى
- استخدام العناصر الدلالية (
<header>,<main>,<footer>) - تقسيم المحتوى إلى أقسام منطقية
إمكانية الوصول
- استخدام lang لتحديد اللغة
- ضمان تباين كافٍ للنصوص
- توفير بدائل نصية للوسائط
الأداء
- تقليل عدد العناصر المباشرة في body
- تحميل السكريبتات قبل نهاية body
التنسيق باستخدام CSS
يمكن تنسيق <body> باستخدام CSS لتحديد:
- خصائص النص الأساسية
- لون الخلفية
- الهوامش والحشو
- تخطيط الصفحة العام
CSS
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
margin: 0;
padding: 0;
line-height: 1.6;
}التفاعل مع JavaScript
يمكن الوصول إلى <body> عبر JavaScript بعدة طرق:
JavaScript
// الوصول إلى body
const body = document.body;
// تغيير المحتوى
body.innerHTML = '<h1>محتوى جديد</h1>';
// إضافة حدث
body.addEventListener('click', function() {
console.log('تم النقر على body');
});أحداث body الشائعة
onload
عند انتهاء تحميل الصفحة
<body onload="initPage()">onresize
عند تغيير حجم النافذة
window.addEventListener('resize', handleResize);onscroll
عند التمرير في الصفحة
window.addEventListener('scroll', handleScroll);أمثلة عملية
HTML
<!DOCTYPE html>
<html>
<head>
<title>صفحتي الأولى</title>
<style>
body {
font-family: Arial;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
</style>
</head>
<body>
<h1>مرحباً!</h1>
<p>هذه صفحتي الأولى على الويب.</p>
<script>
document.body.style.backgroundColor = '#eef';
</script>
</body>
</html>
HTML
<!DOCTYPE html>
<html>
<head>
<title>صفحة تفاعلية</title>
</head>
<body onload="console.log('تم التحميل')">
<button onclick="changeColor()">تغيير اللون</button>
<script>
function changeColor() {
document.body.style.backgroundColor = 'lightgreen';
}
</script>
</body>
</html>الخلاصــــة
عنصر <body> هو العمود الفقري لأي أمثلة عملية
ويب، حيث:
- يحتوي على كل المحتوى المرئي
- يحدد الهيكل الأساسي للصفحة
- يوفر سياقًا لأنماط التصميم
- يعمل كنقطة بداية للتفاعلات البرمجية
فهم واستخدام <body> بشكل صحيح هو أساس إنشاء صفحات ويب فعالة وسهلة الاستخدام.
