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

charset در HTML

پیوند فاویکون به مرورگر می‌گوید کدام تصویر کوچک روی زبانه نشان داده شود. charset سؤال بنیادی‌تری را جواب می‌دهد: مرورگر بایت‌های فایل HTML را چگونه به حروفی تبدیل کند که انسان بخواند؟ وقتی encoding غلط باشد، فارسی، عربی، لاتینِ اعراب‌دار، چینی و ایموجی اغلب به mojibake تبدیل می‌شوند — دنباله‌های درهم که حتی اگر بقیهٔ نشانه‌گذاری درست باشد خراب به نظر می‌رسند.

charset یعنی چه؟

مجموعهٔ نویسه (و encoding آن) بایت‌های روی دیسک را به نویسه نگاشت می‌کند. فایل‌های HTML جریان بایت‌اند. بدون قاعدهٔ رمزگشایی درست، مرورگر ممکن است اشتباه حدس بزند. اعلام UTF-8 در head عادت مدرن وب است که متن چندزبانه و نمادها را در ویرایشگر، سرور و مرورگر قابل‌اعتماد نگه می‌دارد.

پاسخ مستقیم

<meta charset="UTF-8"> را نزدیک بالای head بگذارید — ایده‌آل در هزار و بیست‌وچهار بایت اول فایل تا مرورگر زود encoding را یاد بگیرد. UTF-8 encodingای است که تقریباً برای همهٔ صفحات جدید باید به کار ببرید. خود فایل HTML را هم در ویرایشگر به‌صورت UTF-8 ذخیره کنید. اعلام و ذخیره باید یکی باشند؛ یکی بدون دیگری همچنان نویسهٔ خراب می‌سازد.

اعلام، ذخیره، و زبان — کارها متفاوت

📊 encoding در برابر زبان در برابر title

قطعه	کار
meta charset	چگونه بایت‌ها به نویسه رمزگشایی شوند
ذخیرهٔ ویرایشگر به‌صورت UTF-8	چگونه ابزار آن بایت‌ها را روی دیسک بنویسد
html lang	محتوای صفحه به کدام زبان انسانی است
متن title	واژه‌های برچسب زبانه (کلید encoding نیست)

دموی چندزبانهٔ UTF-8

یک سند کوتاه charset را در عمل نشان می‌دهد. meta اول در head می‌آید، بعد title، بعد متن بدنه که چند خط را قاطی می‌کند.

charset با UTF-8 در head

html

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Charset demo</title>
</head>
<body>
<p>Hello — سلام — مرحبا — 你好 — 🙂</p>
</body>
</html>

خواندن نمونه

<meta charset="UTF-8"> زود در head است، قبل از بیشتر محتوا
lang="en" زبان اصلی را برای ابزارها نام می‌برد؛ جایگزین charset نیست
پاراگراف لاتین، فارسی، عربی، چینی و ایموجی دارد — همه زیر UTF-8 وقتی فایل درست ذخیره شده باشد خوب‌اند
اگر آن نویسه‌ها خراب شوند، قبل از بازنویسی ساختار HTML، encoding ذخیره را چک کنید

چرا charset را زود بگذارید؟

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

Mojibake: نشانهٔ ناسازگاری

Mojibake شبیه نقطه‌گذاری تصادفی، باقیماندهٔ لاتین، یا نویسهٔ جایگزین جایی است که باید واژهٔ واقعی باشد. علت‌های رایج: اعلام UTF-8 در حالی که فایل با encoding قدیمی ذخیره شده، یا حذف charset و امید به حدس درست مرورگر. جفت encoding را درست کنید — meta به‌علاوهٔ ذخیرهٔ فایل — نه این‌که برای همیشه حروف را از نو تایپ کنید.

lang همان charset نیست

ویژگی lang روی html (و گاهی روی عنصرهای خاص) به خوانندهٔ صفحه، خط‌شکنی و ابزارهای جستجو کمک می‌کند زبان را بفهمند. charset رمزگشایی بایت را انجام می‌دهد. معمولاً هر دو را می‌خواهید: lang برای هویت زبان، charset برای encoding. چون lang="fa" یا lang="ar" گذاشته‌اید charset را حذف نکنید.

سرورها و دیپلوی واقعی (یادداشت مبتدی)

سرورهای production می‌توانند charset را در هدر HTTP از نوع Content-Type هم بفرستند. برای این دوره اول عادت meta HTML و ذخیرهٔ UTF-8 را مسلط شوید. وقتی سایت زنده با meta شما مخالف است، از مربی بخواهید هدرها را چک کند — اما بیشتر مشکلات تمرین محلی، encoding ذخیرهٔ ویرایشگر یا meta گم‌شده است.

تمرین در ویرایشگر

صفحه‌ای با <meta charset="UTF-8"> در بالای head بسازید.
جمله‌ای با حروف غیرانگلیسی و یک ایموجی اضافه کنید.
نوار وضعیت ویرایشگر را تأیید کنید که فایل UTF-8 است، بعد ذخیره کنید.
صفحه را در مرورگر باز کنید و ببینید نویسه‌ها درست‌اند.
(اختیاری، با احتیاط) یک کپی را با encoding قدیمی ذخیره کنید، دوباره باز کنید و mojibake را ببینید — بعد UTF-8 را برگردانید تا حالت شکست را بشناسید.

اشتباهات رایج

فراموش meta charset و تکیه بر شانس مرورگر
ذخیرهٔ فایل با encoding قدیمی در حالی که UTF-8 اعلام شده
گذاشتن metaی charset خیلی دیر در head بزرگ
قاطی کردن charset با عنوان قابل‌دید صفحه یا با lang
فرض این‌که مشکل ایموجی همیشه «باگ HTML» است وقتی encoding علت واقعی است
درست کردن mojibake با حذف lang به‌جای اصلاح ذخیرهٔ UTF-8 + meta

خلاصه

charset اعلام می‌کند بایت‌های فایل HTML چگونه به نویسه تبدیل شوند
برای تقریباً همهٔ صفحات جدید UTF-8 به کار ببرید و meta charset را زود در head بگذارید
فایل را UTF-8 ذخیره کنید تا اعلام و encoding دیسک یکی شوند
lang زبان را نام می‌برد؛ charset encoding را — کار متفاوت
Mojibake معمولاً یعنی ناسازگاری encoding، نه شکست مرموز تگ

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

آماده شروع

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

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

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

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

زبان