HTML Academy · درس

header وnav وmain وfooter

هيكلة المعالم الأساسية للصفحة باستخدام الوسوم الدلالية

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

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

عناصر المعالم في HTML5

قدّم HTML5 عناصر المعالم التي تحدد مناطق الصفحة:

<header> — المحتوى التمهيدي أو التنقل
<nav> — روابط التنقل
<main> — المحتوى الأساسي الفريد
<footer> — معلومات التذييل

وتستبدل هذه العناصر عناصر <div> العامة ببنية ذات معنى.

العنصر header

يحتوي العنصر <header> على المحتوى التمهيدي:

<header>
  <a href="/" class="logo">
    <img src="logo.svg" alt="Company name">
  </a>
  <nav>...</nav>
  <button>Sign In</button>
</header>
<!-- header can appear multiple times: page header, article header -->
<!-- But only one page-level header per page is recommended -->

العنصر nav

يحيط العنصر <nav> بروابط التنقل:

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>
<!-- Use aria-label to distinguish multiple navs -->
<!-- Not every group of links is a nav — only major navigation -->

عناصر nav متعددة

يمكن أن تحتوي الصفحة على عدة عناصر <nav> — ضعوا تسمية لكل عنصر:

<nav aria-label="Main navigation">...</nav>
<nav aria-label="Breadcrumb">...</nav>
<nav aria-label="Footer links">...</nav>
<!-- aria-label tells screen reader users what each nav is for -->
<!-- Screen readers list landmarks — unique labels help navigation -->

العنصر main

يحدد العنصر <main> المحتوى الأساسي الفريد لهذه الصفحة:

<main id="main-content">
  <h1>HTML5 Landmark Elements</h1>
  <p>Learn about semantic page structure...</p>
</main>
<!-- Rules:
  - Only ONE main element per page
  - Should not be a descendant of header, footer, aside, nav
  - id="main-content" enables skip links -->
<!-- Assistive tech users jump directly to main -->

العنصر footer

يحيط العنصر <footer> بمعلومات التذييل:

<footer>
  <p>&copy; 2025 CoddyKit. All rights reserved.</p>
  <nav aria-label="Footer navigation">
    <a href="/privacy">Privacy Policy</a>
    <a href="/terms">Terms of Service</a>
  </nav>
</footer>
<!-- footer can appear multiple times: page footer, article footer -->
<!-- Page footer typically has copyright, links, contact -->

هيكل الصفحة

بنية دلالية كاملة للصفحة:

<body>
  <header>
    <a href="/"><img src="logo.svg" alt="Site name"></a>
    <nav aria-label="Main">...</nav>
  </header>

  <main id="main-content">
    <h1>Page Title</h1>
    <p>Primary content here.</p>
  </main>

  <aside>Related content</aside>

  <footer>
    <p>&copy; 2025 Company</p>
  </footer>
</body>

رابط تخطي التنقل

أضيفوا رابط تخطٍّ لمستخدمي لوحة المفاتيح لتجاوز التنقل:

<a href="#main-content" class="skip-link">Skip to main content</a>

<header>... navigation ...</header>

<main id="main-content" tabindex="-1">
  <h1>Page Heading</h1>
</main>

/* CSS: */
.skip-link {
  position: absolute; top: -100%;
  background: #0070f3; color: white; padding: 0.5rem;
}
.skip-link:focus { top: 0; }

أدوار المعالم

تتوافق عناصر المعالم في HTML5 مع أدوار معالم ARIA:

<header> → role="banner" على مستوى الصفحة فقط
<nav> → role="navigation"
<main> → role="main"
<footer> → role="contentinfo" على مستوى الصفحة فقط
<aside> → role="complementary"

header وfooter داخل الأقسام

يمكن أن يظهر header وfooter داخل <article> و<section>:

<article>
  <header>
    <h2>Article Title</h2>
    <p>By Jane Smith | March 2024</p>
  </header>
  <p>Article content...</p>
  <footer>
    <p>Tags: HTML, CSS</p>
  </footer>
</article>
<!-- In this context, header/footer are NOT banner/contentinfo roles -->
<!-- They are generic sections within the article -->

أخطاء شائعة

تجنبوا أخطاء المعالم الدلالية التالية:

استخدام <nav> لكل مجموعة من الروابط
استخدام عدة عناصر <main> في الصفحة نفسها
وضع <main> داخل <header> أو <nav>
استخدام <footer> لمحتوى ليس من محتوى التذييل

تحقق سريع

كم عنصر main ينبغي أن تحتوي عليه الصفحة؟

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

مراجعة: header وnav وmain وfooter

أساسيات عناصر المعالم:

<header> — محتوى تمهيدي؛ ويمكن تكراره لكل قسم
<nav> — تنقل رئيسي؛ ضعوا له aria-label إذا وُجد أكثر من عنصر
<main> — المحتوى الأساسي الفريد؛ عنصر واحد بالضبط لكل صفحة
<footer> — محتوى التذييل؛ ويمكن تكراره لكل قسم
أضيفوا رابط تخطٍّ يستهدف id="main-content"

البدء مجانًا

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

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

الدورات: 40
الدروس: 159

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

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

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

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

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

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

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

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

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

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

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

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

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

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