شرح الهيكل الكامل (Header, Nav, Main, Footer)

هذا الدرس هو "التطور" الطبيعي لذلك المفهوم. في بدايات الويب، كان المطورون يبنون صفحات كاملة باستخدام <div> فقط (ما كان يُعرف بـ "حساء الـ div" أو "div soup"). كان الكود يبدو هكذا: <div id="header">، <div id="menu">، <div id="main-content">.

هذه الطريقة "تعمل"، لكنها تفتقر إلى "المعنى". المتصفح أو محرك البحث لا "يفهم" أن <div id="header"> هو الترويسة، هو فقط يراه "كصندوق".

لحل هذه المشكلة، قدم معيار HTML5 "وسوماً دلالية" (Semantic Elements). هذه وسوم تعمل تماماً مثل <div> (فهي حاويات كُتَلية)، ولكن "اسمها" يصف "الغرض" منها. بدلاً من <div id="header">، أصبح لدينا وسم <header>. هذا الدرس مخصص بالكامل لشرح هذه الوسوم الهيكلية الأساسية.

ما هي "الهيكلة الدلالية" (Semantics)؟ ولماذا هي ضرورية؟

"الدلالية" (Semantics) تعني "علم المعنى". في سياق HTML، الوسم الدلالي هو وسم يُعرّف "معنى" أو "غرض" المحتوى الذي بداخله، وليس فقط "شكله".

الفرق بين <div> و <header>:

<div>: وسم "محايد". يخبر المتصفح: "هذه حاوية" (This is a box).
<header>: وسم "دلالي". يخبر المتصفح: "هذه هي الترويسة" (This is the header).

لماذا هذا "المعنى" مهم جداً؟ لثلاثة أسباب رئيسية:

إمكانية الوصول (Accessibility): (الأهم على الإطلاق). المستخدمون ذوو الإعاقات البصرية يعتمدون على "قارئات الشاشة" (Screen Readers) لتصفح الويب. هذه البرامج تقرأ الصفحة بصوت عالٍ. عندما تستخدم <nav>، يمكن لقارئ الشاشة أن يخبر المستخدم: "لقد وصلت إلى قائمة التنقل، هل تريد تخطيها؟" أو "هل تريد الاستماع للروابط؟". إذا استخدمت <div>، فسيقول قارئ الشاشة "حاوية" (div)، وهو ما لا يحمل أي معنى للمستخدم. استخدام الوسوم الدلالية "يساعد ذوي الاحتياجات الخاصة" بشكل مباشر.
تهيئة محركات البحث (SEO): محركات البحث (مثل جوجل) هي "روبوتات" تقرأ الكود. عندما تستخدم <main> و <article>، فإنك تخبر جوجل بوضوح: "هذا هو المحتوى الرئيسي المهم"، و "هذا مجرد شريط جانبي (<aside>)"، و "هذا هو التذييل (<footer>)". هذا يساعد جوجل على فهم صفحتك وتصنيفها بشكل أفضل.
قابلية القراءة (Readability): للكود المصدري. عندما يفتح مطور آخر (أو أنت بعد 6 أشهر) الكود، فإن رؤية <header> و <main> و <footer> تجعل فهم هيكل الصفحة فورياً، بدلاً من محاولة فك شفرة عشرات من وسوم <div> المتداخلة.

القاعدة: دائماً استخدم الوسم الدلالي المناسب (إن وجد). إذا لم يوجد وسم دلالي يصف غرضك (مثلاً: حاوية للتنسيق فقط)، عندها فقط استخدم <div>.

الوسم `<header>` (الترويسة)

الوسم <header> يُستخدم لتعريف "الترويسة" أو "الجزء التقديمي" لمستند أو قسم.

تحذير شائع: لا تخلط بين <header> (الذي يوضع داخل <body> وهو مرئي) و <head> (الذي يوضع خارج <body> وهو خفي ويحمل البيانات الوصفية).

ماذا يحتوي عادة؟

شعار الموقع (<img>).
قائمة التنقل الرئيسية (<nav>).
عنوان الصفحة الرئيسي (<h1>) (أحياناً).
أدوات بحث أو أزرار تسجيل الدخول.

السياق (Context): يمكن استخدام <header> أكثر من مرة في الصفحة.

ترويسة الموقع: في أعلى <body>، لترويسة الموقع بأكمله.
ترويسة المقال: في بداية وسم <article>، لاحتواء عنوان المقال، اسم الكاتب، وتاريخ النشر.

مثال (1): `<header>` الموقع و `<header>` المقال

مثال (1): استخدام <header> في سياقين


<body>

    <!-- 1. ترويسة الموقع (Site Header) -->
    <header>
        <img src="images/logo.png" alt="شعار الموقع">
        <!-- (سيتم شرح Nav لاحقاً) -->
    </header>
    
    <main>
        <article>
            <!-- 2. ترويسة المقال (Article Header) -->
            <header>
                <h1>عنوان المقال الأول</h1>
                <p>كتبه: أحمد، بتاريخ: 10 نوفمبر 2025</p>
            </header>
            
            <p>هذا هو نص المقال...</p>
        </article>
    </main>

</body>

الوسم `<nav>` (التنقل)

الوسم <nav> (اختصار "Navigation") هو وسم دلالي مخصص "حصرياً" لتغليف "روابط التنقل الرئيسية".

هل نضع "كل" الروابط بداخله؟
لا. هذا الوسم مخصص لـ "المجموعات الرئيسية" للروابط.

استخدم <nav>: لقائمة التنقل العلوية (الرئيسية، من نحن، اتصل بنا)، أو قائمة التنقل الجانبية، أو روابط "الانتقال السريع" داخل الصفحة.
لا تستخدم <nav>: لقائمة روابط بسيطة في تذييل الصفحة (<footer>)، أو لرابط "اقرأ المزيد" داخل فقرة.

الممارسة المُثلى:
لإمكانية الوصول (Accessibility) والهيكلة السليمة، يجب "دائماً" وضع قائمة (<ul>) بداخل <nav>، واستخدام <li> و <a> لبناء الروابط.

مثال (2): الاستخدام الصحيح لـ `<nav>`

مثال (2): بناء قائمة تنقل (Nav)


<header>
    <img src="images/logo.png" alt="الشعار">
    
    <!-- قائمة التنقل الرئيسية للموقع -->
    <nav>
        <ul>
            <li><a href="index.html">الرئيسية</a></li>
            <li><a href="about.html">من نحن</a></li>
            <li><a href="contact.html">اتصل بنا</a></li>
        </ul>
    </nav>
</header>

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

هذا الوسم هو أحد أهم الإضافات الدلالية في HTML5.

الوسم <main> يُستخدم لتغليف المحتوى "الرئيسي" و "الفريد" (Unique) للصفحة. إنه يمثل "لب" الموضوع.

المحتوى الذي "يتكرر" في كل الصفحات (مثل الترويسة <header>، قائمة التنقل <nav>، والتذييل <footer>) يجب أن يكون "خارج" الوسم <main>.

قاعدة إلزامية:
يجب أن يكون هناك "وسم <main> واحد فقط" في الصفحة. لا يمكن أن يكون لديك قسمان رئيسيان.

الفائدة:
يسمح هذا الوسم لقارئات الشاشة بتوفير اختصار "الانتقال إلى المحتوى الرئيسي" (Skip to main content)، وهو حيوي للمستخدمين الذين لا يريدون الاستماع إلى الشعار وقائمة التنقل في كل مرة يفتحون فيها صفحة جديدة.

مثال (3): قاعدة الوسم `<main>`

مثال (3): موضع الوسم <main>


<body>

    <!-- 1. محتوى متكرر (خارج main) -->
    <header>
        <h1>الموقع</h1>
        <nav>... (روابط) ...</nav>
    </header>

    <!-- 2. المحتوى الرئيسي والفريد (داخل main) -->
    <main>
        <h2>عنوان صفحة "من نحن"</h2>
        <p>تفاصيل شركتنا...</p>
        <p>هذا المحتوى لن يظهر في صفحة "اتصل بنا".</p>
    </main>

    <!-- 3. محتوى متكرر (خارج main) -->
    <footer>
        <p>حقوق النشر...</p>
    </footer>

</body>

الوسم `<footer>` (التذييل)

الوسم <footer> يُستخدم لتعريف "تذييل" المستند أو قسم.

**ماذا يحتوي عادة؟**

معلومات حقوق النشر (<small>© 2025</small>).
روابط مساعدة (مثل: "سياسة الخصوصية"، "شروط الاستخدام").
روابط التواصل الاجتماعي.
رابط "العودة للأعلى" (Back to top).

مثل <header>، يمكن استخدامه في سياقين: تذييل للموقع بأكمله (في نهاية <body>) أو تذييل لمقال (في نهاية <article>، لاحتواء "التصنيفات" أو "أزرار المشاركة").

الوسم `<article>` (المقال / المحتوى المستقل)

هذا الوسم دلالي وهام جداً. يُستخدم <article> لتغليف محتوى "مستقل بذاته" (Self-contained) و "قابل للتوزيع" (Distributable) بشكل منفصل عن بقية الموقع.

الاختبار الحاسم (Litmus Test):
اسأل نفسك: "هل يمكنني أخذ هذا المحتوى، ونقله إلى "تغذية RSS" (RSS Feed)، أو طباعته، أو إرساله بالبريد الإلكتروني، وهل سيظل محتفظاً بمعناه الكامل؟"

إذا كانت الإجابة "نعم"، فاستخدم <article>.

أمثلة ممتازة: تدوينة (Blog Post)، مقال إخباري، مشاركة في منتدى، "تعليق" (Comment) من مستخدم، بطاقة منتج (Product Card).
أمثلة سيئة: نموذج "اتصل بنا"، فقرة "من نحن".

الوسم `<section>` (القسم / المجموعة الموضوعية)

لقد تطرقنا لهذا الوسم في الدرس 14، ولكنه يصبح أوضح عند مقارنته بـ <article>.

الوسم <section> يُستخدم لتجميع المحتوى المرتبط "موضوعياً" (Thematically related). إنه ليس بالضرورة "مستقلاً بذاته"، بل هو جزء "من" سياق الصفحة الأكبر.

الاختبار الحاسم:
اسأل نفسك: "هل هذا المحتوى يمثل "قسماً" منطقياً في مخطط الصفحة؟ وهل يمكنني إعطاؤه "عنواناً" (Heading)؟" (مثل <h2>).

إذا كانت الإجابة "نعم"، فاستخدم <section>.

أمثلة ممتازة: "الفصل الأول" في مقال، "الميزات" في صفحة منتج، "آخر الأخبار" في الصفحة الرئيسية، قسم "اتصل بنا" (كجزء من الصفحة الرئيسية).

الفارق الحاسم: `<article>` مقابل `<section>`

هذا هو الجزء الأكثر إرباكاً للمبتدئين.

<article> هو "المحتوى" المستقل.
<section> هو "التجميع" الهيكلي.

التداخل (Nesting):

<section> بداخل <article>؟ (نعم، شائع)
- (مثال: "مقال" (<article>) طويل، مقسم إلى "قسم: المقدمة" (<section>) و "قسم: التحليل" (<section>)).
<article> بداخل <section>؟ (نعم، شائع جداً)
- (مثال: "قسم آخر الأخبار" (<section>) في الصفحة الرئيسية، يحتوي على 5 "مقالات" (<article>) مختصرة).

مثال (4): توضيح الفارق بين `article` و `section`

هنا، الصفحة الرئيسية (<main>) تحتوي على "قسم" (Section) لآخر الأخبار. هذا القسم يحتوي على ملخصات "مقالات" (Articles) مستقلة.

مثال (4): <article> داخل <section>


<main>
    <!-- هذا "قسم" يجمع المقالات -->
    <section>
        <h2>آخر الأخبار</h2>
        
        <!-- هذا "محتوى مستقل" وقابل للتوزيع -->
        <article>
            <h3>الخبر الأول</h3>
            <p>تفاصيل الخبر الأول...</p>
            <a href="news/1.html">اقرأ المزيد</a>
        </article>
        
        <!-- هذا "محتوى مستقل" آخر -->
        <article>
            <h3>الخبر الثاني</h3>
            <p>تفاصيل الخبر الثاني...</p>
            <a href="news/2.html">اقرأ المزيد</a>
        </article>
        
    </section>
</main>

الوسم `<aside>` (المحتوى الجانبي)

الوسم <aside> (جانبي) يُستخدم للمحتوى الذي يُعتبر "مرتبطاً بشكل غير مباشر" (Tangentially related) بالمحتوى الرئيسي المحيط به.

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

الاستخدامات الشائعة:

كشريط جانبي (Sidebar): لوضع "روابط ذات صلة"، "نبذة عن المؤلف"، "إعلانات".
داخل <article>: لوضع "اقتباس" (Pull Quote) أو "هامش" (Glossary term) يتعلق بالمقال.

مثال (5): استخدام `<aside>` كشريط جانبي

مثال (5): <main> بجانب <aside>


<!-- حاوية عامة لتطبيق CSS للتخطيط -->
<div class="container">

    <!-- المحتوى الرئيسي (سيكون 70% من العرض) -->
    <main>
        <article>
            <h1>عنوان المقال</h1>
            <p>نص المقال الرئيسي...</p>
        </article>
    </main>
    
    <!-- المحتوى الجانبي (سيكون 30% من العرض) -->
    <aside>
        <h2>مقالات ذات صلة</h2>
        <ul>
            <li><a href="#">رابط مقال ذو صلة 1</a></li>
            <li><a href="#">رابط مقال ذو صلة 2</a></li>
        </ul>
    </aside>
    
</div> <!-- نهاية .container -->

(ملاحظة: بدون CSS، سيظهر <aside> "تحت" <main> لأنهما عنصران كُتَليان. لاحقاً في CSS، سنستخدم أوامر مثل display: flex لوضعهما "بجانب" بعضهما البعض).

مثال (6): الهيكل الشامل (تجميع كل الوسوم)

هذا المثال يجمع كل ما تعلمناه اليوم في هيكل صفحة مدونة قياسي.

مثال (6): الهيكل الدلالي الكامل للصفحة


<body>

    <!-- 1. ترويسة الموقع -->
    <header>
        <h1>مدونتي التقنية</h1>
        <nav>
            <ul>
                <li><a href="/">الرئيسية</a></li>
                <li><a href="/about">حول</a></li>
            </ul>
        </nav>
    </header>
    
    <!-- حاوية للتخطيط (CSS) -->
    <div class="wrapper">
    
        <!-- 2. المحتوى الرئيسي الفريد -->
        <main>
            <!-- 3. مقال مستقل بذاته -->
            <article>
                <header>
                    <h2>أهمية HTML الدلالية</h2>
                </header>
                
                <!-- 4. قسم موضوعي داخل المقال -->
                <section>
                    <h3>ما هي الهيكلة؟</h3>
                    <p>نص القسم الأول...</p>
                </section>
                
                <section>
                    <h3>لماذا هي مهمة؟</h3>
                    <p>نص القسم الثاني...</p>
                </section>
                
                <footer>
                    <p>التصنيفات: HTML, Web</p>
                </footer>
            </article>
        </main>
        
        <!-- 5. محتوى جانبي مرتبط بشكل غير مباشر -->
        <aside>
            <h3>عن الكاتب</h3>
            <p>نبذة عن كاتب المقال...</p>
        </aside>
        
    </div> <!-- نهاية .wrapper -->
    
    <!-- 6. تذييل الموقع -->
    <footer>
        <p>© 2025 مدونتي التقنية. كل الحقوق محفوظة.</p>
    </footer>

</body>

(ملخص الدرس)
1. استخدم "الوسوم الدلالية" بدلاً من <div> كلما أمكن لوصف "الغرض" من المحتوى.
2. <header>: للترويسة (العلوية) للموقع أو المقال.
3. <nav>: لمجموعات "روابط التنقل" الرئيسية (يحتوي على <ul>).
4. <main>: للمحتوى "الفريد" في الصفحة (يُستخدم "مرة واحدة" فقط).
5. <footer>: للتذييل (السفلي) للموقع أو المقال (يحتوي على حقوق النشر).
6. <article>: للمحتوى "المستقل" والقابل للتوزيع (تدوينة، تعليق).
7. <section>: للمحتوى "المجمع موضوعياً" (قسم، فصل، يتطلب عنواناً غالباً).
8. <aside>: للمحتوى "الجانبي" أو المرتبط بشكل غير مباشر.
9. **تنبيه CSS:** هذه الوسوم "تصف" الهيكل فقط. جعل <aside> يظهر على "الجانب" أو <header> يظل "مثبتاً" في الأعلى هو وظيفة "CSS" التي سنتعلمها لاحقاً.