كيفية الاستخدام
- الصق HTML في مربع الإدخال، أو افتح ملف .html، أو جرّب المثال.
- اختر تجميلًا للحصول على ترميز ذي مسافات بادئة ومقروء أو ضغطًا للحصول على ناتج مضغوط.
- عند التجميل، اختر مسافتين أو 4 مسافات أو علامات تبويب، وحدد ما إذا كنت تريد الاحتفاظ بالتعليقات.
- انسخ الناتج أو نزّله كملف .html.
كيف تعمل الأداة
تقرأ الأداة HTML بمحلل مرن يشبه متصفح الويب إلى حد كبير، ثم تعيد كتابته. لا تعرض الأداة الإدخال أبدًا، لذا لا يمكن تشغيل البرامج النصية في الكود الملصق ولا يُحمَّل أي شيء من الويب.
تعمل صيغة التجميل على وضع كل عنصر على مستوى الكتلة (div وp وul وli وsection وtable ...) في سطر مستقل مع إزاحة حسب عمق التداخل. تبقى النصوص والعناصر السطرية مثل a وb وem وspan وcode وimg وbr معًا في سطر واحد، فلا تتغير المسافات بين الكلمات والروابط بطريقة تؤثر على الصفحة المعروضة. تتحول المسافات المتتالية وفواصل الأسطر في النص إلى مسافة واحدة، وهذا ما تفعله المتصفحات عند العرض على أي حال.
يُنسخ محتوى العناصر pre وtextarea وscript وstyle كما هو تمامًا، بما في ذلك المسافات البيضاء وأي رموز < أو >. لا تحصل العناصر الفارغة مثل br وimg وinput وmeta وlink على وسم إغلاق أبدًا. تبقى الوسوم ذاتية الإغلاق مثل <path /> في SVG المضمّن ذاتية الإغلاق.
يعمل التصغير على دمج المسافات البيضاء في النص إلى مسافات مفردة، وإزالة المسافات البيضاء المجاورة للعناصر الكتلية، وتوحيد المسافات بين السمات، وإذا كان خيار «الاحتفاظ بالتعليقات» متوقفًا يزيل التعليقات. تُحفظ التعليقات الشرطية دائمًا.
لا تصلح الأداة HTML غير الصالح، ولا تضيف وسومًا ناقصة، ولا تعيد ترتيب السمات، ولا تصغّر أكواد CSS وJavaScript داخل عنصري style وscript. تُغلق العناصر التي تُركت مفتوحة في نهاية العنصر الأب، ويُحتفظ بوسم الإغلاق الذي لا يقابله وسم فتح كما هو.
أمثلة
قراءة الترميز الناتج
يُخرج نظام إدارة محتوى قالبًا على شكل سطر واحد طويل. تعرض صيغة التجميل بمسافتين عناصر التنقل وعناصر القائمة والمحتوى الرئيسي كشجرة مُزاحة، بينما تبقى عبارة «Prices include <strong>VAT</strong>.» في سطر واحد مقروء.
تحضير قالب بريد إلكتروني
صغّر بريدًا إلكترونيًا بتنسيق HTML مع إيقاف التعليقات لتقليل حجمه. تُترك كتلة <pre> التي تحتوي على جدول أسعار ووسم <style> المضمّن كما كانت تمامًا.
التحقق من البنية
عندما يكون وسم الإغلاق </div> مفقودًا، يعرض الناتج المنسق العناصر التالية بإزاحة مستوى واحد أعمق من اللازم، مما يسهّل معرفة المكان الذي كان ينبغي أن ينتهي عنده العنصر.
الأسئلة الشائعة
هل سيغيّر التجميل مظهر صفحتي؟
في جميع الحالات تقريبًا لا. المسافات البيضاء داخل عناصر الكتلة تُدمج وتُنقل إلى فواصل أسطر، وتتجاهلها المتصفحات. يبقى النص والعناصر المضمنة على السطر نفسه، ولا يتم المساس بعناصر pre وtextarea وscript وstyle. الصفحات التي تعتمد على CSS white-space: pre في عناصر عادية هي الاستثناء.
هل يضغط CSS وJavaScript داخل الصفحة؟
لا. يُحتفظ بمحتوى script وstyle كما هو تمامًا حتى لا يتعطل. استخدم منسق CSS لضغط ورقة الأنماط بشكل منفصل.
هل من الآمن لصق HTML من مصدر غير معروف؟
نعم. يُعامل الإدخال كنص فقط ولا يُدرج أبدًا في الصفحة، لذلك لا تعمل برامجه النصية ولا تُحمَّل صوره أو روابطه.
هل يتحقق من صحة HTML؟
لا. إنه متساهل عن قصد وينسّق الترميز المكسور بدل رفضه. تُحتفظ بوسوم الإغلاق غير المتطابقة، فيساعدك الإزاحة على اكتشافها، لكن لا تُنتج قائمة أخطاء.
الخصوصية
تتم معالجة HTML الخاص بك في متصفحك فقط ولا يُعرض أو يُرفع أبدًا. لا يتم تخزين أي شيء ولا يُدرج في التحليلات.