اريد شرح عن عنصر header و nav و section و class و footer

header و nav و section و footer تلك عناصر  HTML Semantic.

وبشكل بسيط لها نفس خواص عنصر div، لكن الفكرة في التسمية، فمن اسمها تجد أن لكل عنصر هدف معين في التصميم، وذلك لتسهيل قراءة الكود والتفرقة بين الأقسام المختلفة.

فعنصر header يُستخدم لتعريف رأس الصفحة أو رأس قسم معين في المستند، ويحتوي على عناصر مثل العنوان الرئيسي (h1، h2، إلخ)، شعارات، قائمة تنقل أو أي معلومات توضيحية.

أي الجزء العلوي من التصميم.

<header>
  <h1>عنوان الموقع</h1>
  <nav>
    <ul>
      <li><a href="#home">الصفحة الرئيسية</a></li>
      <li><a href="#about">عن الموقع</a></li>
      <li><a href="#contact">الاتصال</a></li>
    </ul>
  </nav>
</header>

أما العنصر nav فهو لتعريف قسم التنقل في الصفحة، ويحتوي على روابط إلى أجزاء أخرى من الموقع أو إلى مواقع أخرى.

<nav>
  <ul>
    <li><a href="#home">الصفحة الرئيسية</a></li>
    <li><a href="#about">عن الموقع</a></li>
    <li><a href="#contact">الاتصال</a></li>
  </ul>
</nav>

بينما العنصر section فالغرض منه تعريف قسم أو جزء محدد من الصفحة، ونعتمد عليه لتقسيم المحتوى إلى أجزاء منطقية يمكن معالجتها بشكل منفصل، أي أقسام أو أجزاء.

<section>
  <h2>عن الموقع</h2>
  <p>هذا هو قسم من الموقع يحتوي على معلومات عن الموقع.</p>
</section>

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

<footer>
  <p>حقوق النشر © 2023 الموقع. جميع الحقوق محفوظة.</p>
  <a href="#contact">الاتصال بنا</a>
</footer>

أما class فهي ليست عنصر بل سمة attribute نستطيع إضافتها إلى أي عنصر HTML لتحديد مجموعة من الأنماط styles التي يمكن تطبيقها بواسطة CSS، وباستخدام نفس اسم الـ class نستطيع تطبيق نفس الأنماط على عدة عناصر.

<div class="box">
  محتوى داخل الصندوق
</div>

<style>
  .box {
    border: 1px solid #000;
    padding: 10px;
    margin: 10px;
  }
</style>

• أولا عنصر <header> : يستخدم <header> لتعريف رأس صفحة الويب, حيث يمكن أن يحتوي <header> على عناصر مثل شعار و إسم الموقع ,  وروابط التنقل الرئيسية  والبحث، والمعلومات الأساسية عن الموقع. و غالبا ما يظهر في الجزء العلوي من الصفحة.
• ثانيا عنصر <nav> : يستخدم <nav> لتعريف مجموعة من الروابط التنقل داخل الموقع. يمكن أن يحتوي <nav> على قائمة رئيسية لروابط الموقع أو قائمة تنقل فرعية. حيث يساعد في تنظيم وترتيب الروابط لسهولة التصفح.
• ثالثا عنصر <section> : يستخدم <section> لتنظيم المحتوى داخل الصفحة إلى أقسام مختلفة .عادة ما يحتوي <section> على محتوى ذي صلة يمكن تجميعه معاً، مثل فصل المحتوى المتعلق بموضوع معين.
• رابعا  Class: الـ Class هو سمة (Attribute) يمكنك إضافتها لعناصر HTML لتحديد مظهرها أو سلوكها بشكل مخصص. حيث يستخدم الـ Class لتطبيق نفس السمات على عناصر متعددة فى ملفات ال CSS , أو لتحديد عناصر معينة لتطبيق سمات فريدة عليها أو التلاعب بها فى ملفات ال JS .يمكن استخدامها في CSS لتحديد الأنماط التي تطبق على عناصر محددة.
• خامسا عنصر <footer> : يستخدم <footer> لتعريف تذييل صفحة الويب. حيث عادة ما يحتوي <footer> على معلومات الاتصال، وروابط إضافية، ومعلومات حول الموقع. و يظهر عادة في الجزء السفلي من الصفحة.

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

ويمكنك قراءة تلك المقالات على موسوعة حسوب :

header و footer  و nav  و section 

شكرا