بناء التذييل السفلي بعنصر footer | العناصر الدلالية في لغة HTML

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

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

الصف 2 شرح توضيحي

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

الصف 3 كود برمجي

Article And Semantic Footer Structureمقال مستقل article مختوم بتذييل دلالي footer

بناء بطاقة مقال مستقلة بوسم article وختمها بتذييل دلالي يضم بيانات النشر والحقوق.

HTML

<article style="border: 1px solid #cbd5e1; border-radius: 10px; padding: 12px; background: #fff;">
  <h4 style="margin: 0 0 6px;">Why Semantic HTML Matters</h4>
  <p style="margin: 0 0 10px;">Semantic landmarks boost SEO indexing and screen reader navigation.</p>
  <footer style="font-size: 12px; color: #64748b; border-top: 1px solid #e2e8f0; padding-top: 8px;">
    Published by CloseTag Editorial Team &bull; © 2026
  </footer>
</article>

جرّب بنفسك

الصف 4 معاينة حية

Article And Footer Browser Previewمعاينة المقال والتذييل الدلالي في المتصفح

عرض متصفح لبطاقة مقال دلالية مختومة بوسم footer لبيانات النشر والحقوق.

الصف 5 ملاحظة هامة

الصف 6 ملاحظة هامة

خلاصة المعرفة ومحطة الانتقال

ملخص الدرس

حصاد الدرس

مراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي

ماذا تعلّمت في هذا الدرس؟

ملخص الدرس: أتقنت في هذا الدرس المعمارية الدلالية الشاملة في HTML5: استبدال الحاويات العشوائية بعناصر القسم العلوي header والتنقل nav والمحتوى الجوهري main والأقسام الموضوعية section والمقالات المستقلة article والأشرطة الجانبية aside والتذييل footer، والاستفادة من معالم ARIA التلقائية. الخطوة التالية: سننتقل في الدرس القادم إلى استكشاف الكيانات الرمزية في HTML وتشفير المحارف المحجوزة لحماية المستند وتأمينه.

Concluding Pages with Semantic Footer بناء التذييل السفلي بعنصر footer