NahdaAI | نهضة — تعلّم البرمجة والذكاء الاصطناعي بالعربية

في المقال السابق، تعلمت النماذج والجداول. الآن سنتعلم **الوسوم الدلالية (Semantic Tags)** — وهي ما يجعل HTML **احترافياً** و **صديقاً لمحركات البحث**. في هذا الدليل العملي، سنأخذك خطوة بخطوة لفهم الوسوم الدلالية، مع تمارين وحلول. ## ما هي الوسوم الدلالية؟ **الوسوم الدلالية** هي وسوم HTML **تصف معنى المحتوى**، وليس **شكله** فقط. **مثال:** ```html  <div class="header"> <div class="nav">...</div> </div>  <header> <nav>...</nav> </header> ``` **الفرق:** - الأول: لا أحد يعرف ما هو `<div class="header">` (قد يكون رأس الصفحة، أو بطاقة، إلخ). - الثاني: `<header>` يُخبر المتصفح **بوضوح** أنه رأس الصفحة. ## لماذا الوسوم الدلالية؟ - **SEO:** محركات البحث تفهم المحتوى أفضل. - **إمكانية الوصول:** قارئات الشاشة تفهم البنية. - **الصيانة:** الكود أوضح للفريق. - **الأداء:** المتصفح يحسّن العرض. - **المعايير:** HTML5 يوصي بها. ## مقارنة: قبل وبعد ### قبل (غير دلالي): ```html <div id="header"> <div class="logo">شعاري</div> <div class="nav"> <a href="/">الرئيسية</a> <a href="/about">من نحن</a> </div> </div> <div id="content"> <div class="post"> <h2>عنوان المقال</h2> <p>محتوى المقال...</p> </div> </div> <div id="footer"> <p>© 2026</p> </div> ``` ### بعد (دلالي): ```html <header> <div class="logo">شعاري</div> <nav> <a href="/">الرئيسية</a> <a href="/about">من نحن</a> </nav> </header> <main> <article> <h2>عنوان المقال</h2> <p>محتوى المقال...</p> </article> </main> <footer> <p>© 2026</p> </footer> ``` **الفرق واضح:** الكود الثاني **يشرح نفسه**. ## الوسوم الدلالية الرئيسية ### 1. `<header>` — الرأس **يحتوي عادة على:** - الشعار (Logo). - شريط التنقل. - معلومات تمهيدية. ```html <header> <img src="logo.png" alt="شعاري"> <nav> <a href="/">الرئيسية</a> <a href="/about">من نحن</a> </nav> </header> ``` **ملاحظات:** - يمكن أن يكون **رأس الصفحة** كامل. - أو **رأس مقال** داخل `<article>`. ### 2. `<nav>` — شريط التنقل **يحتوي على:** - روابط التنقل الرئيسية. - قوائم. ```html <nav> <ul> <li><a href="/">الرئيسية</a></li> <li><a href="/articles">المقالات</a></li> <li><a href="/learn">تعلّم</a></li> <li><a href="/about">من نحن</a></li> </ul> </nav> ``` **⚠️ مهم:** ليس **كل** مجموعة روابط هي `<nav>`. فقط **التنقل الرئيسي**. ### 3. `<main>` — المحتوى الرئيسي **يحتوي على:** - المحتوى **الفريد** للصفحة. - **لا يتكرر** بين الصفحات. ```html <main> <h1>عنوان الصفحة</h1> <p>المحتوى الرئيسي...</p> </main> ``` **قواعد `<main>`:** - ✅ **مرة واحدة فقط** في الصفحة. - ❌ لا يحتوي على `<header>`, `<footer>`, `<nav>` (مكررة). - ✅ يحتوي على `<article>`, `<section>`, إلخ. ### 4. `<section>` — قسم **قسم منطقي** من الصفحة، عادة له **عنوان**. ```html <section> <h2>خدماتنا</h2> <p>نقدم خدمات...</p> </section> <section> <h2>من نحن</h2> <p>نحن فريق...</p> </section> ``` **متى تستخدم `<section>`؟** - عند وجود **قسم** له **عنوان** ومنطق خاص. - **بديل:** `<div>` إذا كان القسم **لأغراض التنسيق** فقط. ### 5. `<article>` — مقال **محتوى مستقل** يمكن نشره بذاته (مقال، تدوينة، تعليق). ```html <article> <header> <h2>عنوان المقال</h2> <p>بقلم أحمد — 2026-10-25</p> </header> <p>محتوى المقال...</p> <footer> <p>الوسوم: #HTML #CSS</p> </footer> </article> ``` **الفرق بين `<section>` و `<article>`:** <table> <thead> <tr> <th>المعيار</th> <th>section</th> <th>article</th> </tr> </thead> <tbody> <tr> <td><strong>الاستقلال</strong></td> <td>جزء من شيء أكبر</td> <td>مستقل بذاته</td> </tr> <tr> <td><strong>المثال</strong></td> <td>"قسم الخدمات"</td> <td>"مقال مدونة"</td> </tr> <tr> <td><strong>النشر</strong></td> <td>لا يُنشر وحده</td> <td>يمكن نشره وحده</td> </tr> </tbody> </table> ### 6. `<aside>` — محتوى جانبي **محتوى ثانوي** غير أساسي: - شريط جانبي. - إعلانات. - روابط ذات صلة. - معلومات إضافية. ```html <aside> <h3>مقالات ذات صلة</h3> <ul> <li><a href="/post1">مقال 1</a></li> <li><a href="/post2">مقال 2</a></li> </ul> </aside> ``` ### 7. `<footer>` — التذييل **يحتوي عادة على:** - حقوق النشر. - روابط التواصل. - معلومات الاتصال. ```html <footer> <p>© 2026 موقعي — جميع الحقوق محفوظة</p> <nav> <a href="/privacy">سياسة الخصوصية</a> <a href="/terms">الشروط</a> </nav> </footer> ``` ### 8. `<figure>` و `<figcaption>` لربط صورة/رسم بتعليق: ```html <figure> <img src="chart.jpg" alt="رسم بياني"> <figcaption>الشكل 1: المبيعات الشهرية</figcaption> </figure> ``` ### 9. `<time>` — التاريخ والوقت ```html <p>نُشر في <time datetime="2026-10-25">25 أكتوبر 2026</time></p> ``` **الفائدة:** محركات البحث تفهم التاريخ. ### 10. `<mark>` — التمييز ```html <p>هذا نص <mark>مميز بخلفية صفراء</mark>.</p> ``` ## بنية صفحة كاملة (دلالية) ```html <!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>مدونتي | NahdaAI</title> </head> <body>  <header> <img src="logo.png" alt="شعاري" width="100"> <nav> <ul> <li><a href="/">الرئيسية</a></li> <li><a href="/articles">المقالات</a></li> <li><a href="/about">من نحن</a></li> </ul> </nav> </header>  <main> <h1>آخر المقالات</h1> <article> <header> <h2>تعلم HTML في 30 يوماً</h2> <p> بقلم <strong>أحمد</strong> — <time datetime="2026-10-25">25 أكتوبر 2026</time> </p> </header> <p>HTML هي أساس كل موقع...</p> <footer> <p>الوسوم: <a href="/tag/html">#HTML</a> <a href="/tag/css">#CSS</a></p> </footer> </article> <article> <header> <h2>مقدمة في CSS</h2> <p> بقلم <strong>محمد</strong> — <time datetime="2026-10-24">24 أكتوبر 2026</time> </p> </header> <p>CSS هي لغة التنسيق...</p> </article> </main>  <aside> <h3>روابط سريعة</h3> <ul> <li><a href="/learn">مسارات التعلم</a></li> <li><a href="/free">الموارد المجانية</a></li> </ul> </aside>  <footer> <p>© 2026 NahdaAI — جميع الحقوق محفوظة</p> <nav> <a href="/privacy">سياسة الخصوصية</a> <a href="/contact">اتصل بنا</a> </nav> </footer> </body> </html> ``` ## جدول الوسوم الدلالية <table> <thead> <tr> <th>الوسم</th> <th>الوظيفة</th> <th>يحتوي على</th> </tr> </thead> <tbody> <tr> <td><code><header></code></td> <td>رأس الصفحة/القسم</td> <td>شعار، nav، عنوان</td> </tr> <tr> <td><code><nav></code></td> <td>شريط التنقل</td> <td>روابط رئيسية</td> </tr> <tr> <td><code><main></code></td> <td>المحتوى الرئيسي</td> <td>المقالات، الأقسام</td> </tr> <tr> <td><code><section></code></td> <td>قسم</td> <td>عنوان + محتوى</td> </tr> <tr> <td><code><article></code></td> <td>مقال مستقل</td> <td>عنوان، محتوى، تذييل</td> </tr> <tr> <td><code><aside></code></td> <td>محتوى جانبي</td> <td>روابط، إعلانات</td> </tr> <tr> <td><code><footer></code></td> <td>التذييل</td> <td>حقوق، روابط</td> </tr> <tr> <td><code><figure></code></td> <td>صورة + تعليق</td> <td>img + figcaption</td> </tr> <tr> <td><code><time></code></td> <td>تاريخ/وقت</td> <td>نص التاريخ</td> </tr> <tr> <td><code><mark></code></td> <td>تمييز</td> <td>نص</td> </tr> </tbody> </table> ## أمثلة عملية ### 1. صفحة مدونة ```html <header> <h1>مدونتي</h1> <nav> <a href="/">الرئيسية</a> <a href="/articles">المقالات</a> </nav> </header> <main> <article> <header> <h2>تعلم HTML</h2> <time datetime="2026-10-25">25 أكتوبر 2026</time> </header> <p>محتوى المقال...</p> </article> </main> <footer> <p>© 2026</p> </footer> ``` ### 2. صفحة منتج ```html <header> <h1>متجري</h1> <nav> <a href="/">الرئيسية</a> <a href="/cart">السلة</a> </nav> </header> <main> <article> <header> <h2>لابتوب Dell XPS 15</h2> <p>السعر: 5500 $</p> </header> <figure> <img src="laptop.jpg" alt="لابتوب Dell XPS 15"> <figcaption>لابتوب احترافي</figcaption> </figure> <section> <h3>المواصفات</h3> <ul> <li>معالج i7</li> <li>16GB RAM</li> <li>512GB SSD</li> </ul> </section> <footer> <button>أضف للسلة</button> </footer> </article> </main> <footer> <p>© 2026 متجري</p> </footer> ``` ### 3. صفحة رئيسية ```html <header> <nav> <a href="/">الرئيسية</a> <a href="/about">من نحن</a> </nav> </header> <main> <section> <h1>مرحباً بك</h1> <p>هذا موقعي الشخصي.</p> </section> <section> <h2>خدماتنا</h2> <article> <h3>تصميم مواقع</h3> <p>نصمم مواقع احترافية...</p> </article> <article> <h3>تطوير تطبيقات</h3> <p>نطور تطبيقات ويب...</p> </article> </section> <section> <h2>آخر المقالات</h2> <article> <h3>مقال 1</h3> <p>...</p> </article> </section> </main> <aside> <h3>روابط سريعة</h3> <ul> <li><a href="/learn">تعلّم</a></li> </ul> </aside> <footer> <p>© 2026</p> </footer> ``` ## تمارين عملية ### تمرين 1: بنية صفحة أنشئ بنية صفحة بـ header, main, footer. **الحل:** ```html <header> <h1>موقعي</h1> </header> <main> <p>محتوى الصفحة</p> </main> <footer> <p>© 2026</p> </footer> ``` ### تمرين 2: nav أنشئ شريط تنقل بـ 4 روابط. **الحل:** ```html <nav> <ul> <li><a href="/">الرئيسية</a></li> <li><a href="/about">من نحن</a></li> <li><a href="/services">خدماتنا</a></li> <li><a href="/contact">اتصل بنا</a></li> </ul> </nav> ``` ### تمرين 3: article أنشئ مقالاً بدلالة كاملة. **الحل:** ```html <article> <header> <h2>تعلم HTML</h2> <time datetime="2026-10-25">25 أكتوبر 2026</time> </header> <p>محتوى المقال...</p> <footer> <p>الوسوم: #HTML</p> </footer> </article> ``` ### تمرين 4: section أنشئ صفحة بأقسام متعددة. **الحل:** ```html <main> <section> <h2>من نحن</h2> <p>نحن فريق...</p> </section> <section> <h2>خدماتنا</h2> <p>نقدم...</p> </section> <section> <h2>اتصل بنا</h2> <p>راسلنا...</p> </section> </main> ``` ### تمرين 5: figure أضف صورة بتعليق. **الحل:** ```html <figure> <img src="photo.jpg" alt="صورة"> <figcaption>الشكل 1: صورة توضيحية</figcaption> </figure> ``` ### تمرين 6: aside أضف شريطاً جانبياً. **الحل:** ```html <aside> <h3>مقالات ذات صلة</h3> <ul> <li><a href="/post1">مقال 1</a></li> <li><a href="/post2">مقال 2</a></li> <li><a href="/post3">مقال 3</a></li> </ul> </aside> ``` ### تمرين 7: time أضف تاريخ نشر لمقال. **الحل:** ```html <article> <h2>مقالي</h2> <p>نُشر في <time datetime="2026-10-25">25 أكتوبر 2026</time></p> </article> ``` ### تمرين 8: صفحة كاملة أنشئ صفحة كاملة بكل الوسوم الدلالية. **الحل:** ```html <header> <h1>مدونتي</h1> <nav> <a href="/">الرئيسية</a> <a href="/about">من نحن</a> </nav> </header> <main> <article> <header> <h2>مقالي الأول</h2> <time datetime="2026-10-25">25 أكتوبر 2026</time> </header> <p>محتوى المقال...</p> </article> </main> <aside> <h3>روابط</h3> <ul><li><a href="/">رابط</a></li></ul> </aside> <footer> <p>© 2026</p> </footer> ``` ## حل المشاكل الشائعة ### 🔴 المشكلة 1: `<main>` أكثر من مرة **السبب:** استخدام `<main>` عدة مرات. **الحل:** `<main>` **مرة واحدة فقط** في الصفحة. ### 🔴 المشكلة 2: `<article>` داخل `<article>` **السبب:** تداخل غير ضروري. **الحل:** استخدم `<section>` للتداخل الداخلي. ### 🔴 المشكلة 3: `<nav>` لكل روابط **السبب:** استخدام `<nav>` لكل مجموعة روابط. **الحل:** `<nav>` فقط **للتنقل الرئيسي**. ### 🔴 المشكلة 4: `<header>` متعدد **السبب:** استخدام `<header>` لكل قسم. **الحل:** `<header>` يمكن استخدامه **مرة للصفحة** + مرة لكل `<article>`. ### 🔴 المشكلة 5: عدم استخدام `<main>` **السبب:** نسيان الوسم. **الحل:** كل صفحة يجب أن تحتوي على `<main>` واحد. ## جدول: قبل وبعد <table> <thead> <tr> <th>الوسم الدلالي</th> <th>البديل غير الدلالي</th> </tr> </thead> <tbody> <tr> <td><code><header></code></td> <td><code><div class="header"></code></td> </tr> <tr> <td><code><nav></code></td> <td><code><div class="nav"></code></td> </tr> <tr> <td><code><main></code></td> <td><code><div id="content"></code></td> </tr> <tr> <td><code><section></code></td> <td><code><div class="section"></code></td> </tr> <tr> <td><code><article></code></td> <td><code><div class="post"></code></td> </tr> <tr> <td><code><aside></code></td> <td><code><div class="sidebar"></code></td> </tr> <tr> <td><code><footer></code></td> <td><code><div class="footer"></code></td> </tr> </tbody> </table> ## قائمة تحقق نهائية <table> <thead> <tr> <th>المهمة</th> <th>الحالة</th> </tr> </thead> <tbody> <tr> <td>فهم الوسوم الدلالية</td> <td>⬜</td> </tr> <tr> <td>استخدام header, nav, main, footer</td> <td>⬜</td> </tr> <tr> <td>استخدام section و article</td> <td>⬜</td> </tr> <tr> <td>استخدام aside</td> <td>⬜</td> </tr> <tr> <td>استخدام figure و figcaption</td> <td>⬜</td> </tr> <tr> <td>بناء صفحة دلالية كاملة</td> <td>⬜</td> </tr> <tr> <td>حل التمارين الثمانية</td> <td>⬜</td> </tr> </tbody> </table> ## ماذا بعد هذا المقال؟ 🎉 **مبروك! أكملت قسم HTML!** الآن أنت جاهز للانتقال إلى **CSS**: 1. **مقدمة في CSS** — المحددات والخصائص. 2. **الألوان و Box Model** — التصميم الأساسي. 3. **Flexbox و Grid** — التخطيط الحديث. ## الخلاصة في هذا المقال، تعلمت: - ✅ ما هي الوسوم الدلالية ولماذا نحتاجها. - ✅ `<header>`, `<nav>`, `<main>`, `<footer>`. - ✅ `<section>` و `<article>`. - ✅ `<aside>` و `<figure>`. - ✅ `<time>` و `<mark>`. - ✅ بنية صفحة دلالية كاملة. - ✅ حل 8 تمارين عملية. **تذكر:** الوسوم الدلالية تجعل موقعك **احترافياً** و **صديقاً لمحركات البحث**.

الوسوم الدلالية في HTML — دليل شامل Semantic HTML 2026