كيفية استخدام Span و Div HTML Elements

يختلف عنصر div عن عنصر قسم HTML5 لأنه لا يعطي المحتوى المرفق أي معنى دلالي. إذا لم تكن متأكدًا مما إذا كان محتوى المحتوى يجب أن يكون قسمًا أو قسمًا ، ففكر في الغرض من هذا العنصر والمحتوى لمساعدتك في تحديد ما يلزم استخدامه:

• إذا كنت تريد العنصر ببساطة لإضافة أنماط إلى تلك المنطقة من الصفحة ، فيجب عليك استخدام عنصر div.
• إذا كان المحتوى المطلوب تضمينه له تركيز واضح ويمكن أن يقف على نفسه ، فيمكنك استخدام عنصر القسم بدلاً من ذلك.

في نهاية المطاف ، يتصرف كلًا من الأقسام والأقسام بشكل مشابه تمامًا ، ويمكنك إعطاء أيٍّ منهما قيم السمات وأسلوبها باستخدام CSS للحصول على مظهر موقعك الذي تحتاجه. كلاهما عناصر مستوى الكتلة.

باستخدام العنصر

عنصر الامتداد هو عنصر مضمّن افتراضيًا. هذا يميزه عن عناصر div والقسم. غالبًا ما يُستخدم عنصر الامتداد لفك جزء معين من المحتوى ، عادةً ما يكون نصًا ، لمنحه "خطافًا" إضافيًا يمكن تصميمه لاحقًا. يستخدم مع CSS ، يمكنه تغيير نمط النص المرفق به ؛ ومع ذلك ، بدون أي سمات نمط ، فإن عنصر الامتداد ليس له أي تأثير على النص على الإطلاق.

هذا هو الفرق الرئيسي بين المسافة وعناصر div. كما هو مذكور أعلاه ، يشتمل عنصر div على فاصل فقرة ، في حين أن عنصر الامتداد لا يخبر المتصفح فقط بتطبيق قواعد نمط CSS المقترنة على ما هو محاط بعلامات :

النص المميز والنص غير المميز.

أضف class = "highlight" أو أي فئة أخرى إلى عنصر span لتمييز النص باستخدام CSS (على سبيل المثال ، class = "highlight">).

لا يتضمن عنصر الامتداد أي سمات مطلوبة ، ولكن الثلاثة الأكثر فائدة هي نفس سمات عنصر div:

• قلم المدقة
• صف دراسي
• هوية شخصية

استخدم الامتداد عندما تريد تغيير نمط المحتوى دون تعريف ذلك المحتوى كعنصر جديد على مستوى الكتلة في المستند.

على سبيل المثال ، إذا كنت تريد أن تكون الكلمة الثانية لعنوان h3 حمراء ، فقد تحيط هذه الكلمة بعنصر الامتداد الذي يقوم بنمط تلك الكلمة كنص أحمر. تظل الكلمة جزءًا من عنصر h3 ، ولكنها تظهر الآن باللون الأحمر:

هذا هو عنوان بلدي رائع

حرره جيريمي جيرار في 2/2/17