<footer>: • يحدد تذييل المحتوى — إما للصفحة كلها أو لـ article/section • يحتوي عادةً: حقوق النشر، روابط قانونية، معلومات التواصل، خريطة الموقع • مثل header، يمكن استخدامه أكثر من مرة في الصفحة • لا يجب أن يحتوي header أو address آخر داخله
أشياء تجدها في footer: - معلومات المؤلف وحقوق الملكية - روابط الخصوصية والشروط والأحكام - أيقونات السوشيال ميديا - خريطة الموقع (Sitemap) - النشرة البريدية - روابط التواصل',
| 1 | <!-- footer الصفحة الرئيسي --> |
| 2 | <footer> |
| 3 | <div class="footer-grid"> |
| 4 | <section> |
| 5 | <h3>نوفيل</h3> |
| 6 | <p>منصة تعليم البرمجة بالعربي</p> |
| 7 | </section> |
| 8 | |
| 9 | <nav aria-label="روابط الموقع"> |
| 10 | <h3>الموقع</h3> |
| 11 | <ul> |
| 12 | <li><a href="/courses">الكورسات</a></li> |
| 13 | <li><a href="/articles">المقالات</a></li> |
| 14 | <li><a href="/about">من نحن</a></li> |
| 15 | </ul> |
| 16 | </nav> |
| 17 | |
| 18 | <section> |
| 19 | <h3>تواصل معنا</h3> |
| 20 | <address> |
| 21 | <a href="mailto:info@nouvil.com">info@nouvil.com</a> |
| 22 | </address> |
| 23 | </section> |
| 24 | </div> |
| 25 | |
| 26 | <div class="footer-bottom"> |
| 27 | <p><small>© 2024 نوفيل. جميع الحقوق محفوظة.</small></p> |
| 28 | </div> |
| 29 | </footer> |
| 30 | |
| 31 | <!-- footer داخل article --> |
| 32 | <article> |
| 33 | <p>محتوى المقالة...</p> |
| 34 | <footer> |
| 35 | <p>نُشرت بتاريخ <time datetime="2024-06-15">15 يونيو 2024</time></p> |
| 36 | <address>بقلم <a rel="author" href="/ahmed">أحمد</a></address> |
| 37 | </footer> |
| 38 | </article> |
مثال 1: footer احترافي لموقع تعليمي
| 1 | <footer class="site-footer"> |
| 2 | <div class="footer-content"> |
| 3 | |
| 4 | <!-- عمود: عن المنصة --> |
| 5 | <section class="footer-about"> |
| 6 | <h3>نوفيل</h3> |
| 7 | <p>نتعلم البرمجة معاً بالعربي منذ 2023</p> |
| 8 | <div class="social-links"> |
| 9 | <a href="https://twitter.com/nouvil" aria-label="تويتر">🐦</a> |
| 10 | <a href="https://youtube.com/nouvil" aria-label="يوتيوب">▶️</a> |
| 11 | <a href="https://github.com/nouvil" aria-label="جيت هاب">🐙</a> |
| 12 | </div> |
| 13 | </section> |
| 14 | |
| 15 | <!-- عمود: التعلم --> |
| 16 | <nav aria-label="روابط التعلم"> |
| 17 | <h3>تعلّم</h3> |
| 18 | <ul> |
| 19 | <li><a href="/courses">الكورسات</a></li> |
| 20 | <li><a href="/learn">مدرسة البرمجة</a></li> |
| 21 | <li><a href="/challenges">التحديات</a></li> |
| 22 | <li><a href="/articles">المقالات</a></li> |
| 23 | </ul> |
| 24 | </nav> |
| 25 | |
| 26 | <!-- عمود: قانوني --> |
| 27 | <nav aria-label="روابط قانونية"> |
| 28 | <h3>الشركة</h3> |
| 29 | <ul> |
| 30 | <li><a href="/about">من نحن</a></li> |
| 31 | <li><a href="/privacy">سياسة الخصوصية</a></li> |
| 32 | <li><a href="/terms">الشروط والأحكام</a></li> |
| 33 | <li><a href="/contact">تواصل معنا</a></li> |
| 34 | </ul> |
| 35 | </nav> |
| 36 | |
| 37 | </div> |
| 38 | |
| 39 | <div class="footer-legal"> |
| 40 | <small>© 2024 نوفيل. جميع الحقوق محفوظة.</small> |
| 41 | </div> |
| 42 | </footer> |