أساسيات HTML5

عناصر تخطيط HTML5 الدلالية

30 دقيقة الدرس 13 من 18

ماذا يعني HTML الدلالي؟

HTML الدلالي يعني استخدام عناصر تصف بوضوح معناها والغرض منها لكل من المتصفح والمطور. بدلا من تغليف كل شيء في وسوم <div> العامة، فان العناصر الدلالية مثل <header> و <nav> و <article> تخبر المتصفح بالضبط ما هو دور كل قسم. يعد هذا من اهم التحسينات التي قدمها HTML5. عندما يواجه قارئ الشاشة عنصر <nav>، يعرف ان هذه منطقة تنقل. وعندما يواجه محرك البحث عنصر <article>، يعرف ان هذا محتوى مستقل. اما مع <div> العادي، فلا المتصفح ولا قارئ الشاشة ولا محرك البحث يعرف ما يمثله المحتوى.

عناصر التخطيط الاساسية

قدم HTML5 عدة عناصر هيكلية تحل محل النمط القديم في استخدام <div> مع اسماء الفئات لكل شيء. اليك ما صمم كل عنصر من اجله:

<header> -- يمثل المحتوى التمهيدي او مجموعة من ادوات التنقل. يحتوي عادة على الشعارات وعناوين الموقع والتنقل الرئيسي. يمكن ان تحتوي الصفحة على عدة عناصر header.
<nav> -- يحتوي على روابط التنقل الرئيسية. استخدمه للقوائم الرئيسية ومسارات التنقل وجداول المحتويات. لا تغلف كل مجموعة روابط في nav -- فقط كتل التنقل الرئيسية.
<main> -- يغلف المحتوى الرئيسي للصفحة. يجب ان يكون هناك عنصر <main> واحد فقط في كل صفحة، ولا يجب وضعه داخل header او footer او nav او aside.
<section> -- يجمع المحتوى المرتبط موضوعيا معا. يجب ان يحتوي كل قسم عادة على عنوان. استخدمه عندما يشكل المحتوى مجموعة موضوعية متميزة.
<article> -- يمثل محتوى مستقلا يمكن توزيعه او اعادة استخدامه بشكل منفصل. منشورات المدونات والمقالات الاخبارية ومنشورات المنتديات وبطاقات المنتجات كلها امثلة جيدة.
<aside> -- يحتوي على محتوى مرتبط بشكل غير مباشر بالمحتوى المحيط. الاشرطة الجانبية والاقتباسات والاعلانات والروابط ذات الصلة هي استخدامات نموذجية.
<footer> -- يمثل تذييل اقرب محتوى قسمي. يحتوي عادة على معلومات حقوق النشر وتفاصيل الاتصال وروابط التنقل الثانوية.
<address> -- يوفر معلومات الاتصال لمؤلف اقرب مقال او الصفحة بالكامل. لا يستخدم للعناوين البريدية العامة.

Section مقابل Div: متى تستخدم كلا منهما

هذه واحدة من اكثر نقاط الارتباك شيوعا. عنصر <div> هو حاوية عامة بدون معنى دلالي. موجود فقط لاغراض التنسيق والتخطيط. عنصر <section> يمثل مجموعة موضوعية من المحتوى ويجب ان يتضمن عنوانا دائما تقريبا. استخدم <div> عندما تحتاج لحاوية لتنسيق CSS ولا يناسب اي عنصر دلالي. استخدم <section> عندما يشكل المحتوى مجموعة ذات معنى يمكنك منحها عنوانا.

مثال: Div للتنسيق مقابل Section للمعنى

<!-- استخدم div لاغلفة التخطيط البحتة -->
<div class="container">
    <div class="grid-row">
        <!-- غلاف تخطيط، بدون معنى دلالي -->
    </div>
</div>

<!-- استخدم section لمجموعات المحتوى الموضوعية -->
<section>
    <h2>خدماتنا</h2>
    <p>نقدم تصميم المواقع والتطوير وتحسين محركات البحث.</p>
</section>

بناء تخطيط صفحة دلالي كامل

الان دعنا نجمع كل العناصر الدلالية معا في هيكل صفحة واقعي. لاحظ كيف ان كل قسم من الصفحة له عنصر واضح ووصفي بدلا من div عام.

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

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>مدونتي</title>
</head>
<body>
    <header>
        <h1>مدونتي الشخصية</h1>
        <nav>
            <ul>
                <li><a href="/">الرئيسية</a></li>
                <li><a href="/about">من نحن</a></li>
                <li><a href="/contact">اتصل بنا</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2>فهم HTML الدلالي</h2>
            <p>نشر في 15 يناير 2026</p>
            <p>يحسن HTML الدلالي الوصول وتحسين محركات البحث...</p>
        </article>

        <aside>
            <h3>مقالات ذات صلة</h3>
            <ul>
                <li><a href="/css-grid">دليل CSS Grid</a></li>
                <li><a href="/flexbox">اساسيات Flexbox</a></li>
            </ul>
        </aside>
    </main>

    <footer>
        <address>
            تواصل: <a href="mailto:info@example.com">info@example.com</a>
        </address>
        <p>حقوق النشر 2026 مدونتي</p>
    </footer>
</body>
</html>

مقارنة التخطيط غير الدلالي والدلالي

لفهم الفرق الحقيقي، دعنا نقارن نسختين من نفس التخطيط بالضبط -- واحدة تستخدم divs فقط، والاخرى تستخدم عناصر دلالية.

مثال: تخطيط غير دلالي (تجنب هذا)

<div class="header">
    <div class="logo">اسم الموقع</div>
    <div class="navigation">
        <a href="/">الرئيسية</a>
        <a href="/about">من نحن</a>
    </div>
</div>
<div class="main-content">
    <div class="post">
        <div class="post-title">مقالتي</div>
        <div class="post-body">المحتوى هنا...</div>
    </div>
</div>
<div class="footer">حقوق النشر 2026</div>

مثال: تخطيط دلالي (استخدم هذا)

<header>
    <h1>اسم الموقع</h1>
    <nav>
        <a href="/">الرئيسية</a>
        <a href="/about">من نحن</a>
    </nav>
</header>
<main>
    <article>
        <h2>مقالتي</h2>
        <p>المحتوى هنا...</p>
    </article>
</main>
<footer>حقوق النشر 2026</footer>

كلاهما يعرض نفس النتيجة المرئية، لكن النسخة الدلالية اقصر وانظف واكثر معنى للمتصفحات وتقنيات المساعدة.

فوائد تحسين محركات البحث والوصول

استخدام HTML الدلالي يوفر مزايا كبيرة لكل من تحسين محركات البحث والوصول:

محركات البحث تستخدم العناصر الدلالية لفهم بنية صفحتك. المحتوى داخل <article> و <main> يحظى بالاولوية على المحتوى في <aside> او <footer>. هذا يساعد محركات البحث على تحديد موضوع صفحتك الحقيقي.
قارئات الشاشة تستخدم المعالم الدلالية لمساعدة المستخدمين ضعاف البصر في التنقل. يمكن للمستخدم الانتقال مباشرة الى محتوى <main> او التخطي الى <nav> او العثور على <footer> دون قراءة كل عنصر في الصفحة.
صيانة الكود تتحسن لان المطورين يمكنهم فحص HTML وفهم بنية الصفحة فورا دون الاعتماد على اسماء الفئات التي تختلف من مشروع لاخر.
السلوكيات الافتراضية للمتصفح تتحسن. بعض المتصفحات توفر عروض مخطط تفصيلي او اوضاع قراءة تعتمد على العناصر الدلالية لاستخراج المحتوى وعرضه بشكل صحيح.

ملاحظة: يمكنك استخدام عدة عناصر <header> و <footer> في صفحة واحدة. على سبيل المثال، يمكن لكل <article> ان يحتوي على header و footer خاصين به. لكن يجب ان يكون هناك عنصر <main> واحد فقط في كل صفحة.

نصيحة: عند الاختيار بين <section> و <article>، اسال نفسك: "هل يمكن ان يكون هذا المحتوى مفهوما بمفرده اذا سحبته من الصفحة؟" اذا كانت الاجابة نعم، استخدم <article>. اذا كان المحتوى مفهوما فقط في سياق الصفحة المحيطة، استخدم <section>.

خطا شائع: استبدال كل <div> بـ <section>. الهدف من HTML الدلالي ليس القضاء على div تماما. لا تزال divs مثالية لاغلفة التخطيط وربط التنسيقات. استخدم العناصر الدلالية فقط عندما يكون للمحتوى معنى دلالي حقيقي.

تمرين عملي

خذ صفحة ويب موجودة قمت ببنائها (او انشئ واحدة جديدة) واعد هيكلتها باستخدام عناصر HTML5 الدلالية فقط. استبدل جميع عناصر div المستخدمة للتخطيط بالوسوم الدلالية المناسبة: header و nav و main و section و article و aside و footer. اضف عنصر address في التذييل. ثم افتح صفحتك في قارئ شاشة او استخدم مفتش الوصول في المتصفح للتحقق من ان كل معلم محدد بشكل صحيح. قارن شجرة الوصول للنسخة الدلالية مع النسخة الاصلية المبنية على div.