تجميل وتصغير HTML - نسّق HTML عبر الإنترنت مجاناً

الصق أي كود HTML — حتى الناتج المصغَّر في سطر واحد من خط إنتاج الإنشاء — وتعيد الأداة تنسيقه بمسافات بادئة مناسبة، ووسم واحد في كل سطر، ومسافات بيضاء متناسقة. اختر مسافة بادئة من 2 أو 4 أو 8 مسافات. الناتج جاهز لإسقاطه في محرِّرك أو لصقه في تعليق مراجعة الكود.

يوسّع التنسيق الجميل شيفرة HTML لتسهيل قراءتها: كل وسم في سطر منفصل، والعناصر المتداخلة بمسافات بادئة، مع الحفاظ على الأسطر الفارغة بين الأقسام. أما التصغير فيزيل التعليقات ويضغط سلاسل المسافات ويحذف فواصل الأسطر ليصبح الملف بحجم أقل من البايتات. استخدم التنسيق الجميل للتحرير والمراجعة، والتصغير للنشر في بيئة الإنتاج.

لا — يكتشف js-beautify (المحرك الذي يعمل خلف الكواليس) كتل البرامج النصية والأنماط وينسّق محتوياتها بقواعد JS أو CSS المناسبة، لذا تبقى البرامج النصية المضمّنة صالحة وتبقى أوراق الأنماط قابلة للقراءة. تتم معالجة الوسوم ذاتية الإغلاق والعناصر الفارغة والسمات ذات النطاقات (svg:xmlns، xlink:href) بشكل صحيح.

تتعامل الأداة جيداً مع HTML العادي والقوالب الشبيهة بـ HTML، لكن JSX الخالص (تعبيرات الأقواس المعقوفة، والأجزاء، ووسوم المكوّنات التي تبدأ بحرف كبير) يُحلَّل على أنه HTML وقد تظهر فيه مشكلات تجميلية طفيفة. للشيفرات الخاصة بإطار عمل معيّن نوصي باستخدام Prettier المهيّأ للهجتك؛ أما لملفات HTML الخام و.htm والقوالب فإن أداتنا مثالية.

لا يحدث أي رفع. يعمل المنسّق بالكامل داخل متصفحك باستخدام js-beautify، لذا يمكنك بأمان لصق قوالب الصفحات الداخلية، أو مسودات رسائل البريد الإلكتروني، أو كود HTML المحتوي على بيانات خاصة دون أن يغادر أي شيء جهازك.

يزيل التصغير تعليقات HTML، ويُحوّل أي تسلسل من المسافات بين الوسوم إلى مسافة واحدة، ويحذف فواصل الأسطر. والنتيجة هي كود HTML يُعرض بشكل مطابق تمامًا وأصغر عادةً بنسبة 10-30%. وبدمجه مع ضغط gzip على الخادم، يقلّ الوزن الأولي للصفحة بشكل ملحوظ في الصفحات الغنية بالمحتوى.

نعم — انقر تنزيل لحفظ المخرج المنسّق كملف output.html أو المخرج المُصغَّر كملف output.min.html. والملف مُرمَّز بترميز UTF-8، لذا يعمل بنفس الكفاءة مع المحتوى الإنجليزي والسيريلي والمحتوى بلغات CJK والمحتوى من اليمين إلى اليسار.

إنها أداة صغيرة تعمل في المتصفح فقط — بلا أي تكلفة استضافة — لذا نقدّمها مجاناً كجزء من مجموعة أدوات المطوّرين لدينا. بلا إعلانات، وبلا تتبّع للمخرجات، وبلا حدود على حجم الملف سوى ما يستطيع متصفحك الاحتفاظ به في الذاكرة.

يتيح لك وضع Prettify اختيار مسافة بادئة من 2 أو 4 أو 8 مسافات. اختر العرض الذي يستخدمه محرّرك أو نمط الكود لديك، ثم انسخ النتيجة أو نزّلها كملف output.html لينتقل التنسيق مباشرةً إلى مشروعك.

The indent selector (2, 4 or 8 spaces) only applies in Prettify mode, since Minify strips all whitespace and line breaks by design — there is nothing left to indent. Switch back to Prettify to see the indent width take effect again.

أثناء اللصق أو التعديل، تجري الأداة تلقائيًا فحصًا هيكليًا وتسرد أي وسوم غير مغلقة أو غير متطابقة أو وسوم إغلاق شاردة مباشرةً أسفل لوحة الإخراج — دون الحاجة إلى زرّ منفصل. وتؤكّد رسالة خضراء «لم يُعثر على مشكلات هيكلية» أن الترميز سليم البنية.

Use Prettify mode with 2-space indent — it's the most common convention and keeps diffs compact — then check the structural-issues panel to confirm they haven't left an unclosed tag. Once reviewed, switch to Minify mode before shipping to production to strip the extra whitespace back out.

Yes — drag an .html, .htm or .xhtml file onto the upload area, or click it to browse, and its contents load straight into the input box exactly as if you'd pasted them. From there, Prettify, Minify, indent width and the structural checker all work identically whether the markup came from a file or a paste.

Yes — once there's output, a Copy button appears next to the output panel and the primary action area. Clicking it copies the current Prettify or Minify result to your clipboard instantly (it briefly shows 'Copied!' for confirmation), so you can paste directly into your editor or a code review comment without saving an intermediate .html file.