منسّق HTML

كيفية تنسيق HTML

1. الصق شيفرة HTML، أو انقر فتح ملف لتحميل ملف .html أو .htm (حتى 10 MB).
2. اختر المسافة البادئة (مسافتان أو 4 مسافات أو علامة جدولة)، وحدد ما إذا كنت تريد لفّ الأسطر عند 80 أو 120 حرفًا.
3. فعّل إزاحة و إن أردت إزاحتهما داخل <html>، وحذف التعليقات لإزالة تعليقات <!-- … -->.
4. انقر تنسيق (تجميل) للحصول على شيفرة مقروءة، أو ضغط للحصول على أصغر نسخة آمنة.
5. انسخ النتيجة أو نزّلها. يعرض سطر الحالة الحجم قبل المعالجة وبعدها.

تُعرض النتيجة كنص عادي في مربع الإخراج. لا تُعرض شيفرة HTML ولا تُنفَّذ في هذه الصفحة أبدًا، فلا تستطيع السكربتات الموجودة في الشيفرة التي تلصقها فعل أي شيء.

التجميل: HTML مقروء بمسافات بادئة متسقة

يستخدم تنسيق (تجميل) مكتبة js-beautify، وهي المنسّق الذي تعتمد عليه محررات شيفرة كثيرة:

• توضع العناصر الكتلية في أسطر مستقلة وتُزاح بحسب عمق التداخل، بينما تبقى العناصر السطرية مثل <a> و<b> و<span> داخل النص؛
• يُنسَّق محتوى <script> و<style> بوصفه JavaScript وCSS؛
• يُترك <pre> و<textarea> كما كُتبا تمامًا، لأن المسافات فيهما ظاهرة للمستخدم؛
• تُختصر الأسطر الفارغة المتتالية إلى سطر واحد؛
• عند تحديد عرض للّف، تُلفّ أسطر النص الطويلة وقوائم السمات الطويلة.

لا يصلح التجميل الترميز المعطوب: فعنصر <div> غير المغلق يبقى غير مغلق، والمسافات البادئة التي تليه تكشف موضع المشكلة.

الضغط: HTML أصغر دون تغيير الصفحة

يعتمد ضغط نهجًا متحفظًا عن قصد:

• تصبح سلاسل المسافات وعلامات الجدولة وفواصل الأسطر في النص مسافة واحدة، تمامًا كما يعرضها المتصفح؛
• تُحذف المسافات المجاورة للعناصر الكتلية وعناصر الترويسة (<div> و<p> و<li> و<td> و<meta> و<br>…)، لأنها لا تُعرض أبدًا؛
• تُحفظ مسافة واحدة بين العناصر السطرية، فلا يتحول <b>big</b> <i>world</i> إلى «bigworld»؛
• تُحذف التعليقات عند تفعيل حذف التعليقات، باستثناء التعليقات الشرطية (<!--[if IE]>) والتعليقات التي تبدأ بـ <!--!؛
• لا يُمسّ محتوى <script> و<style> و<pre> و<textarea> أبدًا، وتُحفظ قيم السمات كما هي بما فيها علامات الاقتباس.

لا يحذف الضغط وسوم الإغلاق الاختيارية، ولا يعيد كتابة السمات، ولا يضغط JavaScript وCSS المضمّنين: فهذه التحسينات توفر قليلًا إضافيًا لكنها قد تعطب الصفحات. وفي معظم الصفحات، يوفر ضغط HTTP (gzip أو Brotli) أكثر بكثير مما يوفره أي أداة ضغط، لذا يكون الضغط أكثر فائدة لشيفرة HTML المضمّنة في رسائل البريد الإلكتروني أو القوالب أو سلاسل JavaScript.