مقدمة في HTML - تعلم HTML

استخدام div والعناصر الدلالية في HTML وتنظيم هيكل الصفحة بشكل احترافي

في لغة HTML، عندنا عناصر بنستخدمها علشان نقسم الصفحة لأجزاء. من أشهر العناصر دي هو العنصر div، وده بنسميه "عنصر التقسيم" أو Division Element. لكن كمان من وقت إصدار HTML5، ظهرت عناصر جديدة اسمها العناصر الدلالية أو Semantic Elements، ودي بقت جزء أساسي في تنظيم صفحات الويب بشكل احترافي.

يعني إيه div؟

عنصر div هو حاوية عامة أو Generic Container، مفيهوش معنى خاص، لكن بنستخدمه علشان نحط فيه عناصر تانية. مثلاً:

<div>
  <h1>عنوان القسم</h1>
  <p>محتوى داخل القسم</p>
</div>

العنصر ده مفيد لما نكون عايزين نتحكم في التصميم باستخدام CSS أو JavaScript.

العناصر الدلالية في HTML5

HTML5 قدمت عناصر جديدة بتوضح نوع المحتوى الموجود داخلها، وده بيساعد محركات البحث والمستخدمين على فهم أفضل للصفحة. أهم العناصر دي:

• header: رأس الصفحة أو القسم.
• nav: القوائم وأدوات التنقل.
• main: المحتوى الرئيسي للصفحة.
• section: أقسام المحتوى.
• article: مقالات مستقلة.
• aside: المحتوى الجانبي.
• footer: التذييل أو نهاية الصفحة.

مثال تطبيقي

<header>
  <h1>موقعي الشخصي</h1>
  <nav>
    <ul>
      <li><a href="#">الرئيسية</a></li>
      <li><a href="#">من أنا</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>عنوان المقال</h2>
    <p>ده محتوى المقال الرئيسي.</p>
  </article>

  <aside>
    <h3>مواضيع جانبية</h3>
    <ul>
      <li><a href="#">مقال 1</a></li>
    </ul>
  </aside>
</main>

<footer>
  <p>© 2025 جميع الحقوق محفوظة</p>
</footer>

الفرق بين div والعناصر الدلالية

الـ div عنصر عام، لكن العناصر الدلالية بتوضح نوع البيانات أو المحتوى. وده بيساعد في تحسين السيو SEO وتجربة المستخدم.

نصيحة أخيرة

لو انت بتصمم موقع جديد، حاول تستخدم العناصر الدلالية بشكل أكبر، وقلل من استخدام div إلا لو اضطررت.

كده نكون فهمنا الفرق بين div والعناصر الدلالية في HTML، وازاي ننظم بيهم الصفحة بشكل احترافي ومناسب لمحركات البحث.