div وspan حاويتان عامتان بدون معنى دلالي:
<div> (Division): • عنصر block-level — يأخذ سطراً كاملاً • يستخدم للتجميع والتخطيط عندما لا يوجد عنصر دلالي مناسب • الأداة الرئيسية مع CSS للتخطيط
<span>: • عنصر inline — يسير مع النص • يستخدم لتنسيق أجزاء من النص بدون معنى دلالي • مثالي لتلوين كلمة أو تطبيق class على جزء من نص
متى تستخدم div وspan؟ ✅ عندما تحتاج حاوية للـ CSS/JavaScript فقط ✅ عندما لا يوجد عنصر دلالي مناسب ❌ لا تستخدمهما إذا كان هناك article, section, nav, header أنسب
القاعدة: آخر الخيارات، ليس أولها!',
| 1 | <!-- div: تجميع لأغراض التخطيط --> |
| 2 | <div class="card"> |
| 3 | <div class="card-image"> |
| 4 | <img src="course.jpg" alt="كورس HTML"> |
| 5 | </div> |
| 6 | <div class="card-body"> |
| 7 | <h3>كورس HTML</h3> |
| 8 | <p>تعلم HTML من الصفر</p> |
| 9 | </div> |
| 10 | <div class="card-footer"> |
| 11 | <button>سجّل الآن</button> |
| 12 | </div> |
| 13 | </div> |
| 14 | |
| 15 | <!-- span: تنسيق جزء من النص --> |
| 16 | <p> |
| 17 | السعر: <span class="price original">500</span> |
| 18 | <span class="price discounted">250</span> جنيه |
| 19 | <span class="badge">خصم 50%</span> |
| 20 | </p> |
| 21 | |
| 22 | <!-- span لتلوين syntax --> |
| 23 | <pre><code> |
| 24 | <span class="keyword">function</span> <span class="function-name">greet</span>(<span class="param">name</span>) { |
| 25 | <span class="keyword">return</span> <span class="string">"Hello"</span> + name; |
| 26 | } |
| 27 | </code></pre> |
مثال 1: بطاقة كورس مبنية بـ div
| 1 | <div class="course-card"> |
| 2 | <div class="course-thumbnail"> |
| 3 | <img src="/courses/html/thumb.webp" alt="كورس HTML"> |
| 4 | <span class="course-level">مبتدئ</span> |
| 5 | </div> |
| 6 | |
| 7 | <div class="course-info"> |
| 8 | <h3>HTML من الصفر للاحتراف</h3> |
| 9 | |
| 10 | <div class="course-meta"> |
| 11 | <span class="lessons">🎬 45 درس</span> |
| 12 | <span class="duration">⏱ 10 ساعات</span> |
| 13 | <span class="students">👥 5000 طالب</span> |
| 14 | </div> |
| 15 | |
| 16 | <p class="course-description"> |
| 17 | تعلم HTML5 بالكامل مع مشاريع عملية |
| 18 | </p> |
| 19 | |
| 20 | <div class="course-footer"> |
| 21 | <div class="pricing"> |
| 22 | <span class="price-original">200 جنيه</span> |
| 23 | <span class="price-current">99 جنيه</span> |
| 24 | </div> |
| 25 | <a href="/courses/html" class="btn-enroll">سجّل الآن</a> |
| 26 | </div> |
| 27 | </div> |
| 28 | </div> |