الوسوم المتقادمة (Deprecated) هي وسوم كانت موجودة في HTML قديم لكن أُزيلت من مواصفات HTML5 الحديثة.
لماذا نتعلمها؟ 1. فهم تطور الويب 2. صيانة مواقع قديمة 3. عدم استخدامها بطريق الخطأ
⚠️ لا تستخدمها في مشاريعك الجديدة!
القائمة الكاملة: • <acronym>: استبدل بـ <abbr> • <applet>: استبدل بـ <object> أو <iframe> • <basefont>: استبدل بـ CSS font-family • <big>: استبدل بـ CSS font-size • <center>: استبدل بـ CSS text-align أو Flexbox • <dir>: استبدل بـ <ul> • <font>: استبدل بـ CSS • <frame> / <frameset> / <noframes>: استبدل بـ <iframe> • <s> / <strike>: استبدل بـ <del> (s موجود لكن نادر) • <tt>: استبدل بـ <code> • <marquee>: لا يوجد بديل HTML — استخدم CSS animation • <blink>: مزعج جداً وأُزيل • <u>: لا يزال موجوداً لكن يستخدم بحذر (خط تحت) • <b>, <i>: لا يزالان موجودَين لكن يُفضَّل strong/em',
| 1 | <!-- ❌ لا تستخدم: acronym --> |
| 2 | <acronym title="HTML">HTML</acronym> |
| 3 | <!-- ✅ استخدم بدلاً --> |
| 4 | <abbr title="HyperText Markup Language">HTML</abbr> |
| 5 | |
| 6 | <!-- ❌ لا تستخدم: center --> |
| 7 | <center>محتوى متوسط</center> |
| 8 | <!-- ✅ استخدم بدلاً --> |
| 9 | <div style="text-align: center;">محتوى متوسط</div> |
| 10 | |
| 11 | <!-- ❌ لا تستخدم: font --> |
| 12 | <font color="red" size="5">نص أحمر كبير</font> |
| 13 | <!-- ✅ استخدم بدلاً --> |
| 14 | <span style="color: red; font-size: 1.5rem;">نص أحمر كبير</span> |
| 15 | |
| 16 | <!-- ❌ لا تستخدم: marquee --> |
| 17 | <marquee>نص متحرك</marquee> |
| 18 | <!-- ✅ استخدم بدلاً: CSS Animation --> |
| 19 | <p class="scrolling-text">نص متحرك</p> |
| 20 | <style> |
| 21 | @keyframes scroll { from { transform: translateX(100%); } to { transform: translateX(-100%); } } |
| 22 | .scrolling-text { animation: scroll 10s linear infinite; } |
| 23 | </style> |
| 24 | |
| 25 | <!-- ❌ لا تستخدم: frameset --> |
| 26 | <frameset cols="25%,75%"> |
| 27 | <frame src="nav.html"> |
| 28 | <frame src="content.html"> |
| 29 | </frameset> |
| 30 | <!-- ✅ استخدم بدلاً: CSS Layout --> |
| 31 | <div style="display: flex;"> |
| 32 | <nav style="width: 25%;">التنقل</nav> |
| 33 | <main style="width: 75%;">المحتوى</main> |
| 34 | </div> |
مثال 1: جدول مقارنة الوسوم القديمة والحديثة
| 1 | <!-- |
| 2 | جدول مرجعي: الوسوم المتقادمة وبدائلها الحديثة |
| 3 | (لا تنسخ الكود القديم!) |
| 4 | --> |
| 5 | |
| 6 | <!-- 1. acronym → abbr --> |
| 7 | <!-- ❌ <acronym title="CSS">CSS</acronym> --> |
| 8 | <abbr title="Cascading Style Sheets">CSS</abbr> |
| 9 | |
| 10 | <!-- 2. big → CSS --> |
| 11 | <!-- ❌ <big>نص كبير</big> --> |
| 12 | <span style="font-size: 1.25em;">نص كبير</span> |
| 13 | |
| 14 | <!-- 3. strike/s → del --> |
| 15 | <!-- ❌ <strike>سعر قديم</strike> --> |
| 16 | <del>500 جنيه</del> |
| 17 | |
| 18 | <!-- 4. tt → code --> |
| 19 | <!-- ❌ <tt>monospace text</tt> --> |
| 20 | <code>monospace text</code> |
| 21 | |
| 22 | <!-- 5. b → strong (أو CSS) --> |
| 23 | <!-- ❌ <b class="important">مهم</b> — اجعله: --> |
| 24 | <strong>مهم جداً</strong> <!-- مع أهمية دلالية --> |
| 25 | <span style="font-weight: bold;">خط عريض فقط</span> <!-- بدون --> |
| 26 | |
| 27 | <!-- 6. u → CSS text-decoration --> |
| 28 | <!-- ❌ <u>نص تحته خط</u> — يُشبه الرابط! اجعله: --> |
| 29 | <span style="text-decoration: underline; text-decoration-style: wavy; text-decoration-color: red;"> |
| 30 | خط موجي أحمر |
| 31 | </span> |