وثائق HTML قابلة للتشغيل: وسم footer

Q: كيف أُبقي التذييل في أسفل الصفحة؟

اجعل body عمود flex بارتفاع النافذة على الأقل (display: flex; flex-direction: column; min-height: 100vh;) وأعطِ القيمة flex: 1. عندها تتمدد المنطقة الرئيسية لتملأ المساحة الفارغة وتدفع التذييل إلى الأسفل في الصفحات القصيرة.

Q: كيف أكتب رمز حقوق النشر في HTML؟

استخدم الكيان © الذي يعرض ©. ويمكنك أيضًا كتابة المحرف مباشرة حين تستخدم الصفحة . وإحاطة السطر بـ تحدده كنص بخط صغير (small print).

Q: هل يمكن أن يكون في الصفحة أكثر من footer؟

نعم. يمكن لكل أو أن يملك تذييلًا خاصًا لبيانات الكاتب أو الوسوم. وحده التذييل غير الموجود داخل article أو aside أو main أو nav أو section يُعد معلم contentinfo للصفحة لدى قارئات الشاشة.

وسم footer في HTML: أمثلة وتخطيط تذييل الصفحة

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

تحتوي هذه الصفحة على محررات قابلة للتشغيل - حرّر، شغّل، وشاهد النتيجة فوراً.

بقلم Kevin Spektor, Co-founder & CTO

نُشر في Sep 24, 2026

كيف تنشئ تذييلًا في HTML

ضع المحتوى الختامي لصفحتك في عنصر <footer>، وعادةً يكون آخر شيء في <body>. ومثل <header> ليس له مظهر افتراضي، وCSS هو ما يجعله شريط تذييل:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Site footer</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    main { padding: 20px; }
    .site-footer { background: #111827; color: #d1d5db; padding: 20px; }
    .columns { display: flex; flex-wrap: wrap; gap: 32px; }
    .columns h2 { font-size: 14px; color: #fff; margin: 0 0 8px; }
    .columns ul { list-style: none; padding: 0; margin: 0; }
    .columns li { margin-bottom: 6px; }
    .site-footer a { color: #d1d5db; }
    .site-footer small { display: block; margin-top: 20px; border-top: 1px solid #374151; padding-top: 12px; }
  </style>
</head>
<body>
  <main>
    <h1>Page content</h1>
  </main>
  <footer class="site-footer">
    <div class="columns">
      <div>
        <h2>Product</h2>
        <ul><li><a href="#">Features</a></li><li><a href="#">Pricing</a></li></ul>
      </div>
      <div>
        <h2>Company</h2>
        <ul><li><a href="#">About</a></li><li><a href="#">Careers</a></li></ul>
      </div>
      <div>
        <h2>Legal</h2>
        <ul><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li></ul>
      </div>
    </div>
    <small>&copy; 2026 Acme Inc. All rights reserved.</small>
  </footer>
</body>
</html>

© يطبع الرمز ©. و<small> تحدد سطر حقوق النشر كنص بخط صغير، وهذا معناها في HTML لا مجرد خط أصغر. قوائم الروابط قوائم <ul> حقيقية، فتعلن معظم قارئات الشاشة عدد الروابط في كل عمود.

إبقاء التذييل في الأسفل

في صفحة قليلة المحتوى يقع التذييل مباشرة تحت ذلك المحتوى، مع مساحة فارغة تحته. الحل هو عمود flex: الحاوية بارتفاع النافذة على الأقل، والمنطقة الرئيسية تأخذ كل الارتفاع المتبقي. الصندوق الرمادي أدناه يمثل نافذة متصفح:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Footer at the bottom</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .window {
      height: 260px; border: 2px solid #e5e7eb;
      display: flex; flex-direction: column;
    }
    main { flex: 1; padding: 0 12px; }
    footer { background: #2563eb; color: #fff; padding: 10px 12px; }
  </style>
</head>
<body>
  <div class="window">
    <main>
      <p>Only one line of content.</p>
    </main>
    <footer>Footer stays at the bottom</footer>
  </div>
</body>
</html>

احذف flex: 1 من main وسيقفز التذييل إلى الأعلى تحت الفقرة. في صفحة حقيقية، ضع القواعد نفسها على <body> مع min-height: 100vh (وmargin: 0) بدلًا من ارتفاع ثابت، كي يقع التذييل أسفل الصفحات القصيرة وبعد المحتوى في الصفحات الطويلة.

التذييلات داخل المقالات

<footer> يختم أقرب مقال أو قسم إليه، فيمكن لتدوينة أو تعليق أن يملك تذييلًا خاصًا فيه الكاتب أو التاريخ أو الوسوم:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Article footer</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 14px; }
    article footer { border-top: 1px solid #e5e7eb; padding: 8px 0; color: #6b7280; font-size: 14px; }
    .tag { background: #e5e7eb; color: #111827; border-radius: 4px; padding: 2px 6px; }
  </style>
</head>
<body>
  <article>
    <h2>Five tips for cleaner HTML</h2>
    <p>Indent nested tags, close what you open, and name classes by meaning.</p>
    <footer>
      Posted in <span class="tag">html</span> <span class="tag">tips</span>
      by Ana on <time datetime="2026-09-24">September 24</time>
    </footer>
  </article>
</body>
</html>

تعامل قارئات الشاشة التذييل على مستوى الصفحة وحده كمعلم contentinfo. أما التذييل داخل المقال فمجموعة عادية، فلا ينافس تذييل الموقع.

بيانات الاتصال بـ address

لمعلومات الاتصال الخاصة بالصفحة أو صاحبها، استخدم <address> داخل التذييل. هو لبيانات الاتصال فقط (لا لأي عنوان بريدي في محتواك)، وتعرضه المتصفحات مائلًا افتراضيًا:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>address</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <footer style="border-top: 2px solid #16a34a; padding-top: 8px;">
    <address>
      Acme Inc., 12 Market Street, Springfield<br>
      <a href="mailto:hello@example.com">hello@example.com</a>
    </address>
  </footer>
</body>
</html>

كسر السطر داخل العنوان من الاستخدامات الجيدة لـ <br>. للمزيد عن روابط البريد الإلكتروني، راجع صفحة mailto.

ما الذي يوضع في التذييل

يمكن أن يحتوي التذييل على روابط وقوائم ونماذج (اشتراك في نشرة بريدية) وصور و<nav>. لكنه لا يمكن أن يحتوي على <header> أو <footer> آخر أو <main>. والقائمة الثانية في التذييل يمكن أن تكون <nav> مع تسمية تميزها عن القائمة الرئيسية:

<footer>
  <nav aria-label="Footer">
    <a href="/privacy">Privacy</a>
    <a href="/terms">Terms</a>
  </nav>
</footer>

أخطاء شائعة

وضع <footer> خارج <body>. كل ما هو ظاهر يوضع داخل <body>، بما في ذلك التذييل.
استخدام position: fixed لإبقائه في الأسفل. التذييل الثابت يغطي المحتوى على الشاشات الصغيرة ويحتاج إلى حشو في كل مكان. استخدم نمط عمود flex.
استخدام <address> لأي عنوان. هو لبيانات الاتصال بكاتب الصفحة أو المقال. عنوان متجر في قائمة فروع هو <p> عادي.
أعمدة روابط مبنية بوسوم <br>. استخدم قوائم <ul> كي تُعلن البنية.
كتابة السنة الماضية يدويًا. حدّث سنة حقوق النشر في قالبك، أو اطبعها من الخادم أو من خطوة البناء.

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

ما هو وسم footer في HTML؟

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

ما الذي يوضع في تذييل الموقع؟

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

كيف أُبقي التذييل في أسفل الصفحة؟

اجعل body عمود flex بارتفاع النافذة على الأقل (display: flex; flex-direction: column; min-height: 100vh;) وأعطِ <main> القيمة flex: 1. عندها تتمدد المنطقة الرئيسية لتملأ المساحة الفارغة وتدفع التذييل إلى الأسفل في الصفحات القصيرة.

كيف أكتب رمز حقوق النشر في HTML؟

استخدم الكيان © الذي يعرض ©. ويمكنك أيضًا كتابة المحرف مباشرة حين تستخدم الصفحة <meta charset="utf-8">. وإحاطة السطر بـ <small> تحدده كنص بخط صغير (small print).

هل يمكن أن يكون في الصفحة أكثر من footer؟

نعم. يمكن لكل <article> أو <section> أن يملك تذييلًا خاصًا لبيانات الكاتب أو الوسوم. وحده التذييل غير الموجود داخل article أو aside أو main أو nav أو section يُعد معلم contentinfo للصفحة لدى قارئات الشاشة.

مفاهيم ذات صلة