قالب‌بندی و کوچک‌سازی HTML

HTML را فوراً زیبا یا کوچک کنید؛ با تورفتگی قابل تنظیم و حذف نظرها.

ابزارهای توسعه‌دهنده رایگان
خروجی

دربارهٔ این ابزار

این قالب‌بندی‌کننده و فشرده‌ساز HTML & چه کاری انجام می‌دهد

این ابزار دو کار متضاد را در یک مکان انجام می‌دهد. برای تبدیل HTML فشرده، کوچک‌شده یا صرفاً نامرتب به نشانه‌گذاری خوانا با تورفتگی منظم و تو‌در‌تو‌گذاری یکدست، به حالت Beautify بروید. برای حذف نظرها و فشرده‌سازی فاصله‌های خالی اضافی و در نتیجه کاهش حجم فایل برای محیط تولید، به حالت Minify بروید. هر دو حالت کاملاً سمت کاربر اجرا می‌شوند و از یک تجزیه‌گر سبک استفاده می‌کنند — HTML شما هرگز از مرورگر خارج نمی‌شود و به سروری ارسال نمی‌شود.

نحوهٔ استفاده

  • کد HTML خود را در کادر ورودی جای‌گذاری کنید، یا برای امتحان‌کردن آن با نشانه‌گذاری نمونه، روی «بارگیری نمونه» کلیک کنید.
  • از منوی کشویی حالت، گزینه «زیباسازی» یا «فشرده‌سازی» را انتخاب کنید.
  • در حالت زیبانمایی، برای تورفتگی ۲ فاصله، ۴ فاصله یا یک تب را انتخاب کنید.
  • در حالت فشرده‌سازی، تعیین کنید که نظرهای HTML حذف شوند یا نه.
  • خروجی به‌صورت زنده به‌روزرسانی می‌شود و تعداد نویسه‌ها و (در حالت فشرده‌سازی) درصد کاهش حجم را نیز نمایش می‌دهد.
  • نتیجه را کپی کنید یا آن را به‌صورت یک فایل .html دانلود کنید.

چه چیزی در اینجا «قالب‌بندی ایمن» محسوب می‌شود؟

قالب‌بندی‌کننده، محتوای دقیقِ <pre>, <script>, <style>، و <textarea> تگ‌ها بدون دست‌زدن به فاصله‌های خالی داخل آن‌ها، زیرا قالب‌بندی دوباره‌شان می‌تواند بی‌سروصدا نحوه نمایش صفحه یا عملکرد یک اسکریپت را تغییر دهد. هر عنصر تو‌در‌توِ دیگر، برای هر سطح تو‌در‌تو‌بودن، یک سطح بیشتر تورفتگی می‌گیرد؛ از جمله عناصری مانند <br>, <img>، و <input> به‌درستی مدیریت می‌شوند تا خودشان یک سطح تورفتگی جداگانه ایجاد نکنند.

موارد استفادهٔ رایج

  • مرتب‌سازی HTML فشرده یا خودکارِ خروجی‌گرفته‌شده از یک CMS برای خواناتر شدن آن هنگام اشکال‌زدایی.
  • کاهش حجم یک فایل HTML ایستا پیش از استقرار، بدون نیاز به راه‌اندازی خط لولهٔ ساخت.
  • قالب‌بندی کد HTMLای که از یک برنامه گفت‌وگو یا ایمیل کپی شده و همه تورفتگی‌های اصلی خود را از دست داده است.
  • بررسی سریع درست‌ساختار بودن یک قطعه HTML با مشاهدهٔ نحوهٔ تو‌در‌تو قرار گرفتن عناصر پس از قالب‌بندی.

سؤالات متداول

آیا فشرده‌سازی باعث خراب شدن JavaScript یا CSS من می‌شود؟

نه — محتوای داخل <script> و <style> تگ‌ها در فرایند زیبانویسی و فشرده‌سازی کاملاً دست‌نخورده باقی می‌مانند، چون برای عملکرد صحیح به فاصله‌گذاری و نحو دقیق نیاز دارند.

آیا زیبانما، برچسب‌های HTML خراب یا بسته‌نشده را اصلاح می‌کند؟

خیر، این ابزار قالب‌بندی است، نه اعتبارسنجی — و فرض می‌کند HTML شما تا حد معقولی ساختار درست داشته باشد و بر همان اساس به آن تورفتگی می‌دهد. اگر نشانه‌گذاری شما تگ‌های بسته‌نشده داشته باشد، ممکن است تورفتگی از نظم خارج شود؛ این در واقع سرنخ بصری مفیدی است که نشان می‌دهد بخشی از ساختار متوازن نیست.

آیا می‌توانم به‌جای فاصله از تب برای تورفتگی استفاده کنم؟

بله، منوی کشویی تورفتگی در حالت زیبانویسی، در کنار تورفتگی ۲ فاصله‌ای و ۴ فاصله‌ای، گزینهٔ تب را هم دارد.

گزینه «حذف دیدگاه‌های HTML» در حالت فشرده‌سازی چه کاری انجام می‌دهد؟

در صورت انتخاب، همهٔ <!-- comment --> در نشانه‌گذاری، کامنت‌ها از خروجی حذف می‌شوند. اگر لازم است کامنت‌های خاصی، مانند اطلاعیه‌های مجوز، در فایل فشرده باقی بمانند، این گزینه را خاموش کنید.

هنگام استفاده از این ابزار، آیا HTML من روی سرور بارگذاری می‌شود؟

خیر — تمام فرایند قالب‌بندی و فشرده‌سازی با جاوااسکریپت و به‌صورت محلی در مرورگر شما انجام می‌شود. هیچ‌چیزی که جای‌گذاری می‌کنید به جایی ارسال نمی‌شود.