تنسيق أو تصغير HTML
منسق HTML ومصغر مجاني عبر الإنترنت يعمل في متصفحك. الصق أي HTML وستكتشف الأداة ما إذا كان يحتاج إلى تجميل (إدخال مضغوط من سطر واحد ← إخراج مع مسافة بادئة) أو تصغير (إدخال مع مسافة بادئة ← إخراج من سطر واحد)، أو اختر الاتجاه يدويًا. مسافة بادئة بمسافتين أو 4 مسافات أو علامات تبويب. يمكن إغلاق العناصر الفارغة (br، hr، img، input، meta، link) ذاتيًا بنمط XHTML أو تركها عارية بنمط HTML5. يتم الحفاظ على المسافات داخل <pre> و <script> و <style> حرفيًا — لا يتم لمسها أبدًا. يمكن إزالة التعليقات اختياريًا من كلا الاتجاهين.
كيفية الاستخدام
يتم اكتشاف الاتجاه تلقائيًا بشكل افتراضي.
مسافتان هي المعيار لمعظم أدلة أنماط الواجهة الأمامية.
تظهر النسخة المجملة أو المضغوطة على اليمين.
حافظة بنقرة واحدة أو حفظ بصيغة .html.
جمل أو ضغط HTML في المتصفح — يحافظ على محتوى <pre> و <script> و <style> حرفيًا
ما يمكنك فعله
الاستخدامات النموذجية
- تجميل ملف HTML مصغر تم نسخه ولصقه لفحص هيكله.
- تصغير قالب HTML للبريد الإلكتروني قبل النشر — يحفظ بايتات في كل إرسال.
- تحويل العناصر الفارغة HTML5 إلى الإغلاق الذاتي XHTML لخط أنابيب صارم XML.
- إزالة تعليقات المطور من بناء HTML للإنتاج.
- إعادة المسافة البادئة لقالب تم تحريره يدويًا لمطابقة اتفاقيات الفريق.
لماذا هذا
كثير من المنسقات المعتمدة على المتصفح تعبث بمحتويات <pre> أو <script>. نستخدم آلة حالة ترميز خفيفة الوزن تتعرف على عناصر النص الخام (script، style، pre، textarea) وتترك محتواها وشأنه. كل شيء آخر يحصل على مسافة بادئة نظيفة لكل كتلة. يعمل في متصفحك عبر مُرمِّز JavaScript عادي — بدون تسجيل، بدون حصص لكل ملف.
الأسئلة الشائعة
ما هو «العنصر الفارغ»؟
عنصر HTML بدون علامة إغلاق وبدون محتوى — br، hr، img، input، meta، link، source، track، area، base، col، embed، param، wbr. في HTML5 يمكن كتابتها كـ <br> (مفضل) أو <br /> (XHTML قديم). اختر ما يتوقعه linter الخاص بك.
هل يعدل المحتوى داخل <script> أو <style>؟
لا. يتم الحفاظ على كل شيء داخل <script> و <style> و <pre> و <textarea> بايت بايت. يتبع التعامل مع المسافات حول هذه العلامات قواعد عناصر النص الخام HTML5.
لماذا لا تزال هناك مسافات في مخرجاتي المصغرة؟
يقوم التصغير بطي المسافات بين العلامات لكنه يحافظ على مسافة واحدة على الأقل حيث تكون ذات معنى دلاليًا (بين العناصر المضمنة). للتصغير القوي (صفر مسافات)، استخدم مصغرًا مخصصًا مثل html-minifier-terser.
هل سيصلح هذا العلامات غير المغلقة؟
لا — الأداة هي منسق محض. إذا كانت لديك <div> غير مغلقة، فسيعكس الإخراج الهيكل (المكسور). استخدم مدقق مثل W3C Nu Validator لتدقيق الهيكل.
هل يتعامل مع بناء جملة القوالب مثل @{{ ... }} أو {% %}؟
يحاول ترك معظم رموز القوالب سليمة، لكن Blade ({{ }})، Twig ({% %})، Vue ({{ }})، إلخ يمكن أن تتباعد بشكل غريب. بالنسبة للقوالب ذات الاستيفاء الثقيل، قم بتنسيق HTML المعروض أو استخدم أداة تدرك القوالب.
الموبايل؟
نعم — يتكدس الإدخال والإخراج على الشاشات الضيقة.
