27- كورس HTML للمبتدئين – استخدام aside و footer بشكل عملي في HTML

استخدام العناصر Aside وFooter في HTML

تُعد عناصر HTML الأساسية مثل aside وfooter من الأدوات المهمة في تطوير صفحات الويب، حيث تسهم في تحسين بنية وترتيب المحتوى وتوفير تجربة مستخدم سلسة ومنظمة. توفر هذه العناصر وسيلة فعّالة لتقديم معلومات إضافية أو محتوى غير أساسي بجانب المحتوى الرئيسي، بالإضافة إلى تسهيل عملية تصفح الموقع والوصول إلى روابط أو معلومات مهمة في نهاية الصفحة.

الاستخدام العملي للعنصر Aside في HTML

يُستخدم العنصر aside في HTML لعرض محتوى جانبي أو معلومات تكميلية تتعلق بالمحتوى الرئيسي للمستند. يمكن أن يشمل هذا العنصر روابط لمقالات ذات صلة، أو قوائم، أو إعلانات، أو حتى مقتطفات من نصوص. يساعد aside في تنظيم الصفحة بشكل أفضل من خلال فصل المحتوى الأساسي عن المعلومات الإضافية، مما يُسهّل على المستخدمين التركيز على المحتوى الذي يهتمون به.

مثال:
<aside>
  <h2>مقالات ذات صلة</h2>
  <ul>
    <li><a href=\"#\">مقال 1</a></li>
    <li><a href=\"#\">مقال 2</a></li>
    <li><a href=\"#\">مقال 3</a></li>
  </ul>
</aside>

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

الاستخدام العملي للعنصر Footer في HTML

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

مثال:
<footer>
  <p>© 2023 شركتي. جميع الحقوق محفوظة.</p>
  <nav>
    <ul>
      <li><a href=\"#\">سياسة الخصوصية</a></li>
      <li><a href=\"#\">الشروط والأحكام</a></li>
      <li><a href=\"#\">اتصل بنا</a></li>
    </ul>
  </nav>
</footer>

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

من خلال استخدام العناصر aside وfooter بشكل فعّال، يمكن لمطوري الويب تحسين تجربة المستخدم وتجعل المواقع أكثر تنظيماً وسهولة في التصفح.