حلول مصر

سيتم مراجعة بياناتك من قبل فريق العمل، وفي حال قبولك سيتم تفعيل حسابك وإبلاغك بذلك عبر البريد الإلكتروني المسجل.

شرح الحاويات | HTML

شرح الحاويات <div> و <section>

هذا الدرس يتناول مفهوماً مختلفاً وأكثر تجريداً: "الحاويات" (Containers). الحاويات هي وسوم وظيفتها الأساسية هي "تجميع" أو "احتواء" مجموعة من العناصر الأخرى معاً كوحدة واحدة.

سنتناول بالشرح أهم وسمين يُستخدمان لهذا الغرض: الوسم <div> (الحاوية العامة)، والوسم <section> (الحاوية الدلالية). فهم هذه الوسوم هو الخطوة الأولى والأساسية للتحضير لتعلم لغة CSS، حيث تُعد هذه الحاويات هي "اللبنات" الأساسية التي نستخدمها لبناء "تخطيط" (Layout) الصفحة.

ما هو العنصر "الحاوي" (Container)؟

العنصر الحاوي (أو "الوسم الأب" كما أشرت) هو وسم HTML يُستخدم لـ "تغليف" (Wrap) وسم واحد أو أكثر من الوسوم الأخرى.

يمكن تشبيهه بـ "صندوق" أو "مغلف". إذا كان لديك عنوان <h2> ومجموعة من الفقرات <p> وصورة <img> تتحدث جميعها عن موضوع واحد (مثل "بطاقة منتج")، فمن المنطقي وضعها جميعاً داخل "صندوق" واحد.

لماذا نقوم بهذا التجميع؟

  • للتنظيم الهيكلي: لجعل الكود المصدري مقروءاً ومنطقياً، حيث يتم تجميع الأجزاء ذات الصلة معاً.
  • للتنسيق (CSS): وهو السبب الأهم. بدلاً من تطبيق تنسيق (مثل لون خلفية أو حد) على كل عنصر (العنوان والفقرات والصورة) بشكل منفصل، يمكننا تطبيق التنسيق "مرة واحدة" على الصندوق (الحاوية)، فيُطبق على كل ما بداخله. (سنتعلم هذا بالتفصيل لاحقاً).
  • للمعالجة (JavaScript): لتسهيل العثور على هذه "الوحدة" بأكملها والتعامل معها برمجياً (مثل إخفائها أو إظهارها).

الوسم <div>: الحاوية العامة المحايدة

الوسم <div> (اختصار "Division" أو "تقسيم") هو "أشهر" وسم حاوٍ في لغة HTML.

الخاصية الأهم والأكثر تحديداً للوسم <div> هي أنه "محايد دلالياً" (Semantically Neutral).

هذا يعني أنه "لا يُضيف أي معنى" للمحتوى الذي بداخله. هو مجرد "صندوق فارغ" (Generic Box) مخصص للتجميع فقط. عندما يقرأ المتصفح أو محرك البحث الوسم <div>، فإنه لا يفهم "ما هو" هذا المحتوى، بل يفهم فقط أنه "مجموعة" من العناصر.

متى نستخدمه؟
نستخدم <div> في أي وقت نحتاج فيه إلى "تجميع" عناصر لغرض "التنسيق بـ CSS" أو "المعالجة بـ JavaScript" فقط، ولا يوجد وسم دلالي آخر (مثل <section> أو <nav>) يصف هذا المحتوى بشكل أفضل.

مثال (1): استخدام <div> وتأثيره (أو عدمه)

لنلقِ نظرة على كود يحتوي على <div>. سنضع عنواناً وفقرتين داخل "صندوق" <div>.

مثال (1): مجموعة عناصر داخل <div> 

<body>

    <h2>عناصر غير مجمعة</h2>
    <p>هذه فقرة مستقلة.</p>

    <!-- بداية الحاوية -->
    <div>
        <h2>عنوان داخل الحاوية</h2>
        <p>هذه الفقرة الأولى داخل الحاوية.</p>
        <p>هذه الفقرة الثانية داخل الحاوية.</p>
    </div>
    <!-- نهاية الحاوية -->

</body>

النتيجة المتوقعة في المتصفح (بدون CSS):

ستبدو النتيجة "مطابقة تماماً" كما لو أن الوسم <div> غير موجود. سيرى المستخدم عنواناً، ثم ثلاث فقرات تحت بعضها.

هذا يؤكد أن <div> ليس له تأثير بصري افتراضي (باستثناء كونه عنصراً كُتَلياً). قيمته "خفية" وتنتظر تفعيلها بواسطة CSS.

الوسم <section>: الحاوية الدلالية (Semantic)

الوسم <section> (قسم) هو وسم حاوٍ جديد تم تقديمه في HTML5.

على عكس <div> (المحايد)، فإن الوسم <section> له "معنى دلالي" (Semantic Meaning).

ما هو معناه؟
الوسم <section> يُستخدم لتجميع المحتوى المرتبط "موضوعياً". إنه يخبر المتصفح وقارئات الشاشة: "هذه العناصر التي بداخلي تُشكل معاً قسماً مستقلاً بذاته وذا صلة بموضوع واحد".

يمكن تشبيهه بـ "فصل" (Chapter) في كتاب، أو "قسم" (Section) في جريدة (مثل: قسم الرياضة، قسم الأخبار العاجلة، قسم الاقتصاد).

قاعدة هامة:
القاعدة العامة هي أن الوسم <section> يجب أن يحتوي "دائماً" تقريباً على "عنوان" (مثل <h2> أو <h3>) كأحد أبنائه المباشرين، لكي يُعرف هذا القسم عن ماذا يتحدث. إذا لم يكن للمجموعة عنوان منطقي، فمن الأفضل استخدام <div>.

مثال (2): استخدام <section> لهيكلة مقال

لنفترض أن لدينا مقالاً طويلاً. بدلاً من وضع كل شيء داخل <body> مباشرة، سنستخدم <section> لتقسيمه إلى أجزاء منطقية.

مثال (2): استخدام <section> 

<body>

    <h1>دليل تعلم تطوير الويب</h1>

    <!-- القسم الأول -->
    <section>
        <h2>الفصل الأول: المقدمة (HTML)</h2>
        <p>HTML هي لغة هيكلة الصفحات...</p>
        <p>تتكون من وسوم مختلفة...</p>
    </section>

    <!-- القسم الثاني -->
    <section>
        <h2>الفصل الثاني: التنسيق (CSS)</h2>
        <p>CSS هي لغة التنسيق...</p>
        <p>تستخدم لتغيير الألوان والخطوط...</p>
    </section>
    
    <!-- القسم الثالث -->
    <section>
        <h2>الفصل الثالث: التفاعلية (JavaScript)</h2>
        <p>JavaScript هي لغة برمجة الويب...</p>
    </section>

</body>

مرة أخرى، المظهر البصري (بدون CSS) لن يختلف كثيراً، ولكن الكود الآن له "معنى" أفضل بكثير. أصبح "مخطط" (Outline) الصفحة واضحاً للمتصفح (وهو أمر مهم لمحركات البحث).

الفارق الجوهري: <div> مقابل <section>

هذا هو السؤال الأكثر شيوعاً: متى أستخدم هذا ومتى أستخدم ذاك؟

القاعدة بسيطة: "استخدم <section> أولاً، وإذا لم يكن مناسباً، استخدم <div>."

  • استخدم <section> (الوسم الدلالي):
    • عندما يكون للمجموعة "عنوان" واضح.
    • عندما يمثل المحتوى "قسماً" منطقياً في مخطط الصفحة (مثل: "المقدمة"، "الميزات"، "قسم التعليقات"، "اتصل بنا").

  • استخدم <div> (الوسم العام):
    • عندما يكون الغرض "فقط" هو التنسيق بـ CSS.
    • (مثال: تريد إنشاء "صندوق أزرق" يحتوي على صورة. هذا ليس قسماً، إنه مجرد تصميم).
    • (مثال: تريد إنشاء حاوية لتطبيق "تخطيط" (Layout) معين، مثل تقسيم الصفحة إلى عمودين).
    • عندما لا يكون للمجموعة أي معنى دلالي مستقل.

مثال (3): متى نستخدم <div> داخل <section>؟

هذا مثال ممتاز يوضح التعاون بين الوسمين. سنقوم بإنشاء "قسم التعليقات" (باستخدام <section>)، وبداخله، سنغلف "كل تعليق فردي" في <div> خاص به.

مثال (3): تداخل <div> داخل <section> 

<body>

    <!-- 1. استخدام "section" لتعريف القسم بالكامل -->
    <section>
        <h2>قسم التعليقات</h2>
        
        <!-- 2. استخدام "div" لتغليف "كل" تعليق لغرض التنسيق (لإضافة إطار حوله لاحقاً) -->
        <div>
            <h3>أحمد محمد</h3>
            <p>شكراً على المقال الرائع!</p>
        </div>
        
        <!-- 2. استخدام "div" آخر لتعليق آخر -->
        <div>
            <h3>سارة علي</h3>
            <p>معلومات مفيدة جداً.</p>
        </div>
        
    </section>

</body>

التحليل:
- <section>: صحيح دلالياً، لأنه "قسم التعليقات" وله عنوان <h2>.
- <div>: صحيح، لأن "صندوق التعليق الواحد" لا يمثل قسماً مستقلاً، بل هو مجرد "حاوية تنسيقية" سنستخدمها لاحقاً في CSS (مثلاً لإعطائها border أو padding).

قاعدة مهمة: العناصر الكُتَلية (Block-level)

الوسمان <div> و <section> كلاهما "عناصر كُتَلية" (Block-level elements).

هذا يعني أنهما (افتراضياً، بدون CSS) يتبعان نفس قواعد <p> و <h1>:

  • سيبدآن دائماً على "سطر جديد".
  • سيشغلان "100%" من العرض المتاح للحاوية التي يوجدان بداخلها.

لذلك، في الأمثلة السابقة، تظهر العناصر "تحت" بعضها البعض.

تنبيه هام: لماذا هذه الوسوم هي أساس CSS؟

كما تم التلميح، فإن 90% من قوة الوسم <div> (و <section>) تأتي من استخدامه مع CSS.

في الوقت الحالي، تبدو هذه الوسوم "غير مرئية" أو "عديمة الفائدة" تقريباً. ولكن يجب أن نثق في أنها "الأساس" الذي سنبني عليه كل شيء لاحقاً.

سؤال مستقبلي: كيف يمكنني وضع "شريط جانبي" (Sidebar) بجوار "المحتوى الرئيسي" (Main Content)؟
الإجابة: لا يمكن فعل ذلك باستخدام <p> أو <h1> وحدها.
الحل: سنقوم بوضع كل محتوى الشريط الجانبي في <div id="sidebar">، وكل المحتوى الرئيسي في <div id="main">. ثم، باستخدام CSS، سنأمر المتصفح بوضع هذين الـ <div> "بجانب" بعضهما البعض بدلاً من "تحت" بعضهما.

الوسوم <div> و <section> هي "الخطافات" (Hooks) أو "المقابض" (Handles) التي تسمح لـ CSS "بالإمساك" بأجزاء من الصفحة وتغيير مظهرها وتخطيطها. بدونها، تصبح الصفحة مجرد مستند نصي واحد لا يمكن التحكم في تخطيطه.

مثال (4): هيكل صفحة كامل (توضيحي)

يوضح هذا المثال كيف يمكن استخدام <div> و <section> (مع وسوم دلالية أخرى مثل <header> و <footer> التي تعمل بنفس المبدأ) لبناء هيكل صفحة كامل. (ملاحظة: <header> و <footer> هي وسوم دلالية متخصصة سنتناولها في الدرس القادم، ولكنها تتبع نفس منطق <section>).

مثال (4): هيكل صفحة كامل (تخيلي) 

<body>

    <!-- حاوية "عامة" لتغليف الصفحة كلها للتنسيق -->
    <div class="page-wrapper">
    
        <!-- (هذا وسم دلالي للترويسة) -->
        <header>
            <h1>شعار الموقع</h1>
            <!-- (هنا نضع قائمة التنقل <nav>) -->
        </header>

        <!-- حاوية "عامة" لتغليف المحتوى والشريط الجانبي (لنضعهما بجانب بعضهما بـ CSS) -->
        <div class="content-area">
        
            <!-- (هذا وسم دلالي للمحتوى الرئيسي) -->
            <main>
                <!-- "قسم" دلالي داخل المحتوى الرئيسي -->
                <section>
                    <h2>آخر الأخبار</h2>
                    <p>الخبر الأول...</p>
                </section>
            </main>
            
            <!-- (هذا وسم دلالي للشريط الجانبي) -->
            <aside>
                <h3>روابط سريعة</h3>
                <!-- (هنا نضع قائمة روابط) -->
            </aside>
            
        </div> <!-- نهاية .content-area -->
        
        <!-- (هذا وسم دلالي للتذييل) -->
        <footer>
            <p>حقوق النشر © 2025</p>
        </footer>
        
    </div> <!-- نهاية .page-wrapper -->

</body>

(ملخص الدرس):
1. <div> و <section> هما "حاويات" (صناديق) نضع بداخلها عناصر أخرى.
2. كلاهما عنصر "كُتَلي" (Block-level) (يبدأ سطراً جديداً ويأخذ 100% من العرض).
3. **الفرق الجوهري:** <section> له "معنى دلالي" (يُستخدم لقسم منطقي له عنوان)، بينما <div> "محايد" (يُستخدم للتجميع بغرض التنسيق فقط).
4. القاعدة: استخدم <section> أولاً. إذا لم يكن المعنى "قسماً"، استخدم <div>.
5. القوة الحقيقية لهذه الوسوم "لن تظهر" إلا عند تعلم لغة CSS، حيث تُستخدم كـ "خطافات" (Hooks) لتطبيق التخطيطات (Layouts) والتنسيقات المعقدة.