اگر با یک قالب قدیمی، پروژه چندساله یا آموزش‌های قدیمی HTML کار کرده باشید، احتمالاً با تگ‌هایی مثل <center>، <font> یا <frameset> روبه‌رو شده‌اید. بعضی از این عناصر هنوز ممکن است در مرورگر نمایش داده شوند، اما کار کردن یک تگ در مرورگر به این معنی نیست که استفاده از آن در کد HTML جدید استاندارد و مجاز است.
در استاندارد فعلی HTML، برخی عناصر قدیمی در گروه entirely obsolete قرار گرفته‌اند و برای authoring جدید non-conforming محسوب می‌شوند؛ یعنی نباید در کد جدید از آن‌ها استفاده کرد. نکته مهم این است که همه این عناصر در یک زمان و به یک دلیل کنار گذاشته نشده‌اند؛ بعضی از HTML 4 به بعد Deprecated بودند، بعضی به فناوری‌های قدیمی وابسته‌اند و بعضی نیز با ساختارها یا روش‌های مناسب‌تری جایگزین شده‌اند.
در این مقاله، وضعیت تگ‌های منسوخ‌شده را بر اساس HTML Living Standard فعلی WHATWG بررسی می‌کنیم و به‌جای معرفی یک جایگزین سریع و یکسان برای همه آن‌ها، مشخص می‌کنیم هر تگ در گذشته چه وظیفه‌ای داشته و امروز بر اساس معنای محتوا، ساختار HTML و نیاز ظاهری صفحه چه راهکاری برای آن مناسب‌تر است.
اگر هنوز با نقش HTML در ساخت صفحات وب و تفاوت ساختار محتوا با ظاهر آن آشنا نیستید، ابتدا مقاله HTML چیست؟ را مطالعه کنید.
تفاوت Deprecated، Obsolete، Non-conforming و Unsupported در HTML چیست؟
در منابع قدیمی HTML ممکن است واژه‌های Deprecated، Obsolete، Non-conforming و حتی Unsupported به‌جای یکدیگر استفاده شوند؛ اما این اصطلاحات یک معنی ندارند. اگر بخواهیم وضعیت تگ‌های قدیمی را دقیق بررسی کنیم، باید بین وضعیت یک قابلیت در استاندارد HTML و رفتار مرورگرها در برابر آن تفاوت بگذاریم.
اگر هنوز درباره مفهوم تگ، عنصر و تفاوت این دو ابهام دارید، ابتدا راهنمای تگ در HTML چیست؟ را ببینید؛ در ادامه این مقاله فرض می‌کنیم با این مفاهیم پایه آشنا هستید.
Deprecated چیست؟
اصطلاح Deprecated بیشتر هنگام صحبت درباره نسخه‌های تاریخی HTML اهمیت دارد. برای مثال، در HTML 4.01 یک عنصر Deprecated عنصری بود که راهکارهای جدیدتر جای آن را گرفته بودند و نویسندگان توصیه می‌شد دیگر از آن استفاده نکنند؛ بااین‌حال، مرورگرها برای سازگاری با صفحات قدیمی همچنان می‌توانستند از آن پشتیبانی کنند.
برای نمونه، <center> در HTML 4.01 از قبل به‌عنوان Deprecated مشخص شده بود. بنابراین دقیق نیست بگوییم «تگ center با HTML5 منسوخ شد». آنچه تغییر کرده، وضعیت این عنصر در مسیر تکامل استاندارد HTML است، نه اینکه تا قبل از HTML5 کاملاً تگ پیشنهادی و استانداردی برای کدنویسی جدید بوده باشد.
Obsolete چیست؟
Obsolete را می‌توان برای قابلیت‌هایی به‌کار برد که متعلق به شیوه‌ها یا ساختارهای قدیمی HTML هستند و دیگر نباید مبنای کدنویسی جدید قرار بگیرند.
اما در HTML Living Standard فعلی WHATWG، خود عبارت Obsolete هم به یک وضعیت واحد محدود نمی‌شود. WHATWG بین دست‌کم دو گروه مهم تفاوت می‌گذارد:
- Obsolete but conforming
- Entirely obsolete / Non-conforming
همین تفاوت باعث می‌شود نتوانیم هر چیزی را که برچسب «قدیمی» دارد، بدون بررسی در یک جدول واحد قرار دهیم.
Obsolete but conforming یعنی چه؟
برخی قابلیت‌های قدیمی هنوز می‌توانند از نظر قواعد فعلی conforming باشند، اما استفاده از آن‌ها توصیه نمی‌شود و HTML checker باید درباره آن‌ها هشدار بدهد.
WHATWG این گروه را Obsolete but conforming features می‌نامد.
نکته مهم این است که در استاندارد فعلی، نمونه‌های این گروه بیشتر attributeها و شکل‌های قدیمی markup هستند؛ نه همان فهرست تگ‌هایی مثل <center> و <font> که موضوع اصلی این مقاله‌اند.
بنابراین «obsolete بودن» همیشه به معنی «نامعتبر بودن کامل سند» نیست و باید وضعیت دقیق هر feature بررسی شود.
Non-conforming یعنی چه؟
وقتی یک عنصر برای authoring جدید Non-conforming باشد، نویسندگان صفحات HTML نباید از آن استفاده کنند.
WHATWG گروهی از عناصر را در بخش Non-conforming features به‌عنوان entirely obsolete فهرست کرده و صریحاً می‌گوید این عناصر نباید توسط authors استفاده شوند.
تگ‌هایی مانند <center>، <font>، <frameset>، <applet> و <strike> در این دسته قرار می‌گیرند.
در ادامه مقاله، وقتی یک تگ را «منسوخ‌شده» معرفی می‌کنیم، وضعیت دقیق آن را در HTML Living Standard نیز مشخص خواهیم کرد تا معلوم باشد صرفاً درباره یک توصیه قدیمی صحبت می‌کنیم یا عنصری که واقعاً برای authoring جدید non-conforming است.
Unsupported یعنی چه؟
Unsupported با موارد بالا متفاوت است.
Deprecated، Obsolete و Non-conforming درباره وضعیت یک قابلیت نسبت به مشخصات و قواعد HTML صحبت می‌کنند؛ اما Supported یا Unsupported معمولاً به پیاده‌سازی آن قابلیت در یک مرورگر یا User Agent مربوط است.
به همین دلیل ممکن است یک عنصر:
- برای کدنویسی جدید non-conforming باشد؛
- اما مرورگر همچنان برای سازگاری با صفحات قدیمی آن را پردازش و نمایش دهد.
برای مثال، اینکه مرورگر هنوز <center> را وسط‌چین نمایش می‌دهد، آن را دوباره به یک عنصر استاندارد برای پروژه‌های جدید تبدیل نمی‌کند.
پس در این مقاله عبارت «مرورگرها دیگر از این تگ پشتیبانی نمی‌کنند» را فقط زمانی به‌کار می‌بریم که داده معتبر درباره پشتیبانی مرورگرها داشته باشیم. در غیر این صورت، وضعیت استاندارد را با عباراتی مثل «برای authoring جدید non-conforming است» بیان می‌کنیم.
| اصطلاح | درباره چه چیزی است؟ | برداشت عملی |
|---|---|---|
| Deprecated | اصطلاح رایج در مشخصات قدیمی برای قابلیتی که راهکار جدیدتری جای آن را گرفته است | در کد جدید از آن استفاده نکنید و وضعیت امروزی آن را جداگانه بررسی کنید |
| Obsolete but conforming | قابلیت قدیمی که هنوز می‌تواند conforming باشد | استفاده نشود؛ checker ممکن است هشدار بدهد |
| Entirely obsolete / Non-conforming | قابلیتی که استاندارد فعلی استفاده نویسندگان از آن را مجاز نمی‌داند | در کد جدید استفاده نشود و برای مهاجرت، جایگزین مناسب انتخاب شود |
| Unsupported | وضعیت پیاده‌سازی در مرورگر یا User Agent | باید جداگانه با داده Browser Support بررسی شود |
بنابراین در ادامه، «تگ منسوخ» را مترادف «تگی که دیگر در مرورگر کار نمی‌کند» در نظر نمی‌گیریم. وضعیت استاندارد، سابقه تاریخی و پشتیبانی مرورگر سه موضوع مرتبط اما جدا از یکدیگرند.
لیست تگ های منسوخ شده HTML و جایگزین مناسب آن‌ها
در HTML Living Standard فعلی، ۲۹ عنصر در گروه entirely obsolete قرار دارند و استفاده از آن‌ها برای نوشتن HTML جدید non-conforming است.
بااین‌حال، «جایگزین» همیشه به معنی پیدا کردن یک تگ جدید با همان ظاهر نیست. برای مهاجرت درست باید ابتدا مشخص کنیم تگ قدیمی چه وظیفه‌ای داشته است؛ سپس بر اساس معنا، ساختار و رفتار موردنیاز، HTML، CSS یا JavaScript مناسب را انتخاب کنیم.
تگی مطابق جستجوی شما پیدا نشد.
اگر می‌خواهید در کنار این عناصر منسوخ‌شده، عناصر استاندارد و قابل استفاده فعلی را هم به‌صورت دسته‌بندی‌شده بررسی کنید، به لیست تگ های HTML مراجعه کنید.
چرا بعضی تگ‌های HTML منسوخ شدند؟
همه تگ‌های قدیمی HTML به یک دلیل منسوخ نشده‌اند. بعضی از آن‌ها فقط برای کنترل ظاهر صفحه ساخته شده بودند، بعضی به فناوری‌هایی وابسته بودند که دیگر جایی در وب مدرن ندارند و بعضی نیز با ساختارها و APIهای مناسب‌تری جایگزین شده‌اند.
به همین دلیل، نمی‌توان یک قانون کلی مثل «HTML5 سخت‌گیرانه‌تر شد و این تگ‌ها را حذف کرد» برای همه آن‌ها به‌کار برد. وضعیت تاریخی و دلیل کنار رفتن هر عنصر باید جداگانه بررسی شود.
جدا شدن ساختار محتوا از ظاهر صفحه
بخشی از تگ‌های قدیمی مستقیماً برای کنترل presentation استفاده می‌شدند؛ برای مثال:
- <center>
- <font>
- <basefont>
- <big>
- <spacer>
در HTML امروزی بهتر است معنا و ساختار محتوا در HTML باقی بماند و ویژگی‌هایی مانند رنگ، اندازه فونت، فاصله و چیدمان با CSS کنترل شوند.
البته این به معنی «جایگزین کردن همه این تگ‌ها با یک CSS property» نیست. برای مثال، اگر <big> در یک صفحه قدیمی عملاً نقش یک عنوان را داشته است، انتخاب heading مناسب می‌تواند از افزایش ساده font-size صحیح‌تر باشد.
جایگزین شدن با مدل‌های معنایی یا ساختاری بهتر
بعضی عناصر قدیمی وظیفه‌ای داشتند که امروز با HTML دقیق‌تر بیان می‌شود.
- <acronym> با <abbr> جایگزین شده است.
- <dir> باید با <ul> جایگزین شود.
- برای <strike> بسته به معنای محتوا می‌توان از <del> یا <s> استفاده کرد.
- برای <tt> نیز بسته به نوع محتوا ممکن است <code>، <kbd>، <var> یا <samp> مناسب باشد.
در این گروه، معنا از ظاهر مهم‌تر است. بنابراین جایگزینی صرفاً بر اساس شباهت بصری می‌تواند semantic HTML را خراب کند.
وابستگی به فناوری‌ها و معماری‌های قدیمی
بعضی تگ‌ها به فناوری‌ها یا مدل‌هایی وابسته بودند که دیگر روش معمول توسعه وب نیستند.
- <applet>
- <frame>
- <frameset>
- <keygen>
برای چنین عناصری معمولاً یک «تگ جدید که دقیقاً همان کار را انجام دهد» وجود ندارد.
مثلاً اگر یک پروژه قدیمی از Java Applet استفاده کرده باشد، مسئله اصلی انتخاب یک تگ جدید نیست؛ باید مشخص شود Applet چه قابلیتی در اختیار کاربر قرار می‌داده و آن قابلیت با فناوری‌های امروزی چگونه باید بازطراحی شود.
در مورد Frames نیز ممکن است در یک سناریو <iframe> مناسب باشد، در سناریوی دیگر CSS و ساختار جدید صفحه و در یک سیستم قدیمی حتی بازطراحی معماری یا تولید کامل صفحه در سمت سرور لازم باشد.
وجود راهکارهای مناسب‌تر برای رفتار و رابط کاربری
برخی تگ‌های قدیمی رفتارهایی مستقیماً روی صفحه ایجاد می‌کردند؛ برای مثال:
- <marquee>
- <blink>
- <bgsound>
در این موارد نیز هدف نباید بازسازی کورکورانه همان رفتار قدیمی باشد.
برای مثال، منسوخ شدن <blink> به این معنی نیست که باید حتماً همان چشمک‌زدن را با CSS Animation بازسازی کنیم. ابتدا باید ببینیم هدف اصلی چه بوده است: هشدار دادن، جلب توجه، نمایش تغییر وضعیت یا چیز دیگری؟
همین قاعده درباره <marquee> نیز صدق می‌کند. اگر واقعاً حرکت محتوا برای رابط ضروری باشد، می‌توان راهکار مناسب را با CSS یا JavaScript طراحی کرد؛ اما یک animation جدید صرفاً به این دلیل که کد قدیمی marquee داشته، الزاماً تصمیم خوبی نیست.
نتیجه عملی
وقتی در یک پروژه قدیمی با تگ منسوخ‌شده مواجه می‌شوید، قبل از جایگزینی این سه سؤال را بپرسید:
- این تگ در این صفحه دقیقاً چه معنا یا وظیفه‌ای داشته است؟
- آیا آن وظیفه به ساختار و معنا مربوط است یا فقط به ظاهر و رفتار؟
- در HTML و CSS امروزی، مناسب‌ترین راه برای حفظ همان هدف چیست؟
این رویکرد از جایگزینی مکانیکی جلوگیری می‌کند؛ چون برای بسیاری از تگ‌های منسوخ‌شده، یک جایگزین یک‌به‌یک و ثابت وجود ندارد.
آیا تگ های منسوخ شده هنوز در مرورگرها کار می‌کنند؟
بعضی از تگ‌های منسوخ‌شده HTML هنوز ممکن است در مرورگرهای امروزی نمایش داده یا پردازش شوند. اما این موضوع نباید با استاندارد بودن آن‌ها اشتباه گرفته شود.
در HTML دو سؤال جدا داریم:
- آیا نویسنده مجاز است این عنصر را در کد HTML جدید استفاده کند؟
- اگر یک صفحه قدیمی این عنصر را داشته باشد، مرورگر با آن چه رفتاری می‌کند؟
برای عناصری که در HTML Living Standard به‌عنوان entirely obsolete معرفی شده‌اند، پاسخ سؤال اول روشن است: این عناصر برای authoring جدید non-conforming هستند و نباید در کد جدید استفاده شوند.
بااین‌حال، مرورگرها باید با حجم بزرگی از صفحات قدیمی وب نیز سازگار بمانند. به همین دلیل، ممکن است همچنان رفتار بعضی عناصر legacy را پیاده‌سازی کنند.
نمونه legacy — برای استفاده در پروژه جدید توصیه نمی‌شود
<center>BitAmooz</center>
این نتیجه به معنی استاندارد بودن <center> نیست. <center> در استاندارد فعلی یک عنصر entirely obsolete است و نباید در HTML جدید استفاده شود.
هنگام بازنویسی چنین کدی نیز نباید صرفاً ظاهر فعلی مرورگر را تقلید کرد؛ باید مشخص شود دقیقاً چه چیزی قرار است وسط‌چین شود. وسط‌چین کردن متن، قرار دادن یک block در مرکز container و مرکز کردن یک عنصر در دو محور، مسائل متفاوتی هستند و می‌توانند راهکارهای CSS متفاوتی داشته باشند.
پس «پشتیبانی مرورگر» را چگونه بیان کنیم؟
در این مقاله درباره یک تگ نمی‌گوییم «دیگر توسط مرورگرها پشتیبانی نمی‌شود» مگر اینکه داده معتبر و maintained درباره Browser Support آن داشته باشیم.
در غیر این صورت، وضعیت استاندارد را دقیق‌تر بیان می‌کنیم:
این عبارت درباره وضعیت عنصر در استاندارد صحبت می‌کند و ادعایی درباره نسخه مشخص Chrome، Firefox، Safari یا مرورگرهای دیگر ندارد.
به همین دلیل، اگر برای یک تگ legacy جدول Browser Support ارائه شود، نسخه‌های مرورگر باید از یک منبع به‌روز و قابل نگهداری بررسی شوند؛ نمایش داده شدن تگ در یک تست شخصی یا حدس درباره نسخه‌های تاریخی مرورگر، برای ساخت چنین جدولی کافی نیست.
قاعده ساده: «کار کردن در مرورگر» نشان‌دهنده رفتار implementation است؛ «مجاز بودن برای استفاده در کد جدید» را باید از استاندارد HTML بررسی کرد. این دو را نباید مترادف در نظر گرفت.
HTML5 یا HTML Living Standard؛ وضعیت تگ‌ها را با کدام مرجع بررسی کنیم؟
در بسیاری از آموزش‌های وب هنوز از عبارت‌هایی مثل «تگ‌های حذف‌شده در HTML5» یا «جایگزین‌های HTML5» استفاده می‌شود. این عبارت‌ها برای اشاره تاریخی قابل فهم‌اند، اما برای تعیین وضعیت فعلی یک تگ دقیق‌ترین مرجع نیستند.
امروز HTML به‌صورت یک Living Standard توسط WHATWG نگهداری می‌شود؛ یعنی استاندارد به‌جای اینکه فقط در قالب نسخه‌های بزرگی مثل HTML4 یا HTML5 دیده شود، به‌طور مستمر توسعه و اصلاح می‌شود.
به همین دلیل، در این مقاله برای پاسخ به سؤال‌هایی مثل:
- آیا یک تگ هنوز برای کدنویسی جدید مجاز است؟
- آیا entirely obsolete است؟
- آیا فقط یک feature قدیمی ولی conforming است؟
- جایگزین پیشنهادی آن چیست؟
به HTML Living Standard فعلی WHATWG مراجعه می‌کنیم.
پس HTML5 اشتباه است؟
نه. اصطلاح «HTML5» همچنان به‌شکل گسترده برای اشاره به HTML و فناوری‌های مدرن وب استفاده می‌شود.
مسئله زمانی ایجاد می‌شود که از این اصطلاح برای توضیح تاریخچه همه عناصر قدیمی یک نتیجه کلی بگیریم؛ مثلاً:
این جمله درباره <center> دقیق نیست، چون این عنصر پیش از HTML5 و در HTML 4.01 نیز Deprecated بود. وضعیت امروزی آن یک موضوع جداست: در HTML Living Standard فعلی، <center> در گروه عناصر entirely obsolete و non-conforming قرار دارد.
پس هنگام بررسی یک تگ قدیمی بهتر است دو سؤال را جدا کنیم:
- از نظر تاریخی چه زمانی و در کدام مشخصات وضعیت آن تغییر کرده است؟
- وضعیت آن در استاندارد فعلی HTML چیست؟
برای پاسخ سؤال اول ممکن است لازم باشد به مشخصات تاریخی مثل HTML 4.01 مراجعه کنیم؛ برای سؤال دوم، مرجع اصلی این مقاله WHATWG HTML Living Standard است.
آیا تگ‌های semantic جدید جایگزین همه تگ‌های قدیمی شدند؟
خیر.
یکی دیگر از ساده‌سازی‌های رایج این است که تصور کنیم HTML5 مجموعه‌ای از تگ‌های semantic مثل <header>، <article> و <section> را معرفی کرد تا مستقیماً جای تگ‌های قدیمی را بگیرند.
این رابطه در بسیاری از موارد یک‌به‌یک نیست.
- <font> با <article> یا <section> جایگزین نمی‌شود؛ presentation آن معمولاً به CSS منتقل می‌شود.
- <strike> بر اساس معنی محتوا ممکن است با <del> یا <s> جایگزین شود.
- <applet> معمولاً به بازطراحی قابلیت نیاز دارد.
- <frameset> ممکن است نیازمند تغییر معماری layout یا حتی ساخت صفحه باشد.
- <tt> بسته به محتوای آن می‌تواند به <code>، <kbd>، <var>، <samp> یا CSS نیاز داشته باشد.
بنابراین بهتر است به‌جای جستجوی «تگ HTML5 معادل تگ قدیمی»، وظیفه و معنای عنصر قدیمی را پیدا کنیم و سپس راهکار استاندارد فعلی را انتخاب کنیم.
چرا بهتر است تگ های منسوخ شده را اصلاح کنیم؟
اصلاح تگ‌های منسوخ‌شده صرفاً برای «جدید کردن ظاهر کد» نیست. مهم‌ترین هدف این است که ساختار صفحه را با HTML امروزی هماهنگ کنیم و وظیفه هر بخش را با ابزار مناسب انجام دهیم.
HTML شما با استاندارد فعلی هماهنگ‌تر می‌شود
عناصری که در HTML Living Standard به‌عنوان entirely obsolete معرفی شده‌اند، برای authoring جدید non-conforming هستند.
بنابراین حذف یا مهاجرت صحیح آن‌ها کمک می‌کند markup پروژه به ساختاری نزدیک‌تر شود که استاندارد فعلی برای کد جدید تعریف کرده است.
این موضوع را نباید با Browser Support اشتباه گرفت؛ ممکن است مرورگر هنوز یک تگ قدیمی را پردازش کند، اما استفاده از آن در کد جدید همچنان non-conforming باشد.
نگهداری و تغییر کد ساده‌تر می‌شود
تگ‌هایی مانند <font>، <center> و <spacer> ساختار HTML را به جزئیات ظاهری صفحه وابسته می‌کنند.
وقتی presentation به CSS منتقل شود، تغییراتی مثل:
- رنگ و typography؛
- فاصله عناصر؛
- چیدمان؛
- رفتار در اندازه‌های مختلف صفحه
را می‌توان بدون دستکاری مستقیم محتوای HTML مدیریت کرد.
البته این مزیت زمانی حاصل می‌شود که مهاجرت درست انجام شود؛ صرفاً تعویض نام یک تگ قدیمی با یک تگ جدید لزوماً کد را بهتر نمی‌کند.
معنای محتوا دقیق‌تر بیان می‌شود
برای بعضی عناصر قدیمی، انتخاب جایگزین فرصتی است تا معنای محتوا نیز اصلاح شود.
مثلاً اگر در کد قدیمی از <tt> استفاده شده باشد، باید ببینیم محتوای آن چیست:
- کد برنامه ← <code>
- ورودی صفحه‌کلید ← <kbd>
- متغیر ← <var>
- خروجی برنامه ← <samp>
- صرفاً ظاهر monospace ← CSS
یا در مورد <strike>، تفاوت بین <del> و <s> به معنای محتوا بستگی دارد.
در چنین شرایطی هدف فقط ایجاد همان ظاهر قبلی نیست؛ HTML جدید باید تا حد ممکن نقش واقعی محتوا را نیز بیان کند.
کنترل responsive و presentation منطقی‌تر می‌شود
بعضی تگ‌های قدیمی برای ایجاد layout یا ظاهر ثابت استفاده می‌شدند؛ درحالی‌که CSS امروزی امکان کنترل همان نیازها را متناسب با شرایط مختلف صفحه فراهم می‌کند.
برای مثال، به‌جای اینکه یک عنصر را صرفاً با <center> وسط قرار دهیم، می‌توانیم بر اساس مسئله واقعی از:
- text-align
- marginهای خودکار
- Flexbox
- Grid
استفاده کنیم.
این تفاوت در صفحات responsive اهمیت بیشتری پیدا می‌کند، چون روش چیدمان را می‌توان متناسب با فضای در دسترس تغییر داد.
آیا حذف تگ های منسوخ باعث افزایش سرعت سایت می‌شود؟
نه به‌صورت عمومی و خودکار.
نمی‌توان گفت صرفاً تبدیل <font> به CSS یا حذف <center> باعث افزایش محسوس سرعت صفحه خواهد شد. تأثیر عملکرد به ساختار واقعی پروژه، CSS، JavaScript، حجم منابع، rendering و عوامل متعدد دیگری وابسته است.
ممکن است در یک پروژه مشخص، بازطراحی کد قدیمی هم‌زمان باعث ساده‌تر شدن markup یا کاهش کدهای اضافی شود و در نتیجه اثر عملکردی هم داشته باشد؛ اما این نتیجه باید برای همان پروژه اندازه‌گیری شود.
بنابراین «افزایش سرعت» را مزیت قطعی حذف تگ‌های منسوخ‌شده در نظر نمی‌گیریم.
آیا استفاده از تگ منسوخ باعث کاهش رتبه سئو می‌شود؟
رابطه مستقیمی از جنس «وجود تگ منسوخ = کاهش رتبه گوگل» نباید مطرح شود.
بر اساس راهنمای Google درباره اعتبار HTML و پردازش Metadata، گوگل تلاش می‌کند حتی HTML نامعتبر را هم درک کند؛ اما خطاهای markup می‌توانند روی نحوه پردازش metadata اثر بگذارند. برای مثال، اگر یک عنصر نامعتبر داخل <head> قرار بگیرد، ممکن است عناصر بعد از آن دیگر آن‌طور که انتظار دارید پردازش نشوند.
بنابراین نباید از «وجود تگ منسوخ» یک رابطه مستقیم و عمومی با افت رتبه نتیجه گرفت. دلیل اصلی اصلاح این عناصر، هماهنگی با استاندارد فعلی، نگهداری بهتر کد، انتخاب ساختار معنایی مناسب و کنترل صحیح presentation است.
چگونه تگ های منسوخ شده را در یک پروژه قدیمی پیدا و اصلاح کنیم؟
اگر روی یک قالب یا پروژه قدیمی کار می‌کنید، پیدا کردن یک تگ منسوخ فقط اولین مرحله است. جایگزینی مستقیم نام تگ‌ها بدون بررسی نقش آن‌ها می‌تواند ظاهر، معنا یا حتی رفتار صفحه را خراب کند.
برای مهاجرت بهتر، این مراحل را انجام دهید.
۱. ابتدا HTML صفحه را با یک Conformance Checker بررسی کنید
برای بررسی HTML مدرن می‌توانید از W3C HTML Checker استفاده کنید.
این ابزار می‌تواند بسیاری از عناصر و attributeهای obsolete یا خطاهای ساختاری HTML را مشخص کند.
البته خروجی Checker را باید به‌عنوان نقطه شروع بررسی در نظر بگیرید؛ تشخیص اینکه یک تگ قدیمی در پروژه شما دقیقاً با چه چیزی جایگزین شود، همچنان به کاربرد واقعی آن بستگی دارد.
۲. تگ‌های legacy را در سورس پروژه جستجو کنید
اگر پروژه چند فایل یا template دارد، می‌توانید عناصر قدیمی را در کل codebase جستجو کنید.
- <center
- <font
- <frameset
- <frame
- <big
- <tt
- <marquee
- <applet
وجود هر کدام از این عبارت‌ها یک کاندید بررسی است؛ نه مجوز Find & Replace خودکار.
مثلاً:
<code> ← <tt>
یک قانون عمومی صحیح نیست، چون <tt> ممکن است در یک نقطه برای کد، در نقطه دیگر برای ورودی صفحه‌کلید و در جایی دیگر فقط برای ظاهر monospace استفاده شده باشد.
۳. قبل از جایگزینی، وظیفه تگ قدیمی را مشخص کنید
برای هر مورد این سؤال‌ها را بررسی کنید:
- این تگ چه معنایی به محتوا می‌داده است؟
- آیا فقط برای ظاهر استفاده شده؟
- آیا بخشی از layout صفحه بوده؟
- آیا رفتار یا قابلیت خاصی ایجاد می‌کرده؟
- CSS یا JavaScript پروژه به نام همین تگ وابسته است؟
- آیا باید همان رفتار قدیمی حفظ شود یا خود رفتار هم نیاز به بازطراحی دارد؟
برای مثال، وجود <center> به‌تنهایی نمی‌گوید باید text-align: center بنویسید. ابتدا باید مشخص شود هدف، وسط‌چین کردن متن بوده یا مرکز قرار دادن یک عنصر block یا یک layout کامل.
۴. جایگزین را بر اساس معنا و وظیفه انتخاب کنید
بعد از مشخص شدن نقش تگ، راهکار جدید را انتخاب کنید.
<strike>نسخه قبلی</strike>
اگر منظور نشان دادن یک ویرایش و حذف محتوا باشد:
<del>نسخه قبلی</del>
اما اگر محتوا فقط دیگر معتبر یا مرتبط نیست، ممکن است این ساختار مناسب‌تر باشد:
<s>نسخه قبلی</s>
ظاهر هر دو می‌تواند مشابه باشد، اما معنای HTML آن‌ها یکسان نیست.
۵. وابستگی‌های CSS و JavaScript را هم بررسی کنید
در پروژه‌های قدیمی ممکن است CSS یا JavaScript مستقیماً بر اساس نام تگ نوشته شده باشد.
برای مثال:
center {
margin-top: 20px;
}
یا:
document.querySelectorAll("font")
اگر فقط HTML را تغییر دهید، این وابستگی‌ها ممکن است دیگر کار نکنند.
بنابراین هنگام مهاجرت یک تگ قدیمی، حداقل این سه بخش را با هم بررسی کنید:
- HTML
- CSS
- JavaScript
۶. تغییرات را مرحله‌ای انجام دهید
در یک پروژه بزرگ، بهتر است همه تگ‌های legacy را یک‌باره تغییر ندهید.
یک گروه کوچک را اصلاح کنید و سپس بررسی کنید:
- محتوا و ترتیب آن حفظ شده است؛
- ظاهر موردنیاز همچنان درست است؛
- layout در اندازه‌های مختلف صفحه خراب نشده است؛
- JavaScript وابسته همچنان کار می‌کند؛
- معنای HTML جدید با محتوای واقعی هماهنگ است؛
- HTML Checker خطای جدیدی گزارش نمی‌کند.
این کار به‌خصوص برای ساختارهایی مثل <frame>، <frameset> و <applet> مهم است؛ چون اصلاح آن‌ها ممکن است فراتر از تعویض یک تگ باشد.
۷. بعد از مهاجرت، خروجی را دوباره اعتبارسنجی کنید
پس از اصلاح کد، صفحه را دوباره با HTML Checker بررسی کنید و نتیجه واقعی را هم در مرورگر آزمایش کنید.
این دو بررسی پاسخ دو سؤال متفاوت می‌دهند:
- Checker: آیا markup جدید با قواعد HTML فعلی سازگار است؟
- Browser test: آیا صفحه بعد از تغییر همچنان همان خروجی و رفتار موردنیاز را دارد؟
برای یک مهاجرت مطمئن به هر دو نیاز داریم.
قاعده عملی این بخش: تگ قدیمی را اول از نظر معنا، وظیفه و وابستگی‌هایش شناسایی کنید؛ سپس HTML یا CSS مناسب را انتخاب کنید. جایگزینی یک‌به‌یک همیشه درست نیست.
جمع‌بندی
تگ‌های منسوخ‌شده HTML لزوماً تگ‌هایی نیستند که مرورگر دیگر آن‌ها را نمایش نمی‌دهد. بسیاری از عناصر legacy ممکن است همچنان برای سازگاری با صفحات قدیمی پردازش شوند، درحالی‌که استفاده از آن‌ها برای نوشتن HTML جدید non-conforming است.
در HTML Living Standard فعلی، مجموعه‌ای از عناصر مانند <center>، <font>، <frameset>، <strike> و <tt> در گروه entirely obsolete قرار دارند و نباید در کد جدید استفاده شوند. در مقابل، عناصری مثل <b>، <i>، <s> و <u> همچنان بخشی از HTML هستند و صرفاً باید با معنای صحیح خود به‌کار بروند.
هنگام اصلاح یک پروژه قدیمی، دنبال یک جدول ساده از «تگ قدیمی ← تگ جدید» نباشید. بعضی عناصر به یک عنصر معنایی جدید نیاز دارند، بعضی به CSS، بعضی به JavaScript یا APIهای امروزی و برخی حتی به بازطراحی بخشی از ساختار پروژه.
اگر می‌خواهید HTML را از پایه، مرحله‌به‌مرحله و همراه با تمرین و پروژه یاد بگیرید، می‌توانید مسیر یادگیری را در دوره مستر HTML بیت‌آموز ادامه دهید.
سوالات متداول
خیر. عناصر قدیمی HTML تاریخچه یکسانی ندارند. برای مثال، <center> پیش از HTML5 و در HTML 4.01 نیز Deprecated بود. برای تعیین وضعیت امروزی یک عنصر باید HTML Living Standard فعلی WHATWG را بررسی کرد، نه اینکه همه تغییرات را به HTML5 نسبت داد.
بله. پشتیبانی مرورگر با مجاز بودن برای authoring جدید یکسان نیست. مرورگرها ممکن است برای سازگاری با صفحات قدیمی همچنان بعضی عناصر legacy را پردازش کنند، درحالی‌که همان عنصر در استاندارد فعلی entirely obsolete و non-conforming باشد.
خیر. <b>، <i>، <s> و <u> همچنان در HTML فعلی تعریف شده‌اند، اما هرکدام معنای مشخصی دارند و نباید صرفاً بر اساس ظاهر پیش‌فرضشان استفاده شوند.
برای مثال، <s> برای محتوایی است که دیگر دقیق یا مرتبط نیست؛ درحالی‌که اگر بخواهید حذف شدن محتوا در یک ویرایش را نشان دهید، <del> انتخاب مناسب‌تری است.
خیر. بعضی تگ‌ها جایگزین نسبتاً مشخصی دارند؛ برای مثال <acronym> با <abbr> و <dir> با <ul> جایگزین می‌شود.
اما در مواردی مثل <center>، <tt>، <big>، <strike>، <applet> یا <frameset>، ابتدا باید وظیفه و معنای کد قدیمی مشخص شود و سپس عنصر semantic، CSS، JavaScript یا راهکار معماری مناسب انتخاب شود.
هنوز دیدگاهی ثبت نشده است.