جاري التحميل...

وسوم وسمات HTML المهجورة

وسوم وسمات HTML المهجورة (Deprecated HTML Tags and Attributes) هي تلك العناصر التي كانت مستخدمة في الإصدارات القديمة من HTML مثل HTML4، لكنها الآن لم تعد موصى باستخدامها في HTML5 لأنها فقدت أهميتها أو تم استبدالها بوسوم أكثر دقة ودلالية (Semantic HTML) أو بأساليب تنسيق حديثة مثل CSS. أهمية دراسة هذه الوسوم لا تأتي من استخدامها الحالي، بل من القدرة على قراءة الأكواد القديمة وصيانتها أو تحديثها، كما هو الحال عند التعامل مع بوابات حكومية قديمة أو مواقع شخصية لم تُحدث منذ سنوات.
تخيل الأمر كما لو كنت تصلح مكتبة قديمة: لديك رفوف (وسوم) متهالكة تحتاج لإعادة ترتيب أو استبدالها برفوف جديدة (وسوم حديثة). في موقع أخبار قديم، قد تجد وسم مستخدمًا لتغيير الألوان بدل CSS، أو في موقع تجارة إلكترونية قديم يستخدم

لمحاذاة العناصر. من خلال هذا الدرس ستتعلم كيف تتعرف على هذه الوسوم، كيفية التعامل معها بأمان، وكيف تحولها إلى بدائل حديثة. ستتعلم كيف تحافظ على التوافق مع المتصفحات الحديثة وتحافظ على بنية نظيفة تساعدك في الانتقال من الأكواد العتيقة إلى معايير اليوم.

مثال أساسي

html
HTML Code 
<!DOCTYPE html>

<html lang="ar">
<head>
<meta charset="UTF-8">
<title>مثال على الوسوم المهجورة</title>
</head>
<body>
<!-- استخدام وسم font لتغيير اللون وحجم النص (مهجور) -->
<font color="red" size="5">مرحبا بك في موقعي القديم!</font>
</body>
</html>

الكود أعلاه يوضح مثالًا بسيطًا على وسم HTML مهجور وهو . هذا الوسم كان يُستخدم في الإصدارات القديمة لتغيير لون النص (color) وحجمه (size) مباشرةً داخل HTML. اليوم، يوصى باستخدام CSS بدلًا من ذلك لأنه يفصل بين المحتوى والتنسيق.
في السطر مرحبا بك في موقعي القديم! قمنا بتحديد اللون الأحمر والحجم 5 للنص. عند تنفيذ هذا المثال في المتصفح ستظهر العبارة باللون الأحمر وكأنها أكبر قليلًا من النص العادي. هذا الأسلوب كان شائعًا في مواقع الأخبار أو المدونات القديمة التي لم تكن تستخدم CSS.
لكن لماذا يعتبر هذا غير مرغوب الآن؟ أولًا، لأنه يخلط بين المحتوى والتصميم ويجعل صيانة الأكواد أصعب. ثانيًا، استخدامه يعقد عملية التوافق مع الشاشات الحديثة وتقنيات الوصول لذوي الاحتياجات الخاصة. في حالة موقع حكومي قديم أو متجر إلكتروني مهجور، ستحتاج للتعرف على هذا الوسم لتستطيع إعادة تصميم الصفحة دون فقد التنسيق الأصلي، مع استبداله بأسلوب CSS حديث. على سبيل المثال يمكن تحويل النص إلى: مرحبًا، ليصبح أكثر توافقًا مع معايير اليوم.

مثال عملي

html
HTML Code 
<!DOCTYPE html>

<html lang="ar">
<head>
<meta charset="UTF-8">
<title>مقال قديم في موقع أخبار</title>
</head>
<body>
<!-- وسم center لمحاذاة العنوان (مهجور) -->
<center>
<h1>أخبار اليوم العاجلة</h1>
</center>

<!-- وسم marquee لإنشاء نص متحرك (مهجور) -->

<marquee behavior="scroll" direction="right">عاجل: تخفيضات كبيرة في المتجر الإلكتروني!</marquee>

<!-- وسم u لتسطير النص (مهجور) -->

<p>هذا <u>نص مسطر</u> بالطريقة القديمة.</p>
</body>
</html>

أفضل الممارسات والأخطاء الشائعة عند التعامل مع وسوم HTML المهجورة تبدأ بفهم أن الهدف الأساسي هو التوافق والصيانة، وليس الاستمرار باستخدامها في مشاريع جديدة.
أفضل الممارسات:

  1. حاول دائمًا استبدال الوسوم المهجورة بعناصر HTML5 دلالية (Semantic HTML) مثل استخدام
    و
    بدلًا من
    .
  2. استخدم CSS في تنسيق الألوان، الأحجام والمحاذاة بدلًا من وسم أو .
  3. إذا اضطررت لاستخدام الوسوم المهجورة لدعم مشروع قديم، ضع تعليقات توضح ضرورة تحديثها مستقبلًا.

  4. اختبر الصفحة باستخدام أدوات الوصول لضمان أن استخدام الوسوم القديمة لم يضر بقابلية الاستخدام.
    الأخطاء الشائعة:

  5. الاعتماد على أو لإبراز النصوص، إذ لم تعد مدعومة جيدًا.

  6. خلط الهيكلة بالتنسيق، مثل وضع اللون في HTML بدل CSS.
  7. تجاهل التوافق مع الشاشات الحديثة عند فتح مواقع قديمة على أجهزة مختلفة.
  8. نسيان استبدال السمات المهجورة مثل bgcolor في بخواص CSS مثل background-color.
    للتصحيح، قم بتشغيل الصفحات القديمة في متصفح حديث، استخدم أدوات المطور لفحص الأكواد، وحاول تحويل جميع تنسيقات الوسوم المهجورة إلى CSS مع الحفاظ على المظهر الأصلي.

    📊 مرجع سريع

    الوسم/السمة الوصف مثال <font> تغيير لون وحجم الخط <font color="blue" size="4">نص</font>

    خلاصة هذا الدرس أن وسوم وسمات HTML المهجورة لا تزال موجودة في الأكواد القديمة لكنها ليست مستقبل تطوير الويب. تعلمت هنا التعرف على هذه الوسوم مثل و

    و وكيفية قراءتها وفهم تأثيرها على الصفحة. هذه المعرفة ستفيدك إذا كنت تعمل على تحديث موقع حكومي قديم أو إعادة تصميم متجر إلكتروني لم يتم تحديثه منذ سنوات.
    الخطوة التالية هي ربط هذه المعرفة بالتصميم الحديث باستخدام CSS وJavaScript. فمثلًا، الحركة التي كان ينفذها يمكن تحقيقها اليوم عبر CSS animations أو مكتبات JavaScript، وبشكل أكثر توافقًا مع معايير الوصول.
    ننصحك بعد هذا الدرس بدراسة تحويل الأكواد القديمة إلى HTML5، والتعرف على استخدام وسوم دلالية مثل
    و
    و
    . كما يفضل أن تجرب أدوات مثل Lighthouse لفحص الصفحات القديمة وتحسينها. استمر في التعلم بمراجعة أكواد قديمة وتجريب استبدال كل وسم مهجور بأسلوب حديث.

    🧠 اختبر معرفتك

    جاهز للبدء

    اختبر معرفتك

    اختبر فهمك لهذا الموضوع بأسئلة عملية.

    ❓
    4
    الأسئلة
    🎯
    70%
    للنجاح
    ♾️
    ∞
    الوقت
    🔄
    ∞
    المحاولات

    📝 التعليمات

    • اقرأ كل سؤال بعناية
    • اختر أفضل إجابة لكل سؤال
    • يمكنك إعادة الاختبار عدة مرات كما تريد
    • سيتم عرض تقدمك في الأعلى
    الموضوع 49 من 51
    Html درس تعليمي