در حال بارگذاری...

تگ‌ها و ویژگی‌های منسوخ HTML

تگ‌ها و ویژگی‌های منسوخ (Deprecated HTML Tags and Attributes) آن دسته از عناصر و ویژگی‌هایی هستند که در نسخه‌های قدیمی‌تر HTML استفاده می‌شدند اما در HTML5 دیگر توصیه نمی‌شوند. این عناصر هنوز ممکن است در برخی مرورگرها پشتیبانی شوند، اما استفاده از آنها باعث کاهش سازگاری، خوانایی کد و استانداردسازی پروژه می‌شود.
در یک فروشگاه آنلاین، وبسایت خبری، وبلاگ شخصی یا پرتال دولتی، ممکن است کدهایی شامل تگ‌هایی مثل <font>، <center> یا ویژگی‌هایی مثل bgcolor دیده شود. این تگ‌ها زمانی محبوب بودند اما امروزه برای مدیریت رنگ‌ها، اندازه‌ها و چینش باید از CSS استفاده کرد. یادگیری شناسایی و جایگزینی این تگ‌ها مثل بازسازی یک خانه قدیمی است: باید دیوارهای فرسوده (تگ‌های منسوخ) را بردارید و دکوراسیون مدرن (CSS و Semantic HTML) را جایگزین کنید.
در این آموزش، شما یاد می‌گیرید:

تگ‌ها و ویژگی‌های منسوخ کدام هستند
چرا استفاده از آنها توصیه نمی‌شود
چگونه آنها را با روش‌های مدرن جایگزین کنید
و چطور ساختار پروژه خود را استاندارد و آینده‌نگر نگه دارید

مثال پایه

html

HTML Code

<!DOCTYPE html>

<html lang="fa">
<head>
<meta charset="UTF-8">
<title>نمونه قدیمی</title>
</head>
<body>
<!-- استفاده از تگ font برای تغییر رنگ و اندازه متن (منسوخ شده) -->
<font color="blue" size="5">به وبلاگ شخصی من خوش آمدید!</font>
</body>
</html>

در این مثال پایه، تگ <font> که از HTML4 به ارث رسیده، برای استایل‌دهی مستقیم متن استفاده شده است.

color="blue" رنگ متن را آبی می‌کند.
size="5" اندازه فونت را بزرگتر از حالت پیش‌فرض می‌کند.
چرا این روش دیگر توصیه نمی‌شود؟

چون کد محتوا و نمایش را مخلوط می‌کند (Content + Presentation)، که نگهداری و تغییر را سخت می‌کند.
برای وبسایت‌های ریسپانسیو (Responsive) مناسب نیست چون اندازه و رنگ ثابت می‌مانند.
موتورهای جستجو و فناوری‌های کمکی مانند صفحه‌خوان‌ها از HTML معنایی (Semantic HTML) بهتر پشتیبانی می‌کنند.
اگر شما در یک پرتال خبری یا فروشگاه آنلاین قدیمی کار می‌کنید، ممکن است چنین کدهایی را ببینید. روش مدرن، استفاده از CSS است:
<span style="color:blue; font-size:24px;">به وبلاگ شخصی من خوش آمدید!</span>
این روش نمایش و محتوا را جدا می‌کند و نگهداری سایت را آسان‌تر می‌سازد.

مثال کاربردی

html

HTML Code

<!DOCTYPE html>

<html lang="fa">
<head>
<meta charset="UTF-8">
<title>پرتال خبری قدیمی</title>
</head>
<body>
<!-- استفاده از center برای وسط چین کردن متن (منسوخ شده) -->
<center><h1>آخرین اخبار امروز</h1></center>

<!-- استفاده از marquee برای متن متحرک (منسوخ شده) -->

<marquee behavior="scroll" direction="right">تخفیف ویژه فروشگاه آنلاین ما!</marquee>

<!-- استفاده از bgcolor برای رنگ پس‌زمینه جدول (منسوخ شده) -->

<table border="1" bgcolor="yellow">
<tr><td>اطلاعیه‌های قدیمی</td></tr>
</table>
</body>
</html>

این مثال کاربردی نشان می‌دهد که چگونه چند تگ منسوخ در کنار هم استفاده می‌شوند:

<center> متن را به صورت افقی در وسط صفحه قرار می‌دهد. امروزه text-align:center; در CSS جایگزین آن است.
<marquee> متن را متحرک و اسکرول‌شونده می‌کند. در گذشته برای اعلان‌های مهم در فروشگاه‌ها و وبسایت‌های خبری رایج بود. امروزه از CSS Animations یا JavaScript استفاده می‌کنیم.
ویژگی bgcolor در <table> برای تغییر رنگ پس‌زمینه جدول استفاده می‌شد. امروزه باید از style="background-color:..." یا کلاس CSS استفاده کرد.
این تگ‌ها علاوه بر اینکه ظاهر سایت را غیر استاندارد می‌کنند، مشکلاتی هم ایجاد می‌کنند:

در مرورگرهای جدید ممکن است اصلاً نمایش داده نشوند یا ناسازگار باشند
دسترسی‌پذیری (Accessibility) کاهش می‌یابد
نگهداری کد سخت‌تر و خطاپذیرتر می‌شود
در یک پرتال دولتی قدیمی یا وبلاگ شخصی قدیمی، شناسایی و جایگزینی این تگ‌ها اولین قدم برای مدرن‌سازی پروژه است.

Best Practices و Common Mistakes:
Best Practices:

همیشه از تگ‌های معنایی (Semantic HTML) مانند <header>, <section> و <footer> استفاده کنید.
برای رنگ‌ها، فونت‌ها و چینش، CSS را جایگزین ویژگی‌های قدیمی کنید.
برای متون متحرک از CSS Animation یا JavaScript بهره ببرید.
مرتب کد خود را با Validator بررسی کنید تا مشکلات و تگ‌های منسوخ شناسایی شوند.
Common Mistakes:
نگه داشتن <center> یا <marquee> به دلیل "کار کردن فعلی"
استفاده از ویژگی‌هایی مثل bgcolor به جای کلاس‌های CSS
ترکیب کد نمایشی با محتوا و پیچیده شدن نگهداری
نادیده گرفتن استانداردها و دسترسی‌پذیری
Debugging Tips:

از W3C Validator برای شناسایی تگ‌های منسوخ استفاده کنید
مرحله به مرحله CSS را جایگزین کنید تا ظاهر سایت خراب نشود
کد را مرتب و لایه‌بندی شده نگه دارید تا اشکال‌یابی ساده‌تر شود

📊 مرجع سریع

تگ/ویژگی	توضیح	مثال <font>	تغییر رنگ و اندازه فونت	<font color="red" size="4">متن</font>

خلاصه و گام‌های بعدی:
در این آموزش یاد گرفتید که تگ‌ها و ویژگی‌های منسوخ HTML چه هستند، چرا نباید از آنها استفاده کرد و چطور باید آنها را با HTML5 و CSS جایگزین نمود.
نکات کلیدی:

جدا کردن محتوا از نمایش مهم‌ترین اصل مدرن‌سازی است
تگ‌های منسوخ نگهداری و به‌روزرسانی را دشوار می‌کنند
جایگزین کردن آنها باعث بهبود SEO و دسترسی‌پذیری می‌شود
ارتباط با CSS و JavaScript:
CSS جایگزین اصلی ویژگی‌های بصری منسوخ است
JS یا CSS Animations جایگزین جلوه‌های تعاملی مثل <marquee> هستند
گام‌های بعدی:
یادگیری کامل Semantic HTML و ARIA برای دسترسی‌پذیری
تمرین تبدیل صفحات قدیمی به ساختار مدرن
آزمایش کدها در ابزارهای Validator و مرورگرهای مدرن
با این مسیر، وبسایت‌های قدیمی مانند فروشگاه‌های آنلاین یا پرتال‌های دولتی را می‌توان استاندارد و قابل توسعه کرد.

🧠 دانش خود را بیازمایید

آماده شروع

آزمون دانش شما

درک خود از این موضوع را با سوالات کاربردی بسنجید.

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود

زبان