مرتب‌سازی و فشرده‌سازی کد HTML

مرتب‌سازی و فشرده‌سازی کد HTML در یک ابزار

کد HTML که از یک سیستم مدیریت محتوا، قالب آماده، ایمیل یا ابزار دیگری کپی شده، اغلب یا در یک خط فشرده است یا تورفتگی‌های به‌هم‌ریخته دارد و خواندن و اشکال‌یابی آن سخت است. از طرف دیگر، برای انتشار صفحه گاهی می‌خواهید حجم HTML کمتر شود. ابزار مرتب‌سازی و فشرده‌سازی HTML تولتولیا هر دو کار را انجام می‌دهد: در حالت «زیباسازی» کد را با تورفتگی منظم مرتب می‌کند و در حالت «کمینه‌سازی» کامنت‌ها و فاصله‌های اضافه را حذف می‌کند. همه‌ی پردازش‌ها در مرورگر شما انجام می‌شود و کد شما به هیچ سروری ارسال نمی‌شود.

ویژگی‌های ابزار

• دو حالت: زیباسازی (Beautify) و کمینه‌سازی (Minify).
• تورفتگی دلخواه: ۲ فاصله، ۴ فاصله یا Tab.
• حذف کامنت‌های HTML به‌صورت اختیاری.
• محافظت از محتوای حساس: محتوای تگ‌های <script>، <style>، <pre> و <textarea> تغییر نمی‌کند.
• نمایش تعداد کاراکترها و درصد کاهش حجم در حالت کمینه‌سازی.
• کپی یا دانلود خروجی به‌صورت فایل HTML.
• رایگان، بدون ثبت‌نام و بدون ارسال کد به سرور.

آموزش استفاده

1. کد HTML را در کادر «HTML ورودی» جای‌گذاری کنید، یا برای امتحان، روی «بارگذاری نمونه» بزنید.
2. حالت را انتخاب کنید: «زیباسازی» برای مرتب کردن کد یا «کمینه‌سازی» برای فشرده کردن آن.
3. در حالت زیباسازی، نوع تورفتگی را انتخاب کنید.
4. در حالت کمینه‌سازی، مشخص کنید کامنت‌های HTML حذف شوند یا نه.
5. روی «پردازش» بزنید و خروجی را کپی یا به‌صورت فایل دانلود کنید.

نمونه‌ی مرتب‌سازی و فشرده‌سازی

کد فشرده و ناخوانا:

<div class="card"><h2>عنوان</h2><ul><li>مورد اول</li><li>مورد دوم</li></ul></div>

پس از زیباسازی با تورفتگی ۲ فاصله:

<div class="card">
  <h2>عنوان</h2>
  <ul>
    <li>مورد اول</li>
    <li>مورد دوم</li>
  </ul>
</div>

کمینه‌سازی دقیقاً برعکس عمل می‌کند و کد مرتب را دوباره به شکل فشرده برمی‌گرداند.

چرا محتوای script و style تغییر نمی‌کند؟

فاصله‌ها و خط‌ها در کد جاوااسکریپت و CSS، و همچنین در متن داخل تگ‌های <pre> و <textarea>، می‌توانند معنادار باشند. تغییر آن‌ها ممکن است عملکرد اسکریپت یا ظاهر صفحه را بدون هیچ هشداری خراب کند. به همین دلیل ابزار محتوای این تگ‌ها را دقیقاً همان‌طور که هست نگه می‌دارد. همچنین تگ‌های خودبسته مثل <br>، <img> و <input> سطح تورفتگی جدیدی ایجاد نمی‌کنند.

فشرده‌سازی HTML چقدر به سرعت سایت کمک می‌کند؟

حذف کامنت‌ها و فاصله‌های اضافه، حجم فایل HTML را کم می‌کند؛ به‌خصوص در صفحه‌هایی که کامنت یا تورفتگی زیادی دارند. با این حال، اگر سرور شما فشرده‌سازی Gzip یا Brotli را فعال کرده باشد، که در بیشتر هاست‌ها فعال است، تأثیر کمینه‌سازی HTML روی حجم انتقال‌یافته معمولاً کمتر از آن چیزی است که درصد نمایش‌داده‌شده نشان می‌دهد. برای سرعت بیشتر، بهینه‌سازی تصاویر، اسکریپت‌ها و فایل‌های CSS معمولاً اثر بیشتری دارد.

کاربردهای ابزار

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

ابزارهای دیگر برنامه‌نویسی تولتولیا مثل JSON Formatter و Validator، استخراج لینک از متن و HTML و ساخت فایل htaccess را هم امتحان کنید.

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

آیا فشرده‌سازی، جاوااسکریپت یا CSS داخل صفحه را خراب می‌کند؟

خیر. محتوای تگ‌های <script> و <style> در هر دو حالت دست‌نخورده باقی می‌ماند.

آیا ابزار تگ‌های اشتباه یا بسته‌نشده را اصلاح می‌کند؟

خیر. این ابزار قالب‌بندی می‌کند، نه اعتبارسنجی. اگر تگی بسته نشده باشد، تورفتگی خروجی به‌هم می‌ریزد؛ که خودش نشانه‌ی خوبی برای پیدا کردن محل مشکل است.

گزینه‌ی «حذف دیدگاه‌های HTML» چه کار می‌کند؟

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

آیا فشرده‌سازی روی ظاهر صفحه اثر دارد؟

معمولاً خیر. اما در موارد نادر، حذف فاصله بین عناصر درون‌خطی (مثل چند لینک یا دکمه کنار هم) ممکن است فاصله‌ی ظاهری بین آن‌ها را تغییر دهد. پس از فشرده‌سازی، صفحه را یک بار بررسی کنید.

آیا کد HTML من جایی ارسال می‌شود؟

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