Форматування та мініфікація HTML
Онлайн-форматер та мінімізатор HTML — вставте мінімізований код і читайте його з відступами, або стисніть шаблон email перед деплоєм. Режим автовизначення обирає правильний напрямок (однорядковий вхід → форматований вивід, форматований вхід → однорядковий вивід), або оберіть вручну. Відступи: 2 пробіли, 4 пробіли або табуляція. Void-елементи (br, hr, img, input, meta, link) можна самозакривати у стилі XHTML або залишати у стилі HTML5. Вміст <pre>, <script> та <style> зберігається без змін — форматери, що ламають ці блоки, псують підсвічування коду на блогах. Коментарі можна видалити в обох режимах.
Як користуватися
Напрямок визначається автоматично.
2 пробіли — стандарт більшості гайдів зі стилю фронтенду.
Форматована або мінімізована версія з’являється праворуч.
Один клік для буфера обміну або збережіть як .html.
Форматуйте або мінімізуйте HTML у браузері — вміст <pre>, <script>, <style> зберігається без змін
Що можна зробити
Типові сценарії
- Форматуйте скопійований мінімізований HTML-файл для аналізу структури.
- Мінімізуйте HTML-шаблон email перед деплоєм — кожне надсилання стає легшим.
- Перетворіть void-елементи HTML5 на самозакривні у стилі XHTML для XML-сумісних конвеєрів.
- Видаліть коментарі розробника з продакшн-зборки HTML.
- Переформатуйте вручну відредагований шаблон відповідно до угод команди.
Чому саме цей
Багато браузерних форматерів псують вміст <pre> або <script> — скопіюйте через них фрагмент коду, і відступи зіпсуються. Цей інструмент розпізнає raw-text елементи (script, style, pre, textarea) і залишає їхній вміст байт у байт. Все інше отримує чисті відступи по блоках. Реєстрація не потрібна, ліміту на кількість запусків немає.
Поширені запитання
Що таке «void-елемент»?
HTML-елемент без закривального тега і вмісту — br, hr, img, input, meta, link, source, track, area, base, col, embed, param, wbr. У HTML5 їх можна писати як <br> (рекомендовано) або <br /> (застаріле XHTML). Оберіть варіант, якого очікує ваш лінтер.
Чи змінюється вміст <script> або <style>?
Ні. Вміст <script>, <style>, <pre> та <textarea> зберігається байт у байт. Обробка пробілів навколо цих тегів відповідає правилам raw-text елементів HTML5.
Чому в мінімізованому виводі залишаються пробіли?
Мінімізація прибирає пробіли між тегами, але зберігає хоча б один там, де це семантично важливо (між рядковими елементами на зразок <span> або <a>) — видалення цих пробілів помітно змінює відображення сторінки. Для агресивного стиснення пробілів скористайтеся мінімізатором часу збірки (html-minifier-terser, htmlnano), де можна налаштувати компроміс.
Чи виправляє інструмент незакриті теги?
Ні — це суто форматер. Якщо є незакриті <div>, вивід відображатиме (зламану) структуру. Для перевірки структури скористайтеся валідатором на зразок W3C Nu Validator.
Чи підтримується синтаксис шаблонізаторів на зразок @{{ ... }} або {% %}?
Інструмент намагається зберегти більшість токенів шаблонізаторів, але Blade ({{ }}), Twig ({% %}), Vue ({{ }}) тощо можуть усе одно отримати зайві пробіли. Для шаблонів з великою кількістю інтерполяції форматуйте відрендерений HTML або використовуйте інструмент з підтримкою шаблонізаторів.
Мобільний пристрій?
Так — введення та вивід розміщуються одне під одним на вузьких екранах.
Звичайно! Просто надішліть нам коротке повідомлення з вашою ідеєю. Якщо хочете обговорити детальніше — залиште email, і ми зв’яжемося з вами. Можна залишитися анонімом.
