ما هو وسم div في HTML؟ شرح مبسّط ومفصل للمبتدئين

 

 ما هو وسم <div> في HTML؟ شرح مبسّط ومفصل للمبتدئين

إذا كنتِ تتعلمين تصميم المواقع، فلا بد أنكِ صادفتِ كثيراً وسم <div>.

في هذا المقال، سنشرح ما هو هذا الوسم، ولماذا نستخدمه، ومتى نفضّل استخدام تاغات أخرى بدلاً منه.

 ما هو <div> في HTML؟

كلمة div اختصار لـ division، أي "قسم".

يُستخدم هذا الوسم في HTML لتقسيم الصفحة إلى أجزاء مستقلة.

بمعنى آخر، هو حاوية (container) يمكنك وضع بداخلها نصوص، صور، أزرار، أو أي عناصر أخرى. 

مثال بسيط:

<div>
  <h2>Welcome to My Website</h2>
  <p>This is a simple paragraph inside a div.</p>
</div>

في هذا المثال، <div> يجمع العنوان والفقرات معًا في مجموعة واحدة، مما يساعد في تنظيم الصفحة.

 ما فائدة استخدام <div>؟ 

1. تنظيم الكود: يجعل الصفحة مرتبة وسهلة الفهم.
2. التحكم في التصميم: يمكن تطبيق أنماط CSS على <div> لتنسيق شكل القسم بالكامل.
3. المرونة: يمكن استخدامه في أي مكان داخل الصفحة تقريبًا.
4. تجميع العناصر: يساعدك في التحكم بعدة عناصر معًا بدل تعديل كل عنصر على حدة.

 مثال عملي على استخدام <div> مع CSS

<div class="box">
  <h3>About Me</h3>
  <p>I am learning web design and HTML5 tags.</p>
</div>
<style>
.box {
  background-color: #f2f2f2;
  padding: 20px;
  border-radius: 10px;
}
</style>

هنا أضفنا class باسم box لتطبيق تصميم محدد على هذا القسم فقط.

 ملاحظة مهمة: لا تستخدمي <div> في كل مكان

في الإصدارات القديمة من HTML، كنا نستخدم <div> لكل شيء، مثل:

<div class="header"></div>
<div class="footer"></div>
<div class="article"></div>

لكن الآن، بعد إصدار HTML5، أصبحت هناك تاغات خاصة لكل جزء من الصفحة مثل:

• <header> للرأس
• <footer> للتذييل
• <article> للمقالات
• <section> للأقسام
• <nav> للقوائم

 لذلك لا نستخدم <div> بدل هذه التاغات، إلا إذا لم نجد تاغًا مناسبًا لوصف الجزء الذي نريد إنشاءه.

 متى نستخدم <div> اليوم؟

نستخدم <div> في الحالات التالية:

• عندما نريد تجميع عناصر لتصميمها فقط (بدون معنى محدد).
• عندما نحتاج إنشاء تخطيط عام أو شبكة (layout) بمساعدة CSS Grid أو Flexbox.
• داخل الإطارات أو المكونات الصغيرة في صفحات الويب.

 كيف يساعد <div> في SEO؟

بحد ذاته، <div> لا يحمل أي معنى لمحركات البحث.

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

• <div> هو وسم أساسي في HTML يستخدم لتقسيم الصفحة.
• يساعد في تنظيم الكود وتطبيق التصميم بسهولة.
• لا يجب استخدامه بدل التاغات المعنوية مثل <header> و<article>.
• يُعتبر أداة قوية عند استخدامه بطريقة صحيحة داخل تصميم منسق ومرتب.

📺 لمزيد من التوضيح، شاهِد هذا الفيديو: “هل تعرف أهمية عنصر القسم في HTML؟”

https://youtu.be/HDtkiRXZptQ

هذا الفيديو يشرح كيف يستخدم <div> بطريقة واضحة وسهلة، وبيكمل ما شرحنا هنا.