نحوه استفاده
- HTML را در کادر ورودی جایگذاری کنید، یک فایل .html باز کنید یا نمونه را امتحان کنید.
- برای نشانهگذاری تورفته و خوانا «زیباسازی» و برای خروجی فشرده «فشردهسازی» را انتخاب کنید.
- هنگام زیباسازی، ۲ فاصله، ۴ فاصله یا تب را انتخاب کنید و مشخص کنید توضیحات باقی بمانند یا نه.
- نتیجه را کپی کنید یا بهصورت فایل .html دانلود کنید.
نحوه کار
فرمت‌کننده HTML را با یک توکنایزر منعطف و بسیار شبیه به مرورگر تجزیه میکند و دوباره آن را می‌نویسد. این ابزار هرگز ورودی را رندر نمی‌کند؛ بنابراین اسکریپتهای موجود در کد جای‌گذاری‌شده اجرا نمیشوند و چیزی از وب بارگذاری نمیشود.
حالت زیباسازی هر عنصر بلوکی (div، p، ul، li، section، table و غیره) را در خط جداگانه‌ای قرار میدهد و بر اساس عمق تودرتو تورفتگی میدهد. متن و عناصر درون‌خطی مانند a، b، em، span، code، img و br در یک خط کنار هم می‌مانند؛ بنابراین فاصلههای بین کلمه‌ها و پیوندها به‌گونه‌ای تغییر نمی‌کند که صفحه رندرشده را تغییر دهد. توالی فاصله‌ها و شکست‌های خط در متن به یک فاصله تبدیل میشود که مرورگرها به‌هرحال آن را همین‌طور نمایش می‌دهند.
محتوای عناصر pre، textarea، script و style دقیقاً همانطور که نوشته شده است کپی میشود، شامل فاصلههای خالی و هر نویسه < یا >. عناصر void مانند br، img، input، meta و link هرگز برچسب بسته دریافت نمی‌کنند. برچسب‌های خودبسته مانند <path /> در SVG درون‌خط بهصورت خودبسته باقی می‌مانند.
حالت فشردهسازی فاصلههای خالی در متن را به یک فاصله کاهش میدهد، فاصلههای کنار عناصر بلوکی را حذف میکند، فاصلههای بین ویژگی‌ها را عادی‌سازی میکند و اگر «حفظ توضیحات» خاموش باشد، توضیحات را حذف میکند. توضیحات شرطی همیشه نگه داشته میشوند.
این ابزار HTML نامعتبر را اصلاح نمی‌کند، برچسب‌های جاافتاده را اضافه نمی‌کند، ترتیب ویژگی‌ها را تغییر نمی‌دهد و CSS و JavaScript درون عناصر style و script را فشرده نمی‌کند. عناصری که باز مانده‌اند در پایان والدشان بسته میشوند و برچسب بسته بدون برچسب بازِ متناظر، همانطور که نوشته شده است باقی میماند.
نمونه‌ها
خواندن نشانهگذاری تولیدشده
یک CMS قالب را بهصورت یک خط طولانی خروجی میدهد. زیباسازی با ۲ فاصله، ناوبری، آیتمهای فهرست و محتوای اصلی را بهصورت درختی تورفته نشان میدهد، در حالی که «Prices include <strong>VAT</strong>.» در یک خط خوانا باقی میماند.
آمادهسازی قالب ایمیل
یک ایمیل HTML را با غیرفعال کردن توضیحات فشرده کنید تا حجم آن کاهش یابد. یک بلوک <pre> حاوی جدول قیمت و تگ <style> داخلی دقیقاً همانطور که بوده باقی میماند.
بررسی ساختار
وقتی تگ بسته </div> جا افتاده باشد، خروجی زیباسازیشده عناصر بعدی را یک سطح تورفتهتر نشان میدهد و این کمک میکند بهراحتی ببینید عنصر باید کجا تمام میشده است.
پرسش‌های متداول
آیا زیباسازی ظاهر صفحه من را تغییر میدهد؟
تقریباً در همه موارد خیر. فاصلههای سفید داخل عناصر بلوکی جمع میشوند و به شکست خط تبدیل میشوند که مرورگرها آنها را نادیده می‌گیرند. متن و عناصر درون‌خطی در همان خط می‌مانند و pre، textarea، script و style دستکاری نمیشوند. صفحاتی که روی CSS white-space: pre برای عناصر معمولی متکی هستند استثنا هستند.
آیا CSS و JavaScript داخل صفحه را فشرده میکند؟
خیر. محتوای script و style دقیقاً همانطور که نوشته شده باقی میماند تا نشکند. برای فشردهسازی جداگانه stylesheet از فرمتدهنده CSS استفاده کنید.
آیا جایگذاری HTML از منبع ناشناخته امن است؟
بله. ورودی صرفاً بهصورت متن پردازش میشود و هرگز در صفحه قرار نمیگیرد؛ بنابراین اسکریپتهای آن اجرا نمیشوند و تصاویر یا پیوندهای آن بارگذاری نمیشوند.
آیا HTML من را اعتبارسنجی میکند؟
خیر. این ابزار عمداً انعطافپذیر است و نشانهگذاری ناقص را بهجای رد کردن، قالببندی میکند. تگهای بسته نامتناظر حفظ میشوند تا تورفتگی به شما کمک کند آنها را پیدا کنید، اما فهرست خطا تولید نمیشود.
حریم خصوصی
HTML شما فقط در مرورگر خودتان پردازش میشود و هرگز رندر یا بارگذاری نمیشود. هیچ‌چیز ذخیره نمیشود و در داده‌های تحلیلی گنجانده نمیشود.