الصق HTML وشاهده يُعرض مباشرة بأي عرض شاشة - ثم نسّقه أو اضغطه أو افحصه للبحث عن المشاكل.
اضغط على فحص للحصول على عدد العناصر ومخطط العناوين وقائمة بالمشاكل في الترميز.
تظهر مخرجات وحدة التحكم من المعاينة هنا عند السماح بتشغيل البرامج النصية.
قالب بريد إلكتروني، أو مقتطف من تذكرة دعم، أو تقرير مُصدَّر: أحيانًا تحتاج فقط إلى رؤية شكل جزء من HTML. الصقه وسيُعرض أثناء الكتابة داخل إطار معزول وبعرض الشاشة الذي تختاره. وبجانب المعاينة يمكنك ترتيبه أو تصغيره أو تشغيل برامجه النصية مع وحدة تحكم، ورؤية قائمة بما هو خاطئ فعلًا في الترميز.
قد يحتوي HTML الملصق على برامج نصية ونماذج وروابط لم تكتبها أنت. تعمل المعاينة داخل iframe بخاصية sandbox وبأصل معتم خاص بها، فلا يستطيع شيء بداخلها قراءة ملفات تعريف الارتباط لهذا الموقع أو جلستك، ولا إرسال بيانات نيابة عنك، ولا نقل هذه الصفحة إلى عنوان آخر. وتبقى البرامج النصية متوقفة حتى تشغّلها.
يقرأ الترميز بمحلل HTML قياسي ولا يبلّغ إلا عمّا رآه: وسوم فُتحت ولم تُغلق، ووسوم إغلاق بلا وسم فتح، وصور بلا نص بديل، ومعرّفات id مكررة، وروابط تفتح علامة تبويب جديدة دون rel="noopener"، ومستويات عناوين متخطاة، وموارد تُحمَّل عبر http://، وفي الصفحة الكاملة غياب doctype أو title أو lang أو وسم viewport.
يبلغ عن الأخطاء لا عن الأسلوب. وسوم الإغلاق التي يسمح معيار HTML بحذفها، مثل </p> و</li> و</td> و</tr> و</option>، لا تظهر أبدًا على أنها غير مغلقة، والعناصر الفارغة مثل <br> و<img> و<input> لا تحتاج إلى وسم إغلاق. السمة الفارغة alt="" تُحسب نصًا بديلًا، وهذا صحيح للصورة الزخرفية. الرابط الذي يحمل target="_blank" يمر مع rel="noopener" أو rel="noreferrer". الرابط العادي http:// داخل <a href> لا يُعد غير آمن؛ فقط الموارد التي تُحمَّل مثل الصور والبرامج النصية وأوراق الأنماط وإطارات iframe. الرجوع إلى مستوى عنوان أعلى (من h4 إلى h2) لا بأس به؛ يُبلَّغ فقط عن القفز إلى الأسفل متخطيًا مستوى (من h2 إلى h4). فحوص doctype وtitle وlang وviewport لا تعمل إلا إذا كان النص الملصق صفحة كاملة، أي فيه doctype أو وسم html أو head أو body، لذلك لا يُحاسَب جزء من رسالة بريد أو مقتطف من نظام إدارة محتوى عليها.
اعرضها أولًا بعرض الهاتف (375 px) لأن كثيرين يفتحون بريدهم على الهاتف، ثم بعرض الجهاز اللوحي (768 px) وسطح المكتب (1280 px). اترك البرامج النصية متوقفة: تطبيقات البريد لا تشغّل JavaScript، لذلك المعاينة دونها أقرب إلى ما يراه القارئ. استخدم روابط صور مطلقة تبدأ بـ https:// لأن المعاينة وتطبيق بريد المستلم لا يريان الملفات على حاسوبك. التصغير يحذف التعليقات العادية لكنه يُبقي التعليقات الشرطية التي تبدأ بـ <!--[if مثل <!--[if mso]> ... <![endif]-->. ولا يُبقي وسم الإغلاق <!--<![endif]--> في نمط <!--[if !mso]><!-->، فلا تصغّر قالبًا يستخدمه وإلا فقد يخفي Outlook كل ما بعده. المعاينة عرض متصفح؛ أما Outlook الكلاسيكي على Windows فيرسم البريد بمحرك Word، لذا أرسل لنفسك رسالة تجريبية هناك قبل أي إرسال كبير.
تتم المعاينة والتجميل والتصغير في متصفحك. وحده تقرير الفحص يرسل الترميز إلى الخادم، حيث يُحلَّل ويُعاد في الاستجابة نفسها: لا يُكتب شيء على القرص ولا يُسجَّل، وسجلات الاستخدام تحفظ الأعداد فقط.
البرامج النصية متوقفة افتراضيًا لأن الكود الملصق غير موثوق. فعّل "تشغيل البرامج النصية" فتُعاد المعاينة مع تفعيل JavaScript، وهي لا تزال داخل البيئة المعزولة، وتظهر مخرجات وحدة التحكم أسفل المعاينة.
تُبنى المعاينة من النص الملصق، لا من جهازك ولا من خادمك، لذا يُبحث عن مسار نسبي مثل images/logo.png في هذا الموقع ولا يُعثر عليه. استخدم عناوين URL مطلقة، أو أضف وسم <base href="..."> يشير إلى المكان الحقيقي للملفات.
يعيد فقط ضبط المسافات البادئة بين الوسوم ويترك محتوى pre وtextarea وscript وstyle كما هو. قد تتغير المسافات بين العناصر السطرية قليلًا أحيانًا، لذا راجع المعاينة بعد التنسيق.
يقبل تقرير الفحص ما يصل إلى 1,000,000 حرف ويعرض 200 مشكلة كحد أقصى. وتتوقف المعاينة المباشرة مؤقتًا بعد 200,000 حرف لتبقى الكتابة سلسة؛ اضغط تحديث أو Ctrl+Enter لتحديثها.
نعم. الصق كود HTML للرسالة أو افتح ملف .html، وبدّل العرض إلى هاتف (375 px) وسطح المكتب (1280 px) لترى التخطيطين، ثم اضغط فحص لتجد الصور التي بلا نص بديل والموارد المحمّلة عبر http:// غير المشفّر. تستخدم المعاينة محرك متصفحك، بينما لكل برنامج بريد محركه الخاص وكثير منها يتجاهل جزءًا من CSS، لذا فهي تُظهر تقريبًا ما يعرضه بريد الويب في المتصفح، لا ما سيعرضه كل صندوق وارد بدقة. برامج البريد لا تشغّل JavaScript، فاترك تشغيل البرامج النصية متوقفًا. وقبل الإرسال الفعلي أرسل رسالة تجريبية إلى البرامج التي يستخدمها قرّاؤك.
أكثر أمانًا من فتحه مباشرة. يحمّل زر فتح ملف الملف في المحرر داخل متصفحك، ولا يُرسل شيء إلى الخادم إلا إذا ضغطت فحص. تعمل المعاينة داخل إطار معزول تكون فيه البرامج النصية وإرسال النماذج متوقفة، فلا تستطيع الصفحة تشغيل شيفرة أو إرسال نموذج أو الوصول إلى ملفات تعريف الارتباط لهذا الموقع. لكن الصور وأوراق الأنماط ذات عنوان http(s) كامل تُحمَّل، لذا قد يعرف المرسل أن الملف فُتح. اقرأ الشيفرة أولًا، واترك تشغيل البرامج النصية متوقفًا، ولا تكتب كلمة مرور أبدًا في صفحة أُرسلت إليك.
يقرأ زر فتح ملف الملف دائمًا بترميز UTF-8 ويتجاهل أي وسم <meta charset> بداخله. الصفحة المحفوظة بترميز Windows-1256 أو ISO-8859-6، وهو أمر شائع في محررات Windows القديمة وملفات التصدير، تخزن الحروف العربية ببايتات ليست UTF-8 صالحًا، فيظهر كل حرف منها كحرف الاستبدال �. افتح الملف في محررك، واحفظه مجددًا بترميز UTF-8 (المفكرة: حفظ باسم، الترميز UTF-8؛ VS Code: انقر على الترميز في شريط الحالة ثم Save with Encoding)، ثم افتحه هنا مرة أخرى. أو افتح الملف في متصفحك، واعرض مصدره والصقه هنا، لأن المتصفح فك ترميزه بالفعل باستخدام charset الصفحة نفسها.
لا تسمح البيئة المعزولة أبدًا بإرسال النماذج أو النوافذ المنبثقة، حتى مع تفعيل تشغيل البرامج النصية، لذلك لا يرسل زر الإرسال شيئًا، وتُحظر الروابط التي تحمل target="_blank" واستدعاءات window.open(). وهذا يمنع الصفحة الملصقة من إرسال بيانات أو فتح مواقع أخرى. تُفتح الروابط العادية داخل إطار المعاينة، والمواقع التي ترفض العرض داخل إطار تظهر فارغة أو مرفوضة. لفحص نموذج، اقرأ action وmethod والحقول في المصدر، كما يسرد زر فحص كل رابط target="_blank" بلا rel="noopener". واختبر الإرسال الحقيقي على خادم التطوير الخاص بك.