جاري التحميل...

ترميز الأحرف في HTML

روابط الفافيكون تخبر المتصفح أي صورة صغيرة يعرضها على التبويب. ترميز الأحرف (charset) يجيب عن سؤال أكثر أساسية: كيف يحوّل المتصفح بايتات ملف HTML إلى حروف يقرأها الناس؟ عندما يكون الترميز خاطئًا، غالبًا ما تصبح الفارسية والعربية واللاتينية ذات التشكيل والصينية والرموز التعبيرية mojibake — تسلسلات مشوّهة تبدو مكسورة حتى لو كان باقي الترميز سليمًا.

ماذا يعني charset

مجموعة الأحرف (وترميزها) تربط البايتات على القرص بالأحرف. ملفات HTML هي تيارات بايتات. بلا قاعدة فك ترميز صحيحة قد يخمن المتصفح خطأً. إعلان UTF-8 في head عادة الويب الحديثة التي تجعل النص متعدد اللغات والرموز موثوقًا عبر المحرّرات والخوادم والمتصفحات.

إجابة مباشرة

ضع <meta charset="UTF-8"> قرب أعلى head — مثاليًا ضمن أول 1024 بايت من الملف حتى يتعلم المتصفح الترميز مبكرًا. UTF-8 هو الترميز الذي ينبغي استخدامه تقريبًا لكل الصفحات الجديدة. احفظ ملف HTML نفسه أيضًا كـ UTF-8 في محرّرك. يجب أن يتفق الإعلان وحفظ الملف؛ أحدهما دون الآخر ما زال ينتج أحرفًا مكسورة.

الإعلان والحفظ واللغة — مهام مختلفة

📊 الترميز مقابل اللغة مقابل العنوان

القطعة	المهمة
meta charset	كيف تُفك بايتات إلى أحرف
حفظ المحرّر كـ UTF-8	كيف تكتب أداتك تلك البايتات على القرص
html lang	بأي لغة بشرية محتوى الصفحة
نص title	كلمات تسمية التبويب (ليست مفتاح ترميز)

عرض UTF-8 متعدد اللغات

مستند قصير واحد يُظهر charset عمليًا. يأتي الـ meta أولًا في head، ثم عنوان، ثم نص الجسم الذي يمزج أنظمة كتابة.

UTF-8 charset في 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

لماذا نضع charset مبكرًا

تبدأ المتصفحات قراءة الملف من الأعلى. إذا ظهر charset فقط بعد كتلة ضخمة من النص أو السكربتات، فقد تُفسَّر بعض الأحرف بالفعل بتخمين خاطئ. أبقِ الـ meta قرب بداية head. في رؤوس البداية من الجلسات السابقة وُضع charset عمدًا أولًا لهذا السبب.

Mojibake: عرض عدم التطابق

يبدو mojibake كعلامات ترقيم عشوائية أو بقايا لاتينية أو أحرف استبدال حيث يجب أن تكون كلمات حقيقية. أسباب شائعة: إعلان UTF-8 بينما حُفظ الملف بترميز قديم، أو حذف charset والأمل أن يخمن المتصفح صح. أصلح زوج الترميز — الـ meta مع حفظ الملف — بدل «إصلاح» الحروف بإعادة الكتابة إلى ما لا نهاية.

lang ليس charset

سمة lang على html (وأحيانًا على عناصر محددة) تساعد قارئات الشاشة والوصل والبحث على فهم اللغة. Charset يتولى فك ترميز البايتات. عادة تريد الاثنين: lang لهوية اللغة، وcharset للترميز. لا تحذف charset لأنك ضبطت أصلًا lang="fa" أو lang="ar".

الخوادم والنشر الحقيقي (ملاحظة للمبتدئين)

يمكن لخوادم الإنتاج أيضًا إرسال charset في ترويسة Content-Type عبر HTTP. في هذه الدورة أتقن أولًا عادة meta HTML وحفظ UTF-8. عندما يختلف موقع حي عن الـ meta، اطلب من مرشد فحص الترويسات — لكن معظم مشاكل التدريب المحلي هي ترميز حفظ المحرّر أو وسم meta ناقص.

تمرين في محرّرك

أنشئ صفحة بـ <meta charset="UTF-8"> في أعلى head.
أضف جملة تتضمن حروفًا غير إنجليزية ورمزًا تعبيريًا واحدًا.
تأكد أن شريط حالة المحرّر يقول إن الملف UTF-8، ثم احفظ.
افتح الصفحة في متصفح وتأكد أن الأحرف تبدو صحيحة.
(اختياري، بحذر) احفظ نسخة بترميز قديم، أعد الفتح، ولاحظ mojibake — ثم أعد UTF-8 لتعرف نمط الفشل.

أخطاء سهلة

نسيان meta charset والاعتماد على حظ المتصفح
حفظ الملف بترميز قديم مع إعلان UTF-8
وضع meta charset متأخرًا جدًا في head ضخم
الخلط بين charset وعنوان الصفحة الظاهر أو مع lang
افتراض أن مشاكل الرموز التعبيرية دائمًا «أخطاء HTML» بينما الترميز هو السبب الحقيقي
إصلاح mojibake بحذف lang بدل تصحيح حفظ UTF-8 + الـ meta

ملخص

Charset يعلن كيف تُفك بايتات ملف HTML إلى أحرف
استخدم UTF-8 تقريبًا لكل الصفحات الجديدة وضع meta charset مبكرًا في head
احفظ الملف كـ UTF-8 حتى يتطابق الإعلان وترميز القرص
lang يسمي اللغة؛ charset يسمي الترميز — مهمتان مختلفتان
Mojibake عادة يعني عدم تطابق ترميز، لا فشلًا غامضًا لوسم

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى

اللغة