الوسوم الدلالية ووسوم الـ HTML غير الدلالية

بعد أن رأينا في الجزء السابق كيف يمكن إستخدام الميتا (Metadata) في HTML. دلوقتي جه الوقت عشان نتكلم عن الوسوم الدلالية والفرق بينها وبين الوسوم غير الدلالية.

الوسوم في HTML تنقسم الي نوعين أساسيتين:

• وسوم دلالية (Semantic Elements).
• وسوم غير دلالية (Non Semantic Elements).

الفرق بين الوسوم الدلالية وغير الدلالية

#

العناصر الدلالية في HTML هي ببساطة عناصر ليها معنى واضح بيشرح دورها أو نوع المحتوى اللي جواها. سواء للمتصفح أو للمبرمج اللي بيقرأ الكود.

يعني لما تشوف وسم زي <header> أو <footer>، على طول بتفهم إن ده رأس الصفحة أو ذيلها، من غير ما تبص حتى على التفاصيل اللي جواه.

أمثلة على العناصر الدلالية:

• <article>: بيمثل مقالة أو موضوع مستقل.
• <nav>: بيحتوي على روابط التنقل في الموقع.
• <section>: جزء محدد من الصفحة بيجمع محتوى له نفس الفكرة.
• <header> و <footer>: الرأس والتذييل للصفحة أو القسم.
• <figure> و <figcaption>: لعرض الصور أو الرسومات مع شرحها.
• <main>: بيمثل المحتوى الأساسي في الصفحة.

استخدام العناصر دي بيخلي الكود أنضف وأسهل في القراءة، وكمان بيساعد محركات البحث وأدوات المساعدة (زي قارئات الشاشة) تفهم محتوى الصفحة بشكل أدق.

باختصار، العناصر الدلالية بتخلي صفحتك منظمة، مفهومة، وسهلة الصيانة سواء للبشر أو للمتصفحات

استخدامات الوسوم غير الدلالية (Non Semantic Elements)

#

ممكن برده يطلف عليها وسوم المحتوي والعرض. الوسوم دي بتُستخدم عشان تنظّم وتنسّق محتوى الصفحة.

هي مش بتضيف معنى للمحتوى، لكنها بتساعدك في ترتيب العناصر وتطبيق تنسيقات CSS عليهم بسهولة.

وسم <div> – حاوية عامة (Container Element)

#

الوسم <div> هو أكتر وسم استخدامًا في HTML، وبيُستخدم كـ حاوية عامة لتجميع مجموعة عناصر مع بعض، عشان تنسّقها أو تتحكم في شكلها باستخدام CSS أو JavaScript.

مثال:

<div class="card">
  <h2>عنوان المقال</h2>
  <p>ده نص داخل الحاوية.</p>
</div>

ملحوظة:
هنعرف بعدين الفرق بين Block Elements vs Inline Elements.
الـ <div> عنصر كتلي (block) يعني بيبدأ سطر جديد تلقائيًا.

وسم <span> – حاوية داخلية للنصوص (Inline Container)

#

الوسم <span> بيُستخدم عشان تنسّق جزء صغير من النص أو عنصر معين داخل سطر، من غير ما يعمل فاصل جديد.

مثال:

<p>هذا نص <span style="color: red;">باللون الأحمر</span>.</p>

الفرق الأساسي:

• <div> → بيستخدم لتجميع أقسام أو عناصر كبيرة.
• <span> → بيستخدم لتنسيق أجزاء صغيرة من النص.

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

مثال:

<div class="header">رأس الصفحة</div>
<div class="content">المحتوى</div>
<div class="footer">تذييل الصفحة</div>

باختصار:
<div> و<span> هما أساس أي تصميم في HTML، واللي بيديهم الحياة هو CSS اللي بيحوّلهم لتصميم متكامل ومنسق.

استخدامات الوسوم الدلالية (Semantic Elements)

#

زي ما شوفنا لأمثلة علي العناصر الدلالية في HTML. جه الوقت عشان نشوف أستخدامات كل وسم من تلك الوسوم.

1. وسم <header> – رأس الصفحة أو القسم

#

الوسم <header> بنستخدمه عشان نعمل الجزء العلوي أو مقدمة الصفحة، اللي عادة بيحتوي على الحاجات اللي بتقدّم محتوى الموقع أو بتسهل التنقل فيه.

جوه <header> ممكن نحط عناصر زي:

• العنوان الرئيسي للصفحة أو الموقع (زي <h1> أو <h2>).
• اللوجو (Logo) أو الأيقونة الخاصة بالموقع.
• روابط التنقل (Navigation links) اللي بتودّي المستخدم لأجزاء مختلفة من الموقع.
• أو حتى معلومات عن الكاتب أو المحتوى.

مثال بسيط:

<header>
  <h1>CodeZelo عنوان</h1>
  <img src="CodeZelo-logo.png" alt="CodeZelo شعار">
  <nav>
    <a href="#about">عنّي</a>
    <a href="#projects">المشاريع</a>
    <a href="#contact">تواصل</a>
  </nav>
</header>

ممكن تستخدم أكتر من <header> في نفس الصفحة — مثلاً واحد في بداية الصفحة الرئيسية، وواحد تاني جوه مقالة أو قسم معين.

باختصار، <header> هو واجهة البداية لأي صفحة أو جزء منها، وبيساعد المستخدم يفهم بسرعة هو فين وازاي يتنقل جوه الموقع.

2. وسم <nav> – قائمة التنقل

#

الوسم <nav> بنستخدمه في HTML عشان نحدد منطقة خاصة بروابط التنقل (Navigation) في الصفحة.

يعني ببساطة، ده الجزء اللي بيساعد المستخدم يتحرك بين الصفحات أو الأقسام المختلفة في الموقع. زي الشريط العلوي اللي انت شايفه في موقع CodeZelo.

جوه <nav> ممكن نحط روابط بتودّي المستخدم لأماكن زي: الصفحة الرئيسية، “من نحن”، “الخدمات”، “اتصل بنا”… وهكذا.

مثال بسيط:

<nav>
  <a href="index.html">الرئيسية</a>
  <a href="about.html">من نحن</a>
  <a href="services.html">الخدمات</a>
  <a href="contact.html">اتصل بنا</a>
</nav>

الميزة كمان إن المتصفحات وبرامج قراءة الشاشة (المستخدمة من ذوي الهمم) بتقدر تتعرف على <nav> وتتعامل معاه بذكاء، وده بيساعد في تحسين تجربة المستخدم وسهولة الوصول (Accessibility).

باختصار، <nav> هو المكان اللي بيجمع روابط التنقل الأساسية في موقعك، وبيخلي الكود منظم وسهل الفهم سواء للمتصفح أو للمبرمج

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

#

الوسم <main> بنستخدمه عشان نحدد المحتوى الأساسي في صفحة الويب — يعني الجزء اللي فعلاً الزائر جاي عشانه.

المحتوى اللي جوا <main> بيكون فريد ومميز للصفحة دي، ومينفعش يحتوي على عناصر متكررة بتتكرر في كل الصفحات زي الشريط الجانبي (sidebar)، أو روابط التنقل (navigation)، أو اللوجو، أو حقوق النشر.

مثال بسيط:

<main>
  <h1>أهلاً بيك في مدونتي</h1>
  <p>في المقالة دي هنتكلم عن أساسيات HTML للمبتدئين.</p>
</main>

نصائح مهمة:

• مينفعش يكون في أكتر من <main> واحد في الصفحة.
• ومينفعش تحط <main> جوا عناصر زي <header> أو <footer> أو <nav> أو <article>.

باختصار، <main> هو قلب الصفحة — المكان اللي بيجمع المحتوى الأساسي اللي المستخدم داخل علشانه، وبيساعد محركات البحث وبرامج قراءة الشاشة تفهم بسرعة فين المحتوى المهم في الصفحة.

4. وسم <section> – قسم فرعي داخل الصفحة

#

الوسم <section> بنستخدمه في HTML عشان نعمل قسم (جزء) داخل الصفحة بيجمع مجموعة عناصر ليها علاقة ببعض.

يعني لو عندك صفحة طويلة فيها مواضيع مختلفة، تقدر تقسّمها لأقسام باستخدام <section> عشان الكود يكون منظم وواضح.

كل <section> عادة بيحتوي على عنوان (زي <h2> أو <h3>) ومعاه محتوى متعلق بنفس الفكرة.

مثال بسيط:

<section>
  <h2>عن الموقع</h2>
  <p>الموقع ده معمول عشان يساعد المبتدئين يتعلموا HTML بطريقة سهلة وبسيطة.</p>
</section>

<section>
  <h2>خدماتنا</h2>
  <p>نقدم دروس وأمثلة عملية في تصميم وتطوير الويب.</p>
</section>

ملاحظات مهمة:

• وسم <section> بيعتبر عنصر دلالي (Semantic)، يعني بيوضح الغرض من الجزء ده للمتصفح ومحركات البحث.
• بيساعد في تنظيم المحتوى بشكل منطقي، وبيخلي الكود أسهل في القراءة والصيانة.

باختصار، <section> هو وسم لتقسيم الصفحة لأجزاء مترابطة، كل جزء منهم له فكرة أو موضوع واضح.

5. وسم <article> – مقالة أو محتوى مستقل

#

الوسم <article> بنستخدمه عشان نحدد محتوى مستقل بذاته، يعني جزء من الصفحة يقدر يعيش لوحده وميفقدش معناه حتى لو اتعرض بعيد عن باقي الصفحة.

المحتوى اللي بيتحط جوا <article> بيكون عادة حاجة زي:

• مقالة في مدونة.
• خبر أو تقرير صحفي.
• مشاركة في منتدى.
• أو حتى تعليق أو منشور منفصل.

مثال بسيط:

<article>
  <h2>أهمية تعلم HTML</h2>
  <p>HTML هي الخطوة الأولى لأي شخص عايز يدخل عالم تطوير الويب. من غيرها، مفيش موقع ممكن يشتغل صح.</p>
</article>

باختصار، <article> هو الوسم اللي بنستخدمه لأي محتوى مستقل ومتكامل داخل الصفحة، زي مقال أو خبر، بحيث يقدر يتعرض لوحده من غير ما يفقد معناه.

6. وسم <aside> – محتوى جانبي

#

الوسم <aside> بنستخدمه عشان نضيف محتوى جانبي أو معلومة إضافية مرتبطة بالمحتوى الأساسي، لكن مش جزء مباشر منه.

المكان الشائع لاستخدام <aside> بيكون كـ شريط جانبي (Sidebar) في الصفحة، زي ما بنشوف في المدونات أو المواقع الإخبارية.

مثال بسيط:

<article>
  <h2>تعلم HTML خطوة بخطوة</h2>
  <p>HTML هي الأساس في بناء أي موقع ويب...</p>

  <aside>
    <h3>نصيحة سريعة</h3>
    <p>ابدأ دائمًا بكتابة وسم <!DOCTYPE html> في أول الصفحة.</p>
  </aside>
</article>

ملاحظات مهمة:

• المحتوى اللي جوه <aside> بيكون مرتبط بشكل غير مباشر بالمحتوى الرئيسي.
• مش بيظهر بشكل مختلف في المتصفح لوحده، لكن تقدر تنسقه باستخدام CSS عشان يظهر كعمود جانبي أو مربع منفصل.

باختصار، <aside> هو المكان المثالي لأي معلومات إضافية أو ملاحظات جانبية بتدعم المحتوى الأساسي من غير ما تكون جزء منه مباشرة.

7. وسم <footer> – تذييل الصفحة

#

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

المحتوى اللي بيتحط جوه <footer> ممكن يشمل:

• معلومات عن الكاتب أو حقوق النشر.
• وسائل التواصل أو روابط الاتصال.
• روابط سريعة (زي “العودة للأعلى” أو “سياسة الخصوصية”).
• خريطة الموقع أو روابط لمستندات مرتبطة.

وممكن تستخدم أكتر من <footer> في نفس الصفحة —
يعني ممكن يكون فيه واحد في نهاية الصفحة كلها، وواحد تاني جوه مقالة أو قسم محدد.

مثال بسيط:

<footer>
  <p>© 2025 جميع الحقوق محفوظة - موقع تعلم HTML</p>
  <a href="#top">العودة للأعلى ↑</a>
</footer>

باختصار، <footer> هو المكان اللي بتحط فيه الخاتمة أو المعلومات الأخيرة الخاصة بالصفحة أو بالقسم اللي هو جواه.

الخلاصة

#

بعد ما شوفنا الفروقات بين الوسوم الدلالية والوسوم غير الدلالية ممكن تسأل نفسك سؤال. هل أعتمد علي نوع واحد فقط ومش مهم افهم النوع التاني؟ أكيد الإجابة هتكون لا، الوسوم ده معموله عشان تكمل بعض مش عشان كل نوع يقضي علي النوع التاني.

وبالتالي وأنت شغال علي مشاريع برمجية عملية هتلاقي نفسك بتستخدم النوعين بشكل مميز ومع الخبرة والممارسة وإتباع الطرق الصحيحة لأستخدام أكواد HTML هتعرف إمتي تستخدم الوسوم الدلالية وإمتي تستخدم الوسوم العادية.

في الدرس القادم هنتكلم عن عناصر المحتوى (Content & Text Elements). و ازاي نتحكم في شكل النصوص بإستخدام وسوم HTML.