ما الفرق بين هذه الوسم div و br في HTML ؟

الوسم div هو عبارة عن حاوية عامة للمحتوى ، وهي بالفعل لا تمثل شيئاً ويمكن استخدامها لتجميع العناصر لأغراض مثل التنسيق والترتيب أو إنشاء قسم جديد في الصفحة . 

<div>
  <p>يمكنك وضع أي نوع من أنواع المحتوى هنا، بما في ذلك الجداول وخلافه.</p>
</div>

أما عن الوسم br يؤدي هذا الوسم عند استخدامه إلى الإنتقال إلى سطر جديد ، مثلاً هنا كل نص سوف يظهر في سطر . 

<address>
  يمكنك مراسلتنا على العنوان الرسمي:<br>
  Hsoub Ltd.<br>
  Level 17, Dashwood House<br>
  69 Old Broad Street<br>
  London
</address>

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

كما يمكنك الإطلاع أكثر حول الوسوم :- br ،  div  ، span ، p 

بالإضافة للتعليق السابق إذا كنت تقصد الفرق بين ال div والbr  في عمل line break فهناك بالطبع بعض الفروقات

1. استخدم <br/>عندما تريد سطرًا جديدًا في فقرة  مثل 

   <p>Hi Josh, <br/> How are you?</p>

    

2. استخدم <br/> عند كتابة عنوان 

   <p>John Dough<br/>
   1155 Saint. St. #33<br/>
   Orlando, FL 32765
   </p>

    

3. ولكن إذا كنت تريد مسافة بين عنصرين ، فيمكنك استخدام div وليس <br/> فالكود التالي غير مستحب 

   <div>Hello</div>
   <br/> 
   <div>Something else here</div>

    

4. ال <br> له عيب يتمثل في تحديد حجم الفاصل بين الأقسام على خاصية ال line-height  

بالنسبة لإستخدامات ال span تتمثل في إضافة تنسيقات مختلفة لجملة مثلاً  عن بقية ال paragraph 

<p>We can use span tags to target text with CSS styling, <span id="green-text">this green text</span>.</p>

<p>You can use span for <span class="highlighted">any CSS rule</span>.</p>

يمكنك أيضاً أن تستخدم ال span لعمل وظيفة من خلال ال javascript 

كل هذه الإستخدامات ستقوم بتجربتها من خلال التطبيق العملي