منسّق HTML ومجمّله

الصق شفرة HTML غير المنسّقة على اليسار واحصل على نسخة منظمة بمسافات بادئة صحيحة على اليمين. تدعم الأداة جميع عناصر HTML5 وتحافظ على البنية الأصلية للمستند.

الميزات

محاذاة وسوم HTML تلقائيًا
مسافة بادئة قابلة للتخصيص
الإبقاء على التعليقات أو حذفها
تمييز الصيغة

طريقة الاستخدام

1. الصق شفرة HTML في مربع الإدخال على اليسار.

2. انقر على تنسيق لتجميلها بمسافات بادئة صحيحة.

3. انقر على تصغير لإزالة المسافات الزائدة.

4. انسخ النتيجة أو حمّلها من اللوحة اليمنى.

حول هذه الأداة

غالبًا ما تصل شيفرة HTML المنسوخة من المتصفح أو من نظام إدارة محتوى أو من بناء مصغّر في سطر واحد غير مقروء. يعيد هذا المنسّق إزاحتها بحيث يكون كل عنصر متداخل أعمق بمستوى واحد من أصله، فيسهل رؤية البنية ووسوم الإغلاق الناقصة والعناصر في غير مكانها. يتعرف على العناصر الفارغة مثل <br> و<img> و<input> التي لا تُغلق أبدًا، ويترك محتوى <pre> و<textarea> و<script> و<style> كما هو تمامًا لأن المسافات داخلها ذات معنى. اختر مسافتين أو أربع مسافات أو علامات جدولة، ثم انسخ النتيجة أو نزّلها. أما التصغير فيفعل العكس، إذ يزيل التعليقات ويختصر المسافات بين الوسوم لتقليل وزن الصفحة في بيئة الإنتاج.

الأسئلة الشائعة

هل سيغيّر التنسيق مظهر صفحتي؟
في معظم الحالات لا. تتجاهل المتصفحات المسافات بين العناصر الكتلية. أما بين العناصر السطرية، مثل رابطين أو وسمي span متجاورين، فإضافة فاصل سطر أو حذفه قد يغيّر التباعد بمقدار مسافة واحدة، لذا راجع الشيفرة الغنية بالعناصر السطرية بعد التنسيق.
لماذا لا يُعاد تنسيق محتوى <pre> و<script>؟
تُعرض المسافات داخل <pre> و<textarea> كما كُتبت تمامًا، وتغيير الإزاحة داخل <script> أو <style> قد يغيّر الشيفرة أو السلاسل النصية. لذلك تُحفظ هذه الكتل حرفيًا.
هل يصلح المنسّق شيفرة HTML غير الصالحة؟
لا يصلح الشيفرة ولا يتحقق من صحتها. هو يزيح ما يتلقاه، ما يجعل مشكلات مثل الوسوم غير المغلقة ظاهرة غالبًا. استخدم مدقق W3C للتحقق من المطابقة للمعايير.
ماذا يزيل التصغير؟
يزيل تعليقات HTML والمسافات غير الضرورية بين الوسوم، ويُبقي المحتوى المعتمد على المسافات مثل النص داخل <pre>. في المواقع المنشورة، يوفّر ضغط الخادم بـ gzip أو Brotli أكثر مما يوفره التصغير وحده.
هل يمكنني تنسيق Vue أو Angular أو صيغ القوالب؟
تُحفظ تعبيرات القوالب مثل {{ name }} كنص، وتُزاح وسوم المكوّنات كعناصر عادية. أما التوجيهات المعقدة التي تحتوي أقواسًا زاوية داخل قيم السمات فقد تربك منسّق HTML بسيطًا، لذا راجع الناتج.

أدوات ذات صلة