تگ center در HTML چیست؟ کاربرد، وضعیت و جایگزین‌های CSS

تگ center یکی از عناصر قدیمی HTML است که برای وسط‌چین کردن افقی محتوای داخل خود استفاده می‌شد. اگرچه مرورگرهای امروزی هنوز این تگ را برای سازگاری با صفحات قدیمی نمایش می‌دهند، <center> در HTML فعلی یک عنصر obsolete و non-conforming است و نباید در کدهای جدید از آن استفاده شود.

برای جایگزینی center نیز یک دستور CSS ثابت وجود ندارد. روش مناسب به چیزی بستگی دارد که می‌خواهید وسط‌چین کنید؛ برای مثال text-align برای تراز متن، marginهای خودکار برای بعضی عناصر block و Flexbox یا Grid برای کنترل layout کاربرد دارند.

در این مقاله ابتدا می‌بینیم تگ center دقیقاً چه کاری انجام می‌داد و چرا دیگر بخشی از HTML مدرن نیست. سپس روش مناسب جایگزینی آن را برای سناریوهای مختلف انتخاب می‌کنیم، چند نمونه کد قدیمی را به CSS تبدیل می‌کنیم و در پایان تفاوت میان پشتیبانی مرورگر و معتبر بودن این تگ در استاندارد فعلی HTML را بررسی خواهیم کرد.

تگ center در HTML چیست و چه کاری انجام می‌داد؟

تگ center یکی از عناصر قدیمی HTML بود که برای وسط‌چین‌کردن افقی محتوای داخل خود استفاده می‌شد. این محتوا می‌توانست شامل متن، تصویر یا عناصر block و inline باشد. به همین دلیل، در کدهای قدیمی وب ممکن است هنوز با این تگ روبه‌رو شوید.

نکته مهم این است که «وسط‌چین‌شدن» در اینجا نسبت به فضای عنصر دربرگیرنده انجام می‌شد؛ بنابراین نباید آن را همیشه به معنی قرارگرفتن محتوا دقیقاً در مرکز کل صفحه یا viewport در نظر گرفت.

اگر هنوز درباره نقش عناصر و تگ‌ها در ساختار یک صفحه وب ابهام دارید، راهنمای مبانی HTML پیش‌نیاز مناسبی برای درک بهتر این موضوع است.

ساختار و سینتکس تگ center

در کدهای قدیمی HTML، محتوای موردنظر بین تگ باز <center> و تگ بسته </center> قرار می‌گرفت:

				
					<center>
  <p>This text will be centered.</p>
</center>

در این مثال، مرورگر محتوای داخل تگ center را در راستای افقی وسط‌چین می‌کند. خود عنصر center نقش یک ظرف برای این رفتار نمایشی را دارد و محتوای اصلی همچنان عنصر <p> است.

تگ center محتوا را چگونه وسط‌چین می‌کرد؟

رفتار تگ center به‌صورت کلی این بود که محتوای block یا inline قرارگرفته داخل آن را به‌شکل افقی در فضای دربرگیرنده وسط‌چین کند. به همین دلیل توسعه‌دهندگان قدیمی بدون نوشتن CSS می‌توانستند برای بخش‌هایی از صفحه چنین چیدمانی ایجاد کنند.

برای نمونه، اگر یک متن یا تصویر داخل center قرار می‌گرفت، مرورگر رفتار وسط‌چین را به محتوای داخل آن اعمال می‌کرد. بااین‌حال، این مثال‌ها فقط برای شناخت و خواندن کدهای قدیمی اهمیت دارند؛ برای نوشتن کد جدید ابتدا باید مشخص کنیم چرا تگ center دیگر انتخاب مناسبی نیست و سپس بر اساس نوع محتوا، روش CSS درست را انتخاب کنیم.

چرا نباید از تگ center در HTML جدید استفاده کنیم؟

اگر تگ center هنوز در بسیاری از مرورگرها نمایش داده می‌شود، ممکن است این سؤال پیش بیاید که چرا نباید از آن در کدهای جدید استفاده کنیم. دلیل اصلی این است که پشتیبانی مرورگر با معتبر بودن یک عنصر در استاندارد فعلی HTML یکسان نیست. تگ center برای سازگاری با محتوای قدیمی همچنان می‌تواند رندر شود، اما برای نوشتن HTML جدید یک عنصر استاندارد و قابل‌توصیه محسوب نمی‌شود.

وضعیت تگ center در استانداردهای HTML

برخلاف یک برداشت رایج، تگ center نخستین بار در HTML5 منسوخ نشد. در مشخصات HTML 4.01 در W3C این عنصر از قبل Deprecated اعلام شده بود. خود استاندارد HTML 4.01 نیز center را معادل یک div با align=”center” معرفی می‌کرد و استفاده از شیوه‌های مبتنی بر Style Sheet را به‌جای چنین روش‌های نمایشی توصیه می‌کرد.

در استاندارد جاری HTML، وضعیت حتی روشن‌تر است. HTML Living Standard در WHATWG تگ center را در گروه عناصر entirely obsolete و non-conforming قرار می‌دهد؛ یعنی نویسندگان صفحات وب نباید از آن در HTML جدید استفاده کنند و باید به‌جای آن از عنصر مناسب و CSS استفاده شود.

بنابراین روند تاریخی را می‌توان این‌طور خلاصه کرد:

استفاده در HTML قدیمی ← Deprecated در HTML 4 ← عنصر obsolete و non-conforming در HTML امروزی

تگ center تنها عنصر HTML نیست که چنین مسیری را طی کرده است. اگر می‌خواهید نمونه‌های دیگر و جایگزین‌های آن‌ها را ببینید، مقاله تگ‌های منسوخ‌شده HTML مجموعه گسترده‌تری از این عناصر را بررسی می‌کند.

چرا مرورگرها هنوز تگ center را نمایش می‌دهند؟

منسوخ یا obsolete شدن یک عنصر به این معنا نیست که مرورگر باید فوراً توانایی پردازش آن را حذف کند. وب پر از صفحات قدیمی است و حذف ناگهانی رفتارهای قدیمی می‌تواند نمایش بخشی از آن صفحات را مختل کند. به همین دلیل ممکن است کدی مانند <center> را امروز در مرورگر اجرا کنید و همچنان نتیجه ظاهری موردانتظار را ببینید.

این رفتار نباید به‌عنوان مجوز استفاده از center در پروژه جدید برداشت شود. MDN نیز این عنصر را Deprecated معرفی می‌کند و توصیه می‌کند در پروژه‌های جدید از آن استفاده نشود.

چرا CSS جایگزین تگ‌های نمایشی مانند center شد؟

وظیفه اصلی center مستقیماً به نحوه نمایش و چیدمان محتوا مربوط بود. این یعنی برای ایجاد یک تغییر ظاهری باید یک عنصر اضافی وارد ساختار HTML می‌شد. با گسترش Style Sheetها، چنین تصمیم‌های نمایشی را می‌توان بدون وابسته‌کردن ساختار محتوا به یک تگ مخصوص ظاهر، در CSS کنترل کرد.

این تفکیک یک مزیت عملی مهم دارد: اگر بعداً نحوه تراز، اندازه، فاصله یا چیدمان یک بخش تغییر کند، می‌توان آن را از طریق CSS مدیریت کرد، بدون اینکه برای هر تغییر ظاهری به یک عنصر HTML قدیمی مانند center وابسته باشیم.

به همین دلیل، مسئله امروز این نیست که «چه تگی جای center را گرفته است». center یک جایگزین واحد ندارد؛ روش مناسب به چیزی بستگی دارد که می‌خواهید وسط‌چین کنید. برای متن، یک block، تصویر یا یک layout دو‌محوره ممکن است به CSS متفاوتی نیاز داشته باشیم. در بخش بعد دقیقاً همین انتخاب را انجام می‌دهیم.

جایگزین تگ center چیست؟ انتخاب روش مناسب در CSS

تگ center یک جایگزین واحد در CSS ندارد؛ روش درست به چیزی بستگی دارد که می‌خواهید وسط‌چین کنید. برای متن معمولاً text-align کافی است، برای بعضی عناصر block می‌توان از marginهای خودکار استفاده کرد و در چیدمان‌هایی که کنترل محورهای مختلف اهمیت دارد، Flexbox یا Grid انتخاب مناسب‌تری است.

برای انتخاب سریع می‌توانید از این راهنما استفاده کنید:

هدف	روش مناسب
وسط‌چین کردن متن و محتوای inline	text-align: center
وسط‌چین کردن افقی یک block یا تصویر در شرایط مناسب	margin: 0 auto
کنترل چیدمان و وسط‌چین کردن در محورهای اصلی و عمود	Flexbox
وسط‌چین کردن آیتم‌ها در یک چیدمان Grid	Grid و place-items: center

وسط‌چین کردن متن با text-align: center

اگر هدف شما وسط‌چین کردن متن، لینک یا دیگر محتوای inline داخل یک container است، text-align: center معمولاً مستقیم‌ترین انتخاب است:

				
					<div class="message">
  <p>این متن در مرکز قرار می‌گیرد.</p>
</div>

				
					.message {
  text-align: center;
}

در این مثال، text-align محتوای inline داخل .message را تراز می‌کند؛ خود جعبه .message را درون والد جابه‌جا نمی‌کند. این تفاوت مهم است، چون استفاده از text-align: center روی یک والد به این معنا نیست که خود یک div با عرض محدود نیز در والدش وسط قرار می‌گیرد. مستندات text-align در MDN نیز این property را در زمینه تراز محتوای inline داخل container توضیح می‌دهد.

وسط‌چین کردن block یا تصویر با margin خودکار

برای وسط‌چین کردن افقی یک عنصر block می‌توان در شرایط مناسب دو margin افقی را روی auto قرار داد. مهم این است که عنصر تمام فضای افقی موجود را اشغال نکند و فضای آزادی وجود داشته باشد که مرورگر بتواند بین marginهای دو طرف توزیع کند.

				
					<div class="content-box">
  محتوای نمونه
</div>

				
					.content-box {
  max-width: 600px;
  margin: 0 auto;
}

در یک والد عریض‌تر، max-width اجازه نمی‌دهد این جعبه بیش از ۶۰۰ پیکسل رشد کند و marginهای خودکار فضای باقی‌مانده را بین دو طرف تقسیم می‌کنند؛ در نتیجه جعبه به‌صورت افقی در مرکز قرار می‌گیرد.

همین الگو برای یک تصویر نیز قابل استفاده است:

				
					.article-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

از آنجا که <img> به‌صورت پیش‌فرض یک عنصر inline است، در این الگو آن را با display: block وارد یک رفتار block-level می‌کنیم تا auto margin بتواند در وسط‌چین کردن افقی آن استفاده شود. مستندات margin در MDN نیز استفاده از marginهای خودکار را برای centering افقی پوشش می‌دهد.

بنابراین قاعده دقیق این نیست که «margin: auto حتماً به width مشخص نیاز دارد»؛ مسئله اصلی وجود فضای آزاد در محور افقی و مناسب‌بودن sizing عنصر است.

وسط‌چین کردن افقی و عمودی با Flexbox

وقتی مسئله فقط تراز متن نیست و می‌خواهید جای عناصر را در یک layout کنترل کنید، Flexbox ابزار مناسبی برای چیدمان در یک بُعد در هر لحظه است؛ یعنی روی یک ردیف یا یک ستون کار می‌کند.

				
					<div class="flex-center">
  <button>ادامه</button>
</div>

				
					.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

با flex-direction: row که مقدار پیش‌فرض است، محور اصلی افقی است؛ بنابراین justify-content: center آیتم را روی محور اصلی وسط قرار می‌دهد و align-items: center آن را روی محور عمود تراز می‌کند. راهنمای مفاهیم پایه Flexbox در MDN نیز ماهیت تک‌بعدی Flexbox و وابستگی محورها به flex-direction را توضیح می‌دهد.

اما این رابطه همیشه به معنی «justify-content افقی و align-items عمودی» نیست. جهت محور اصلی را flex-direction تعیین می‌کند. اگر جهت Flexbox به column تغییر کند، محورهای مورد استفاده برای این دو property نیز متناسب با آن تغییر می‌کنند.

همچنین برای مشاهده یک وسط‌چین عمودی واقعی باید در محور مربوطه فضای قابل توزیع وجود داشته باشد. به همین دلیل در مثال بالا min-height برای container در نظر گرفته شده است؛ داشتن یک height صریح، تنها راه ایجاد چنین فضایی نیست.

چه زمانی Grid انتخاب مناسب‌تری است؟

CSS Grid و Flexbox رقیب‌هایی نیستند که همیشه لازم باشد یکی را به‌عنوان «بهترین روش center کردن» انتخاب کنیم. Flexbox اساساً برای چیدمان تک‌بعدی طراحی شده است، در حالی که Grid امکان کنترل ردیف‌ها و ستون‌ها به‌صورت همزمان را فراهم می‌کند.

				
					<div class="grid-center">
  <div class="box">محتوا</div>
</div>

				
					.grid-center {
  display: grid;
  place-items: center;
  min-height: 200px;
}

در این مثال، place-items: center تراز آیتم‌های Grid را در دو محور تنظیم می‌کند. برای مرز مفهومی دقیق‌تر میان این دو مدل چیدمان، راهنمای مقایسه Grid و Flexbox در MDN توضیح می‌دهد که Grid برای کنترل دو‌بعدی ردیف و ستون طراحی شده است.

این به آن معنا نیست که برای وسط‌چین کردن یک عنصر ساده همیشه Grid بهتر از Flexbox است. اگر مسئله شما ذاتاً یک ردیف یا ستون است، Flexbox معمولاً با مدل تک‌بعدی آن هماهنگ‌تر است؛ اگر لازم است ردیف‌ها و ستون‌ها را با هم کنترل کنید یا عنصر موردنظر از قبل در یک Grid قرار دارد، استفاده از Grid طبیعی‌تر خواهد بود.

در نتیجه، هنگام جایگزینی تگ center بهتر است به‌جای جست‌وجوی یک «جایگزین ثابت»، ابتدا سؤال ساده‌تری بپرسید: دقیقاً چه چیزی باید وسط‌چین شود و در کدام محور یا layout قرار دارد؟ پاسخ همین سؤال مشخص می‌کند که text-align، margin خودکار، Flexbox یا Grid انتخاب مناسب‌تری است.

چگونه تگ center را در کدهای قدیمی با CSS جایگزین کنیم؟

برای مهاجرت از تگ center بهتر است آن را به‌صورت مکانیکی با یک property ثابت جایگزین نکنید. ابتدا مشخص کنید چه چیزی باید وسط‌چین شود و سپس CSS متناسب با همان نیاز را روی عنصر یا container مناسب قرار دهید.

نمونه اول: جایگزینی center برای متن

فرض کنید در یک صفحه قدیمی با چنین کدی روبه‌رو شده‌اید:

قبل از مهاجرت

				
					<center>
  <p>به بیت‌آموز خوش آمدید.</p>
</center>

اگر هدف فقط وسط‌چین کردن متن است، دیگر نیازی به عنصر center نداریم. می‌توان ساختار HTML را ساده‌تر کرد:

بعد از مهاجرت

				
					<p class="welcome-message">
  به بیت‌آموز خوش آمدید.
</p>

				
					.welcome-message {
  text-align: center;
}

نتیجه مورد انتظار: متن همچنان به‌صورت افقی وسط‌چین نمایش داده می‌شود، اما تصمیم مربوط به تراز آن از ساختار HTML جدا شده و به CSS منتقل شده است.

برای بررسی نتیجه، صفحه را قبل و بعد از تغییر در مرورگر مقایسه کنید و مطمئن شوید فقط تراز متن تغییر نکرده و فاصله‌ها یا استایل‌های دیگری که ممکن است از CSS پروژه دریافت کند نیز مطابق انتظار باقی مانده‌اند.

نمونه دوم: جایگزینی center برای تصویر

در کدهای قدیمی ممکن است تصویر به این شکل داخل center قرار گرفته باشد:

قبل از مهاجرت

				
					<center>
  <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="راهنمای HTML" title="تگ center در HTML چیست؟ کاربرد، وضعیت فعلی و جایگزین‌های CSS" data-lazy-src="http://html-guide.jpg"><noscript><img decoding="async" src="html-guide.jpg" alt="راهنمای HTML" title="تگ center در HTML چیست؟ کاربرد، وضعیت فعلی و جایگزین‌های CSS"></noscript>
</center>

اگر هدف فقط وسط‌چین کردن خود تصویر باشد، می‌توان center را حذف کرد:

بعد از مهاجرت

				
					<img decoding="async"
  class="centered-image"
  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E"
  alt="راهنمای HTML"
 data-lazy-src="http://html-guide.jpg"
><noscript><img decoding="async"
  class="centered-image"
  src="html-guide.jpg"
  alt="راهنمای HTML"
></noscript>

				
					.centered-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

در این نمونه، display: block امکان استفاده مناسب از marginهای خودکار را فراهم می‌کند و margin: 0 auto فضای آزاد دو طرف تصویر را توزیع می‌کند. max-width: 100% و height: auto نیز کمک می‌کنند تصویر در containerهای باریک‌تر از اندازه اصلی خود بیرون نزند.

نتیجه مورد انتظار: تصویر به‌صورت افقی در container خود وسط قرار می‌گیرد و در عین حال می‌تواند با عرض فضای در دسترس سازگار شود.

الگوی مهاجرت از center در کدهای قدیمی

برای اصلاح تعداد بیشتری از نمونه‌های center در یک پروژه، این ترتیب عملی از جایگزینی کورکورانه مطمئن‌تر است:

محتوای داخل center را بررسی کنید. مشخص کنید متن، تصویر، یک block یا بخشی از یک layout است.
هدف واقعی از center شدن را مشخص کنید. آیا فقط تراز افقی متن مهم است یا موقعیت خود عنصر و شاید تراز عمودی نیز باید کنترل شود؟
روش CSS مناسب را انتخاب کنید. بسته به سناریو از text-align، margin خودکار، Flexbox یا Grid استفاده کنید.
عنصر center را حذف کنید. محتوای اصلی را در ساختار مناسب HTML نگه دارید و CSS را روی همان عنصر یا container منطقی اعمال کنید.

خروجی را در مرورگر بررسی کنید. فقط شبیه‌بودن ظاهری کافی نیست؛ عرض، فاصله‌ها، شکستن متن و رفتار صفحه در اندازه‌های مختلف را نیز کنترل کنید.

در پروژه‌های قدیمی ممکن است یک center چند عنصر متفاوت را دربر گرفته باشد. در چنین حالتی نباید فرض کنید یک text-align: center یا margin: auto می‌تواند بدون بررسی جای تمام رفتار قبلی را بگیرد. هدف مهاجرت فقط حذف یک تگ قدیمی نیست؛ باید رفتار موردنیاز را با ساختار و CSS مناسب بازسازی کنید.

اشتباهات مهم هنگام جایگزینی تگ center

حذف تگ center به‌تنهایی کافی نیست؛ اگر CSS جایگزین برای عنصر یا محور اشتباهی انتخاب شود، ممکن است کد از نظر استاندارد بهتر شده باشد اما نتیجه ظاهری درست نباشد. سه خطای زیر هنگام مهاجرت از کدهای قدیمی بیشتر از بقیه اهمیت دارند.

۱. استفاده از text-align برای وسط‌چین کردن خود یک block

یکی از اشتباهات رایج این است که text-align: center را روی والد قرار دهیم و انتظار داشته باشیم خود یک div یا جعبه دارای عرض محدود در مرکز والد جابه‌جا شود:

				
					<div class="wrapper">
  <div class="box">محتوا</div>
</div>

				
					.wrapper {
  text-align: center;
}

.box {
  max-width: 300px;
}

در این حالت، متن داخل .box می‌تواند وسط‌چین شود، اما خود جعبه ۳۰۰ پیکسلی در مرکز والد قرار نمی‌گیرد؛ text-align برای تراز محتوای inline داخل container است، نه جابه‌جایی خود block box.

اگر هدف وسط‌چین کردن خود جعبه است، می‌توان در این سناریو از marginهای خودکار استفاده کرد:

				
					.box {
  max-width: 300px;
  margin: 0 auto;
}

نشانه خطا: متن داخل جعبه وسط‌چین شده است، اما خود جعبه همچنان در محل قبلی باقی مانده است.

۲. استفاده از margin: auto بدون وجود فضای آزاد

اشتباه دوم این است که تصور کنیم اضافه‌کردن margin: 0 auto همیشه یک block را وسط‌چین می‌کند:

				
					.box {
  margin: 0 auto;
}

اگر عنصر تمام عرض در دسترس را اشغال کند، فضای آزادی باقی نمی‌ماند که marginهای خودکار بین دو طرف تقسیم کنند؛ در نتیجه ممکن است هیچ تغییر قابل‌مشاهده‌ای رخ ندهد.

				
					.box {
  max-width: 600px;
  margin: 0 auto;
}

این کار موجب می‌شود عنوان جدول در صفحه‌های کوچک بهتر دیده شود و کاربر مجبور به زوم کردن نباشد.

در containerی که از ۶۰۰ پیکسل عریض‌تر است، عنصر می‌تواند عرض محدودتری داشته باشد و فضای باقی‌مانده بین marginهای دو طرف توزیع شود.

پس هنگام مهاجرت، به‌جای حفظ یک قاعده مکانیکی مانند «برای margin auto همیشه width بدهید»، عرض واقعی عنصر و فضای آزاد موجود در والد را بررسی کنید.

۳. اشتباه گرفتن محورهای Flexbox

در Flexbox نیز یک خطای رایج این است که همیشه justify-content را «افقی» و align-items را «عمودی» در نظر بگیریم.

در واقع، justify-content روی محور اصلی و align-items روی محور متقاطع اثر می‌گذارد و جهت محور اصلی را flex-direction مشخص می‌کند.

				
					.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

در حالت row، محور اصلی افقی است؛ بنابراین justify-content تراز افقی را کنترل می‌کند.

				
					.container {
  display: flex;
  flex-direction: column;
}

اگر flex-direction به column تغییر کند، محور اصلی عمودی می‌شود و نقش عملی propertyها نیز متناسب با محور جدید تغییر می‌کند.

نشانه خطا: مقدار center را نوشته‌اید، اما عنصر در محوری غیر از چیزی که انتظار داشتید حرکت می‌کند. در چنین شرایطی قبل از تغییر propertyها، ابتدا flex-direction و فضای قابل‌توزیع container را بررسی کنید.

این سه خطا یک اصل مشترک دارند: روش جایگزین را بر اساس رفتار موردنیاز انتخاب کنید، نه صرفاً بر اساس اینکه قبلاً همه‌چیز داخل <center> قرار داشته است. اگر مشخص باشد قرار است متن، خود یک block یا آیتم‌های یک layout وسط‌چین شوند، انتخاب CSS مناسب نیز بسیار ساده‌تر خواهد بود.

پشتیبانی مرورگر از تگ center

با وجود اینکه تگ center در HTML امروزی obsolete است، مرورگرهای اصلی هنوز آن را برای سازگاری با صفحات و کدهای قدیمی پردازش و رندر می‌کنند. بنابراین اگر <center> را در یک فایل HTML اجرا کنید و همچنان اثر وسط‌چین شدن را ببینید، این رفتار عجیب نیست؛ اما پشتیبانی مرورگر به معنی توصیه‌شدن این عنصر برای کد جدید نیست.

بر اساس داده‌های maintained در MDN Browser Compatibility Data، وضعیت تاریخی پشتیبانی از عنصر center به شکل زیر ثبت شده است:

مرورگر	شروع پشتیبانی	وضعیت فعلی	توضیح ضروری
Chrome	1	رندر legacy	عنصر deprecated است و برای کد جدید توصیه نمی‌شود.
Edge	12	رندر legacy	داده BCD از Edge 12 ثبت شده است.
Firefox	1	رندر legacy	پیش از Firefox 4 تفاوتی در DOM interface وجود داشت که برای استفاده معمول این مقاله اهمیتی ندارد.
Safari	≤4	رندر legacy	نخستین نسخه دقیق در داده maintained مشخص نشده است.
Opera	mirror	رندر legacy	BCD مقدار مستقل نسخه آغاز پشتیبانی ارائه نمی‌کند.
Chrome for Android	mirror	رندر legacy	داده موبایل از رکورد متناظر mirror می‌شود.
Safari on iOS	mirror	رندر legacy	BCD نسخه آغاز مستقل ثبت نکرده است.

در این جدول، علامت ≤4 برای Safari عمداً به «Safari 1» یا یک نسخه دقیق‌تر تبدیل نشده است؛ داده منبع فقط نشان می‌دهد پشتیبانی حداکثر از نسخه ۴ یا پیش از آن وجود داشته است. همچنین مقدار mirror به این معناست که MDN Browser Compatibility Data برای آن مرورگر رکورد مستقل نسخه آغاز پشتیبانی ارائه نمی‌کند؛ بنابراین حدس‌زدن یک شماره نسخه دقیق می‌تواند گمراه‌کننده باشد.

پس اگر در یک قالب یا پروژه قدیمی با center روبه‌رو شدید، لازم نیست از کار افتادن ناگهانی آن در مرورگرهای امروزی را انتظار داشته باشید. دلیل جایگزین‌کردن آن با CSS، نبود پشتیبانی مرورگر نیست؛ هدف، نوشتن کد مطابق استاندارد فعلی، قابل‌نگهداری‌تر و متناسب با مدل‌های جدید چیدمان است.

جمع‌بندی

تگ center هنوز ممکن است در کدهای قدیمی دیده شود و مرورگرها نیز معمولاً آن را رندر می‌کنند، اما این موضوع دلیلی برای استفاده از آن در HTML جدید نیست. هنگام اصلاح چنین کدی، مهم‌تر از حذف خود <center> این است که ابتدا مشخص کنید چه چیزی باید وسط‌چین شود و سپس CSS متناسب با همان نیاز را انتخاب کنید.

برای متن و محتوای inline معمولاً text-align: center کافی است؛ برای بعضی عناصر block می‌توان از marginهای خودکار استفاده کرد و وقتی کنترل layout یا دو محور اهمیت دارد، Flexbox یا Grid ابزار مناسب‌تری هستند. بعد از هر مهاجرت نیز خروجی را در اندازه‌های مختلف صفحه بررسی کنید تا حذف تگ قدیمی باعث تغییر ناخواسته در چیدمان نشود.

اگر می‌خواهید HTML را از پایه و به‌صورت ساختارمند یاد بگیرید و بعد با درک درست‌تری وارد CSS شوید، دوره مستر HTML می‌تواند ادامه مسیر یادگیری شما باشد.

سوالات متداول

آیا تگ‌های منسوخ‌شده HTML هنوز در مرورگرها کار می‌کنند؟

بعضی از آن‌ها بله. مرورگرها برای سازگاری با صفحات قدیمی ممکن است عناصری مانند <center> و <font> را همچنان پردازش و نمایش دهند؛ اما کار کردن در مرورگر به معنی استاندارد بودن برای کد جدید نیست. در HTML Living Standard بسیاری از این عناصر در گروه entirely obsolete و non-conforming قرار دارند و نویسندگان نباید در صفحات جدید از آن‌ها استفاده کنند.

تفاوت Deprecated و Obsolete در HTML چیست؟

Deprecated معمولاً به قابلیتی گفته می‌شود که استفاده از آن دیگر توصیه نمی‌شود و قرار است توسعه‌دهندگان به روش جدیدتری مهاجرت کنند. در استاندارد فعلی HTML، بسیاری از عناصر قدیمی یک مرحله جلوتر رفته‌اند و entirely obsolete محسوب می‌شوند؛ یعنی استفاده از آن‌ها در HTML جدید conforming نیست. برای مثال <center> در HTML 4 deprecated بود و در HTML فعلی در فهرست عناصر obsolete قرار دارد.

آیا همه تگ‌های منسوخ‌شده را باید با CSS جایگزین کرد؟

خیر. جایگزین به وظیفه واقعی تگ بستگی دارد. بعضی عناصر قدیمی مانند <font> بیشتر وظیفه نمایشی داشتند و CSS جایگزین مناسبی برای استایل آن‌هاست، اما برخی عناصر باید با یک عنصر HTML معنایی دیگر جایگزین شوند؛ برای مثال <acronym> با <abbr> و <dir> با <ul> جایگزین می‌شود. بنابراین نباید برای همه تگ‌های منسوخ یک نسخه عمومی مانند «فقط از CSS استفاده کنید» در نظر گرفت.

جایگزین تگ center در HTML چیست؟

تگ <center> یک جایگزین ثابت ندارد. اگر هدف وسط‌چین کردن متن یا محتوای inline باشد، معمولاً text-align: center مناسب است؛ برای وسط‌چین کردن بعضی عناصر block می‌توان از marginهای خودکار استفاده کرد و در layoutهای پیچیده‌تر Flexbox یا Grid انتخاب مناسب‌تری هستند. خود <center> نیز برای پروژه‌های جدید توصیه نمی‌شود.

برای جایگزینی تگ strike باید از s استفاده کنیم یا del؟

این موضوع به معنای محتوا بستگی دارد. اگر متن نشان‌دهنده محتوایی است که در یک ویرایش حذف شده است، <del> انتخاب مناسب‌تری است. اگر متن فقط دیگر صحیح، معتبر یا مرتبط نیست و قرار نیست مفهوم «حذف در ویرایش» را منتقل کند، <s> مناسب‌تر است. بنابراین جایگزینی مکانیکی همه <strike>ها با یک تگ واحد درست نیست.

جایگزین تگ font چیست؟

برای ویژگی‌های ظاهری مانند نوع فونت، اندازه و رنگ متن باید از CSS استفاده شود. برای مثال font-family، font-size و color می‌توانند وظایف نمایشی <font> را انجام دهند. بااین‌حال اگر ظاهر متن به دلیل یک معنای خاص مانند عنوان، اهمیت یا تأکید انتخاب شده است، ابتدا باید عنصر HTML معنایی مناسب را مشخص کرد و سپس ظاهر آن را با CSS کنترل کرد.

آیا استفاده از تگ‌های منسوخ‌شده باعث می‌شود سایت در مرورگرهای جدید خراب شود؟

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

آیا باید تمام تگ‌های منسوخ‌شده یک سایت قدیمی را فوراً حذف کنیم؟

نه به‌صورت جایگزینی کورکورانه. ابتدا باید مشخص شود هر تگ چه وظیفه‌ای در ساختار، معنا یا ظاهر صفحه دارد و سپس جایگزین مناسب برای همان سناریو انتخاب شود. بعد از تغییر نیز باید خروجی صفحه، استایل‌ها و رفتار بخش‌های مرتبط بررسی شوند. مخصوصاً در کدهای قدیمی، جایگزینی یک‌به‌یک ممکن است ظاهر یا ساختار صفحه را تغییر دهد.

از کجا بفهمیم یک تگ HTML واقعاً منسوخ شده است؟

بهترین مرجع برای وضعیت فعلی عناصر HTML، HTML Living Standard است. در بخش Obsolete features می‌توان عناصری را دید که entirely obsolete هستند و نباید توسط نویسندگان صفحات جدید استفاده شوند. منابعی مانند MDN نیز وضعیت Deprecated یا Obsolete عناصر، جایگزین‌های پیشنهادی و اطلاعات سازگاری مرورگرها را به‌شکل خواناتری ارائه می‌کنند.

ابوالفضل عنایتی

بنیان‌گذار بیت‌آموز · مدرس طراحی سایت و سئو

ابوالفضل عنایتی، بنیان‌گذار بیت‌آموز و مدرس طراحی وب است و از سال ۱۳۹۶ در حوزه تکنولوژی شروع و در حال حاضر در زمینه طراحی سایت، وردپرس، سئو و آموزش مهارت‌های وب فعالیت می‌کند. تمرکز او در بیت‌آموز بر تولید آموزش‌های کاربردی و پروژه‌محور برای ورود حرفه‌ای به دنیای وب است.

تگ center در HTML چیست؟ کاربرد، وضعیت فعلی و جایگزین‌های CSS