العناصر الدلالية — أساسيات HTML

العناصر الدلالية (Semantic HTML)

قارن بين هذين:

<div class="top"><div class="menu">...</div></div>
<div class="content">...</div>

<header><nav>...</nav></header>
<main>...</main>

الشكل قد يكون متطابقاً، لكن الثاني يقول ما هو كل جزء. هذا مهم لـ:

- قارئات الشاشة: تعرض "المناطق" (landmarks) ويقفز المستخدم مباشرة إلى المحتوى الرئيسي أو التنقل.

- محركات البحث: تفهم أين المحتوى الأساسي.

- المطورين: كود أسهل قراءة من بحر من div.

العناصر الرئيسية

| العنصر | المعنى | ملاحظات |

|---|---|---|

| <header> | مقدمة الصفحة أو مقدمة قسم/مقال | يمكن أن يتكرر (رأس لكل مقال) |

| <nav> | مجموعة روابط تنقل رئيسية | ليس كل مجموعة روابط |

| <main> | المحتوى الرئيسي الفريد للصفحة | واحد فقط ومرئي، خارج header و footer |

| <article> | محتوى مستقل له معنى وحده | مقال، منشور، تعليق، بطاقة منتج |

| <section> | قسم موضوعي له عنوان | إن لم يكن له عنوان فربما هو div |

| <aside> | محتوى جانبي مرتبط بشكل غير مباشر | شريط جانبي، صندوق "اقرأ أيضاً" |

| <footer> | خاتمة الصفحة أو القسم | حقوق، روابط، معلومات الكاتب |

article أم section؟

اسأل: هل يمكن نشر هذا الجزء وحده في مكان آخر ويبقى مفهوماً؟

- نعم ← article (منشور مدونة، خبر).

- لا، هو جزء من كل أكبر ← section (قسم "المميزات" في صفحة هبوط).

<article>
    <header>
        <h2>كيف تبدأ مع HTML</h2>
        <p>بقلم سارة — <time datetime="2026-03-15">15 مارس 2026</time></p>
    </header>
    <section>
        <h3>الأدوات</h3>
        <p>...</p>
    </section>
    <section>
        <h3>أول صفحة</h3>
        <p>...</p>
    </section>
    <footer><p>الوسوم: HTML، مبتدئ</p></footer>
</article>

<time datetime="..."> يعطي التاريخ بصيغة يفهمها الحاسوب مع نص يقرؤه الإنسان.

متى div و span؟

<div> (كتلة) و <span> (داخل السطر) بلا معنى — استخدمهما عندما تحتاج غلافاً لأجل التنسيق أو JavaScript فقط ولا يوجد عنصر دلالي مناسب. هذا طبيعي وصحيح؛ الخطأ هو استخدام div لكل شيء.

عناصر دلالية أخرى مفيدة

- <address>: معلومات التواصل لصاحب الصفحة أو المقال.

- <details> و <summary>: قسم قابل للطي بلا JavaScript (ممتاز للأسئلة الشائعة).

- <figure> و <figcaption>: محتوى مع تعليق.

<details>
    <summary>هل الدورات مجانية؟</summary>
    <p>نعم، كل الدروس مجانية مع نظام العملات.</p>
</details>

تمرين

خذ صفحة كتبتها سابقاً وأعد هيكلتها: header فيه شعار و nav، و main فيه section للتعريف و article لمنشور، و aside لروابط، و footer للحقوق. افتح أدوات المطور ← تبويب Accessibility وشاهد المناطق.

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>مدونة Kodax</title>
</head>
<body>
    <header>
        <h1>مدونة Kodax</h1>
        <nav>
            <ul>
                <li><a href="index.html">الرئيسية</a></li>
                <li><a href="about.html">من نحن</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <header>
                <h2>كيف تبدأ مع HTML</h2>
                <p>بقلم سارة — <time datetime="2026-03-15">15 مارس 2026</time></p>
            </header>
            <p>HTML هي الخطوة الأولى في تطوير الويب...</p>
            <section>
                <h3>الأدوات التي تحتاجها</h3>
                <p>محرر نصوص ومتصفح فقط.</p>
            </section>
        </article>

        <aside>
            <h2>اقرأ أيضاً</h2>
            <ul>
                <li><a href="css-intro.html">مقدمة في CSS</a></li>
            </ul>
        </aside>
    </main>

    <footer>
        <details>
            <summary>تواصل معنا</summary>
            <address><a href="mailto:hello@example.com">hello@example.com</a></address>
        </details>
        <p><small>&copy; 2026 Kodax</small></p>
    </footer>
</body>
</html>