Frontend Academy · درس

الوسوم الدلالية: header وnav وmain وarticle وfooter

استبدل عناصر div عديمة المعنى بعناصر HTML5 دلالية، وافهم كيف تساعد المتصفحات ومحركات البحث وقارئات الشاشة.

الدرس 2 من 413 خطوة

الوسوم الدلالية: header وnav وmain وarticle وfooter درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ما المقصود بـ HTML الدلالي؟

يستخدم HTML الدلالي عناصر تصف معنى المحتوى، لا مظهره فحسب. يقول <article> إن «هذا جزء مستقل بذاته من المحتوى». أما <div> العام فلا يعبّر عن شيء.

قبل الدلالات: فوضى div

كان مطوّرو الويب في بداياته ينشئون التخطيطات بالكامل باستخدام عنصري <div> و<span>. ولم تكن قارئات الشاشة قادرة على التمييز بين التنقل والمحتوى والإعلانات. لذلك اضطرت محركات البحث إلى تخمين بنية الصفحة.

<!-- Old way -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="content">...</div>
<div class="footer">...</div>

<header> — عنوان الموقع أو القسم

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

<header>
  <a href="/"><img src="logo.svg" alt="CoddyKit"></a>
  <nav>...</nav>
</header>

<nav> — روابط التنقل

استخدم <nav> لتجميع مجموعات روابط التنقل، مثل القائمة الرئيسية أو مسار التنقل أو جدول المحتويات. تعلن قارئات الشاشة عن معالم nav، ما يتيح للمستخدمين الانتقال مباشرةً إليها أو تجاوزها.

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/courses">Courses</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

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

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

<main>
  <h1>Learn Frontend Development</h1>
  <p>Start your journey here...</p>
</main>

<article> — محتوى مستقل بذاته

يحيط <article> بمحتوى مفهوم بذاته ويمكن إعادة نشره، مثل تدوينة أو خبر أو تعليق مستخدم أو بطاقة منتج. اسأل نفسك: «هل سيظل هذا المحتوى مفهومًا إذا نسخته إلى موقع آخر؟»

<article>
  <h2>Introduction to CSS Grid</h2>
  <p>CSS Grid revolutionised web layout...</p>
  <time datetime="2025-01-15">January 15, 2025</time>
</article>

<section> — تجميع موضوعي

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

<section>
  <h2>Core Technologies</h2>
  <p>HTML, CSS, and JavaScript...</p>
</section>

<aside> — محتوى إضافي

يحتوي <aside> على محتوى مرتبط بشكل غير مباشر بالمحتوى المحيط، مثل الأشرطة الجانبية أو الاقتباسات البارزة أو الإعلانات أو الروابط ذات الصلة. تعرضه قارئات الشاشة كمعلم تكميلي.

<footer> — المحتوى الختامي

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

<footer>
  <p>&copy; 2025 CoddyKit. All rights reserved.</p>
  <nav aria-label="Footer">
    <a href="/privacy">Privacy</a>
    <a href="/terms">Terms</a>
  </nav>
</footer>

تسلسل العناوين: من h1 إلى h6

استخدم العناوين لإنشاء مخطط منطقي للمستند. يجب ألا يوجد سوى عنصر <h1> واحد في كل صفحة. استخدم h2 للعناوين الفرعية، وh3 للعناوين الفرعية المتفرعة، وهكذا. لا تتخطَّ المستويات، ولا تستخدم العناوين لمجرد حجمها المرئي.

أهمية الدلالات لتحسين SEO وإتاحة الوصول

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

اختبار سريع

أي عنصر ينبغي أن يحيط بالمحتوى الأساسي الفريد للصفحة، والذي يظهر مرة واحدة بالضبط؟

أجب عليها في الدرس التفاعلي

مراجعة: معالم HTML5 الدلالية

استخدم <header> و<nav> و<main> و<article> و<section> و<aside> و<footer> لمنح مستندك بنية تفهمها المتصفحات ومحركات البحث وقارئات الشاشة.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 41
الدروس: 163

ابدأ التعلم مجانًا عرض الدورة الكاملة

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

هل درس «الوسوم الدلالية: header وnav وmain وarticle وfooter» مجاني؟

نعم — نص درس «الوسوم الدلالية: header وnav وmain وarticle وfooter» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ماذا ستتعلم في «الوسوم الدلالية: header وnav وmain وarticle وfooter»؟

استبدل عناصر div عديمة المعنى بعناصر HTML5 دلالية، وافهم كيف تساعد المتصفحات ومحركات البحث وقارئات الشاشة. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟

لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «الوسوم الدلالية: header وnav وmain وarticle وfooter»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟

نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

بنية المستند: DOCTYPE وhtml وhead وbody
الوسوم الدلالية: header وnav وmain وarticle وfooter
النصوص والصور والروابط والقوائم
النماذج: input وlabel وbutton

← العودة إلى Frontend Academy