⚠ قبل ما نقول اى حاجة لازم تعرف ان ال

span & div : عبارة عن عناصر=elements
id & class : عبارة عن صفات=attributes

الفرق بين div & span

html div tag

<div> </div>

div اختصار ل division ومعناها قطاع او قسم.
وهي لا تُعطى أي معنى للمُتصفح ولكن نستخدمها عندما نريد وضع بداخلها عناصر سوف نقوم بتنسيقهم بواسطة لغة CSS
جميع عناصر ال html يُمكن وضعهم داخل وسم ال <div>

html span tag

<span> </span>

هذا العنصر مثل عنصر ال div في كل شيء ولكن

ما الفرق بين وسم <div> ووسم <span>

وسم الـ div : يكون block بمعنى انه يكون مُستقل بذاته بمعنى اخر يكون قبله وبعد عنصر <br>
وسم الـ span : يكون inline بمعنى انه لا يحدث له تغيير الا إذا قمنا بتنسيقه بواسطة لغة CSS
مثال على ذلك:

 
<!DOCTYPE html>
 
<html>
  <head>
    <title>Courses 4 Arab</title>
  </head>
 
  <body>
    <div>
      <h1> <span lang="en">HTML</span> تعلم لغة </h1>
      <p>.......................مُحتوى المقال</p>
    </div>
  </body>
</html>

الفرق بين id & class

html class attribute

Class="value"

هذا ال attribute يُمكن إضافته الى أي عنصر html وتكون قيمته عبارة عن اسم خاص للعُنصر ونستخدم هذا الاسم لتنسيق العُنصر بواسطة اكواد لغة CSS او نستخدم هذا الاسم لعمل بعض التغيرات على العنصر بواسطة لغة JavaScript

مثال على ذلك:

 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>class attribute</title>
    <style>
      .header-html {color: red;}
    </style>
  </head>
  <body>
 
    <h1 class="header-html">learn html</h1>
 
  </body>
</html>

html id attribute

id="value"

هذا ال attribute أيضا مثل ال class فهو يُمكن إضافته الى أي عنصر html وتكون قيمته عبارة عن اسم خاص للعُنصر ونستخدم هذا الاسم لتنسيق العُنصر بواسطة اكواد لغة CSS او نستخدم هذا الاسم لعمل بعض التغيرات على العنصر بواسطة لغة JavaScript ولكن ما الفرق بين id و class ؟ .