شرح HTML الدلالي (Semantic HTML) بالعربي — الوسوم الذكية

السابق التالي

تخيّل أن كتاباً ليس به فهرس ولا عناوين ولا فصول — مجرد كتل نص. هذا ما يراه جوجل حين يجد صفحة مبنية بـ <div> فقط بدون عناصر دلالية. العناصر الدلالية تُخبر المتصفح وجوجل وقارئات الشاشة: "هذا هو رأس الصفحة"، "هذا هو المحتوى الرئيسي"، "هذه هي قائمة التنقل".

ما هو العنصر الدلالي؟

العنصر الدلالي هو وسم له معنى محدد يصف محتواه — ليس فقط كيف يبدو بصرياً، بل ما هو هذا المحتوى.

النوع	أمثلة	هل يصف المحتوى؟
غير دلالي	`<div>`, `<span>`	❌ لا — مجرد حاويات فارغة المعنى
دلالي	`<header>`, `<nav>`, `<article>`	✅ نعم — يصف وظيفة المحتوى بوضوح

العناصر الدلالية الرئيسية في HTML5

`<header>` — رأس الصفحة أو القسم

يحتوي عادةً على الشعار، العنوان الرئيسي، وقائمة التنقل. يمكن أن يظهر مرة واحدة كرأس للصفحة كاملة، أو داخل كل <article> أو <section>.

<header>
    <img src="/logo.png" alt="شعار DevArabi">
    <h1>DevArabi — تعلم البرمجة بالعربي</h1>
    <nav>...</nav>
</header>

`<nav>` — قائمة التنقل

يحتوي على الروابط الرئيسية للتنقل في الموقع. جوجل يعرف تلقائياً أن هذا القسم يحتوي روابط تنقل — مما يساعد في فهم هيكل الموقع.

<nav>
    <ul>
        <li><a href="/">الرئيسية</a></li>
        <li><a href="/courses">الدورات</a></li>
        <li><a href="/contact">تواصل معنا</a></li>
    </ul>
</nav>

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

يحتوي على المحتوى الفريد والأساسي للصفحة. يجب أن يكون هناك واحد فقط لكل صفحة — مثل <h1> تماماً. المحتوى المكرر (Header, Footer, Sidebar...) لا يذهب هنا.

<main>
    <h1>تعلم HTML من الصفر — الدرس الأول</h1>
    <p>محتوى الدرس الفريد لهذه الصفحة...</p>
</main>

`<section>` — قسم موضوعي

يجمع محتوى يرتبط بموضوع مشترك داخل الصفحة. كل <section> يجب أن يكون له دلالياً عنوان (<h2> أو <h3>).

<section>
    <h2>أحدث الدروس</h2>
    <p>قائمة بأحدث الدروس المضافة هذا الأسبوع...</p>
</section>

<section>
    <h2>الدروس الأكثر مشاهدة</h2>
    <p>قائمة الدروس الأكثر شعبية في DevArabi...</p>
</section>

`<article>` — محتوى مستقل قابل للنشر

يستخدم لمحتوى مستقل قائم بذاته — يمكن فهمه وقراءته بمعزل عن بقية الصفحة. مثال: مقال مدونة، بطاقة منتج، تعليق، بوست شبكات اجتماعية.

<article>
    <header>
        <h2>كيف تتعلم HTML في أسبوع؟</h2>
        <p>نُشر بتاريخ: 22 فبراير 2025 — بقلم: فريق DevArabi</p>
    </header>
    <p>متن المقال...</p>
    <footer>
        <p>عدد التعليقات: 15 <a href="#comments">اقرأ التعليقات</a></p>
    </footer>
</article>

`<aside>` — محتوى جانبي

محتوى مرتبط بالموضوع الرئيسي لكن ليس أساسياً فيه. مثال: صندوق "مقالات ذات صلة"، إعلان، ملاحظة جانبية، معلومة إضافية.

<aside>
    <h3>مقالات ذات صلة</h3>
    <ul>
        <li><a href="css-intro.php">مقدمة CSS</a></li>
        <li><a href="js-intro.php">مقدمة JavaScript</a></li>
    </ul>
</aside>

`<footer>` — تذييل الصفحة أو القسم

يحتوي عادةً على حقوق النشر، روابط التواصل الاجتماعي، خريطة الموقع، سياسة الخصوصية. يمكن أن يكون تذييلاً للصفحة كاملة أو لكل <article>.

<footer>
    <p>جميع الحقوق محفوظة © 2025 DevArabi</p>
    <a href="/privacy">سياسة الخصوصية</a>
    <a href="/contact">اتصل بنا</a>
</footer>

جدول مرجعي — كل العناصر الدلالية

الوسم	وظيفته	كم مرة في الصفحة؟
`<header>`	رأس الصفحة أو القسم	مرة أو أكثر
`<nav>`	روابط التنقل الرئيسية	مرة أو مرتين
`<main>`	المحتوى الرئيسي الفريد للصفحة	مرة واحدة فقط
`<section>`	قسم موضوعي مترابط	عدة مرات حسب الحاجة
`<article>`	محتوى مستقل قابل للنشر	عدة مرات (مقالات، بطاقات...)
`<aside>`	محتوى جانبي مرتبط	مرة أو أكثر
`<footer>`	تذييل الصفحة أو القسم	مرة أو أكثر

مثال عملي كامل — هيكل صفحة مدونة

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>مدونة DevArabi</title>
</head>
<body>

    <!-- رأس الصفحة -->
    <header>
        <img src="/logo.png" alt="DevArabi">
        <nav>
            <ul>
                <li><a href="/">الرئيسية</a></li>
                <li><a href="/courses">الدورات</a></li>
            </ul>
        </nav>
    </header>

    <!-- المحتوى الرئيسي -->
    <main>

        <!-- قسم المقالات -->
        <section>
            <h2>أحدث المقالات</h2>

            <!-- مقال مستقل -->
            <article>
                <h3>كيف تتعلم HTML بسرعة؟</h3>
                <p>متن المقال الأول...</p>
            </article>

            <article>
                <h3>أفضل أدوات تطوير الويب 2025</h3>
                <p>متن المقال الثاني...</p>
            </article>
        </section>

    </main>

    <!-- الشريط الجانبي -->
    <aside>
        <h3>مقالات مقترحة</h3>
        <ul>
            <li><a href="#">تعلم CSS</a></li>
        </ul>
    </aside>

    <!-- تذييل الصفحة -->
    <footer>
        <p>© 2025 DevArabi — جميع الحقوق محفوظة</p>
    </footer>

</body>
</html>

لماذا تستخدم HTML الدلالي؟ — ثلاثة أسباب

SEO وجوجل: جوجل يفهم هيكل صفحتك بشكل أفضل ويُعطي وزناً أكبر للمحتوى داخل العناصر الدلالية المناسبة. صفحة بـ <article> و<nav> تُفهرَس بشكل أفضل من صفحة كلها <div>.
إمكانية الوصول (Accessibility): المكفوفون يستخدمون قارئات الشاشة للتنقل بين <nav> و<main> و<article> بضغطة واحدة. بدون عناصر دلالية، يضطرون لقراءة الصفحة بالكامل خطياً.
قابلية صيانة الكود: مطور آخر يقرأ <footer> يفهم فوراً أنه في تذييل الصفحة. بينما <div id="footer"> تحتاج قراءة CSS لفهم سياقها.

الأسئلة الشائعة — FAQ

هل العناصر الدلالية تُغيّر شكل الصفحة؟

لا. <header> و<section> و<article> كلها عناصر Block مثل <div> تماماً — لا يوجد فرق بصري افتراضي. الفرق كله في المعنى الدلالي والفائدة لـ SEO وإمكانية الوصول.

متى أستخدم <section> ومتى <article>؟

إذا كان المحتوى يمكن نشره بمفرده وله معنى مستقل خارج سياق الصفحة (مقال، بطاقة منتج، تعليق) → <article>. إذا كان المحتوى مجرد قسم موضوعي من الصفحة ولا معنى له خارجها → <section>.

هل يمكن وضع <header> داخل <article>؟

نعم! كل من <header> و<footer> يمكن استخدامهما داخل <article> للإشارة إلى رأس وتذييل ذلك المقال تحديداً. الصفحة يمكن أن تحتوي عدة <header> بشرط أن كل واحد في سياقه الصحيح.

ممتاز! أتقنت الآن HTML الدلالي وستبني صفحات يفهمها جوجل والمستخدمون على حد سواء. في الدرس القادم سنتعلم تخطيط الصفحة (Layout) — كيف تضع كل هذه العناصر في مكانها الصحيح.

السابق التالي

DevArabi

دورة تعلم HTML

شرح HTML الدلالي (Semantic HTML) بالعربي — الوسوم الذكية

ما هو العنصر الدلالي؟

العناصر الدلالية الرئيسية في HTML5

<header> — رأس الصفحة أو القسم

<nav> — قائمة التنقل

<main> — المحتوى الرئيسي

<section> — قسم موضوعي

<article> — محتوى مستقل قابل للنشر

<aside> — محتوى جانبي

<footer> — تذييل الصفحة أو القسم