Semantic HTML – الوسوم الدلالية لكود احترافي

30:00 دقيقة مجاني
تعلمنا بالدرس السابق أهم الوسوم في لغة HTML مثل وسوم الفقرات p و وسوم الروابط a و وسوم الصور و وسوم القوائم ، وقلنا أن هذه الوسوم هي التي تخبر متصفح الانترنت ان هذه صورة أو هذه فقرة أو هذه قائمة أو هذا رابط الى آخره .. والآن سنبحر أكثر في وسوم HTML وسنستخدم وسوم أخرى مساعدة للوسوم السابقة مما يجعل موقعنا جميل ومنسق بشكل احترافي.

لماذا Semantic HTML؟ لأنه يجعل موقعك أفضل لمحركات البحث (SEO)، سهل الصيانة، ومتوافق مع دعم ذوي الاعاقة البصرية او الحركية!

بدلًا من استخدام <div> في كل مكان، استخدم وسوم تدل على المعنى… مثل <header> للرأس، <footer> للأسفل.

div ليس خطأ، لكنه عنصر عام. استخدمه عندما لا يوجد وسم دلالي مناسب، أو عند الحاجة لتجميع عناصر لأغراض CSS فقط.

اليوم سنحوّل موقعك البسيط إلى كود احترافي بـ ٦ وسوم فقط!

لماذا نستخدم Semantic HTML؟ (٥ فوائد سريعة)

🔍

تحسين محركات البحث (SEO) 🚀

محركات البحث (خاصة جوجل) لا "ترى" التصميم مثلنا، بل تقرأ الكود. العناصر الدلالية تعطي معنى واضح للمحتوى:

وسم nav يقول لجوجل "هنا القائمة الرئيسية للتنقل"

وسم article يقول "هذا مقال مستقل يمكن فهرسته لوحده"

و وسوم h1 وh2 .. الخ هذا تسلسل العناوين الهرمي يساعد جوجل يفهم هيكل الصفحة وأهمية كل جزء.

النتيجة: فهم أفضل للمحتوى و ترتيب أعلى في نتائج البحث .

♿

دعم ذوي الاعاقة البصرية و الحركية

قارئات الشاشات الخاصة بالمكفوفين (مثل NVDA، VoiceOver، JAWS) تعتمد بشكل كبير على العناصر الدلالية. مثال:

لو استخدمت للـ navigation التنقل وسم div، قارئ الشاشة لن يعرف إن هذا مكان التنقل الرئيسي.

لكن لو استخدمت وسم nav، القارئ يقول تلقائيًا: "Navigation landmark" أو "قائمة تنقل"، ويقدر المستخدم ينتقل لها بضغطة زر واحدة.

كذلك تلك الوسوم الدلالية تساعد ذوي الإعاقة البصرية والحركية يتنقلوا في الموقع بسهولة.

بدون semantic HTML، المكفوف ممكن يسمع 150 عنصر قبل ما يوصل للمحتوى الفعلي 😓.

🛠️

سهولة الصيانة و التطوير

الكود يصبح أنظف وأوضح:

بدلاً من:

<div class="header">...</div>
<div class="nav">...</div>
<div class="main-content">...</div>

تكتب:

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

أي مطور جديد يدخل على المشروع يفهم هيكل الصفحة فورًا بدون ما يقرأ الـ CSS.

أقل اعتماد على الكلاسات (less classitis).

لو غيرت التصميم بعد سنة، ما تحتاج تغير عشرات الكلاسات، لأن العنصر نفسه واضح دلاليًا.

🤖

فهم الآلات

اليوم (2025 وما بعد) مو بس جوجل اللي يقرأ موقعك، فيه مئات الآلات والـ AI تقرأه:

مساعدات الصوت (Siri، Google Assistant، Alexa، ChatGPT Voice، Gemini، إلخ)

نماذج الذكاء الاصطناعي الكبيرة (مثل ما يقرأون الـ HTML مباشرة ليفهموا المحتوى

Scrapers و bots اللي تجمع بيانات لتدريب الـ LLMs

أدوات الترجمة التلقائية، أدوات تلخيص، أدوات توليد الفيديو من المقالات، إلخ

لو كتبت كل الكود بوسوم div فقط ، الآلة تشوف صفحة فارغة من المعنى، مجرد صناديق.

أما لو استخدمت Semantic HTML، الآلة تفهم فورًا: وين موقع العنوان الرئيسي؟ داخل h1 وين المحتوى الرئيسي؟ داخل وسم main...

مثال حقيقي حدث بالفعل:

غالبا يساعد و يسهّل على محركات البحث والأنظمة الآلية فهم المحتوى

📱

“يساعد على تنظيم الصفحة”

“يسهّل الوصول (Accessibility)”

“يساعد المتصفح/القارئات تفهم البنية”

أهم ٦ وسوم دلالية (مع أمثلة عملية)

<header> – الرأس العلوي

وسم الرأس العلوي او header له وسم فتح ووسم اغلاق انظر الى الكود التالي لتعرف وسم الفتح ووسم الإغلاق. ومابينهما اي نص او اي كود تضعه يكون في الراس العلوي للصفحة

<header>
  <h1>موقعي الشخصي</h1>
</header>

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

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

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

للروابط الرئيسية مثل "الرئيسية، عني، تواصل".

افضل مكان نضع به قائمة التنقل هو وسم nav وله وسم فتح واغلاق كما تراه بالكود ادناه:

ايضا هذا الوسم nav نضعه داخل وسم header لاننا نريده في اعلى الصفحة.

<nav>
  <ul>
    <li><a href="/">الرئيسية</a></li>
    <li><a href="/about">عني</a></li>
  </ul>
</nav>

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

الجزء الأساسي من الصفحة، بدون الرأس أو التذييل. نقصد بالرأس header الجزء العلوي للصفحة مثلما هنا في منصة ابرمج الراس يحتوي على قائمة للتنقل بين صفحات الموقع و صورة شعار الموقع لوقو. بينما التذييل footer سنشرحه لاحقا وهو الجزء الذي في نهاية الصفحة. فهنا أي محتوى تريد بين رأس وتذييل الصفحة الافضل تضعه داخل وسم main.

<main>
  <h2>مقال اليوم</h2>
  <p>...</p>
</main>

<section> – قسم مستقل

لتقسيم المحتوى إلى أقسام، مثل "خدماتنا". يمكنك انشاء اكثر من قسم section في الصفحة.

<section>
  <h2>خدماتنا</h2>
  <p>...</p>
</section>

<article> – محتوى مستقل

للمقالات أو المنشورات التي يمكن قراءتها لوحدها.

<article>
  <h2>كيف تتعلم HTML؟</h2>
  <p>...</p>
</article>

<footer> – التذييل

لحقوق النشر، روابط، أو معلومات الاتصال. التذييل هو الجزء السفلي من الصفحة فهنا في منصة ابرمج تجد بعض الروابط مثل من نحن؟ و شروط الاستخدام و سياسة الاستخدام في منطقة footer.

<footer>
  <p>© ٢٠٢٥ موقعي. جميع الحقوق محفوظة.</p>
</footer>

تمرين اليوم: حوّل موقعك الشخصي إلى Semantic 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>موقعي الشخصي (Semantic)</title>
</head>
<body>
    <header>
        <h1>مرحبًا، أنا [اسمك]</h1>
    </header>

    <nav>
        <ul>
            <li><a href="#about">عني</a></li>
            <li><a href="#skills">مهاراتي</a></li>
        </ul>
    </nav>

    <main>
        <section id="about">
            <h2>نبذة عني</h2>
            <img src="https://picsum.photos/300/300" alt="صورتي">
            <p>أنا طالب/مبرمج...</p>
        </section>

        <article id="skills">
            <h2>مهاراتي</h2>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
            </ul>
        </article>
    </main>

    <footer>
        <p>تواصلوا معي: <a href="https://instagram.com/">إنستغرام</a></p>
        <p>© [عام]</p>
    </footer>
</body>
</html>
نتيجة الكود اعلاه

مهمتك الآن:

  1. انسخ الكود أعلاه
  2. غيّر المحتوى ليصبح عنك (أضف روابط، صور، إلخ)
  3. احفظ وافتح الملف…
  4. لاحظ الفرق: الكود أصبح أكثر تنظيمًا!
  5. نصيحة: استخدم id للروابط الداخلية مثل #about

خلاصة الدرس في ٦ كلمات:

header – nav – main – section – article – footer

استخدمها دائمًا… وستصبح مطورًا محترفًا في أيام!

الدرس القادم : الخصائص أو السمات في HTML

سنتعلم الخصائص أو السمات التي تستخدم داخل الوسوم!

الدرس التالي العودة للسابق