انتقل إلى محتوى الدرس

HTML Body Element عنصر Body في لغة HTML

في هذا الدرس، سنتعرف على كيفية إنشاء أول وثيقة HTML من خلال استكشاف العناصر الأساسية مثل HTML DOCTYPE Element لتعريف المستند، وHTML Root Element الذي يحتوي على كل مكونات الصفحة. سنتناول أيضًا أهمية HTML Head Element وHTML Title Element في تحديد البيانات الوصفية والعنوان، بالإضافة إلى HTML Body Element الذي يضم المحتوى المرئي للصفحة.

1 صفوف تعليمية
لغة HTML
8,521 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

عنصر body هو حاوية تشمل جميع العناصر المرئية التي تظهر أمام زوار صفحة الويب، مثل: العناوين، والفقرات النصية، والصور، والجداول، والقوائم، وأي عناصر مرئية أخرى.


أين يُكتب عنصر body؟

  • يكتب دائمًا داخل عنصر html بعد عنصر head، وهو عنصر مُتداخل nested element.


وظيفة عنصر body:

  • يُستخدم لاحتواء جميع العناصر المرئية للمستخدمين أو زوار صفحة الويب، مثل: الصور، والعناوين، والفقرات النصية.

  • يساعد محركات البحث في قراءة عناوين ومحتوى صفحة الويب، لكن وجود body وحده لا يضمن تحسين الترتيب.

استخدام عنصر body بطريقة صحيحة:
هناك عدد من الملاحظات التي يجب مراعاتها لكي يتم استخدام عنصر body بطريقة صحيحة، وهذه الملاحظات هي:

  • يُكتب عنصر body دائمًا داخل عنصر <html>، ويأتي أسفل عنصر head.

  • يجب أن يأتي عنصر <head> قبل عنصر <body>.

  • عنصر body من نوع العناصر المُتداخلة [nested elements].

  • لا يمكن تكرار عنصر <body> داخل نفس صفحة الويب، أي أنه يوجد عنصر body واحد فقط داخل صفحة الويب.

  • عنصر <body> هو آخر عنصر بداخل عنصر <html> ولا يوجد أسفله أي عناصر أخرى.

قد يحتوي body كذلك على عناصر لا تظهر مباشرة مثل script وعناصر مخفية؛ ليس كل ما بداخله مرئيًا دائمًا.

عنصر Body في لغة HTML

HTML Body Element

عنصر body يأتي دائمًا داخل عنصر html وأسفل عنصر head.

HTML
<!DOCTYPE html>
<html>
    <head>
        <title> Closetag | Home Page </title>
    </head>
    <body>

    </body>
</html>

Example Body Element

مثال لعنصر body به بعض العناصر elements التي تظهر لزوار صفحة الويب.

HTML
<!DOCTYPE html>
<html>
    <head>
        <title> Closetag | Home Page </title>
    </head>
    <body>
        <h1>First HTML Document</h1>
        <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet molestiae temporibus dolorem exercitationem culpa. Itaque asperiores iusto tempora, omnis, distinctio ducimus maiores cupiditate ab ad nesciunt unde voluptatem hic aliquam! </p>
    </body>
</html>