Форматувальник HTML

Як форматувати HTML

1. Вставте свій HTML або натисніть Відкрити файл, щоб завантажити файл .html чи .htm (до 10 МБ).
2. Виберіть Відступ (2 пробіли, 4 пробіли або табуляція) і вирішіть, чи Переносити рядки на 80 або 120 символів.
3. Позначте Робити відступ для і , якщо хочете, щоб вони мали відступ усередині <html>, і Видалити коментарі, щоб прибрати коментарі <!-- … -->.
4. Натисніть Форматувати, щоб отримати читабельний код, або Мінімізувати для найменшої безпечної версії.
5. Скопіюйте або завантажте результат. Рядок стану показує розмір до та після.

Результат відображається як звичайний текст у полі виводу. Ваш HTML ніколи не відтворюється і не виконується на цій сторінці, тому скрипти у вставленому коді нічого не можуть зробити.

Форматування: читабельний HTML з послідовними відступами

Форматувати використовує js-beautify – форматувальник, що лежить в основі багатьох редакторів коду:

• блокові елементи розміщуються в окремих рядках з відступом за глибиною вкладеності, а рядкові елементи, як-от <a>, <b> чи <span>, залишаються всередині тексту;
• вміст <script> і <style> форматується як JavaScript і CSS;
• <pre> і <textarea> лишаються точно такими, як написано, бо їхні пробіли видимі;
• послідовні порожні рядки скорочуються до одного;
• за заданої ширини перенесення довгі рядки тексту й довгі списки атрибутів переносяться.

Форматування не виправляє зламану розмітку: незакритий <div> лишається незакритим, а відступи після нього показують, де проблема.

Мінімізація: менший HTML без зміни сторінки

Мінімізувати застосовує свідомо обережний підхід:

• послідовності пробілів, табуляцій і переносів рядків у тексті стають одним пробілом, так само як їх показує браузер;
• пробіли поруч із блоковими елементами та елементами head (<div>, <p>, <li>, <td>, <meta>, <br>…) видаляються, бо вони ніколи не відображаються;
• один пробіл між рядковими елементами зберігається, тож <b>великий</b> <i>світ</i> не перетвориться на «великийсвіт»;
• коментарі видаляються, коли позначено Видалити коментарі, крім умовних коментарів (<!--[if IE]>) і коментарів, що починаються з <!--!;
• вміст <script>, <style>, <pre> і <textarea> ніколи не змінюється, а значення атрибутів зберігаються точно, разом із лапками.

Інструмент не видаляє необов’язкових закривальних тегів, не переписує атрибути й не стискає вбудований JavaScript та CSS: такі оптимізації заощаджують трохи більше, але можуть зламати сторінки. Для більшості сторінок стиснення HTTP (gzip чи Brotli) заощаджує набагато більше, ніж будь-який мінімізатор, тому мінімізація найкорисніша для HTML, вбудованого в електронні листи, шаблони чи рядки JavaScript.