Перейти до основного вмісту
LibraTool logoLibraTool

Форматувальник і мініфікатор HTML — безкоштовно

Красиво форматуйте або мінімізуйте HTML із правильними відступами вкладеності. Зберігає вміст усередині блоків <pre>, <script>, <style>.

Працює офлайн після завантаження

Перетягніть файл сюди або натисніть, щоб вибрати

HTML, HTM · обробляється на вашому пристрої

або натисніть Ctrl+V, щоб вставити з буфера обміну

Вибрати файли
Відформатований HTML
Результат з'явиться тут…

Типові застосування

  • Відладка HTML, виконаного на серверіПереглядайте сирий вихід HTML з вашого сервера (PHP, Rails, Django, Node) у читаному формату з відступами.
  • Форматування шаблонів електронної пошти HTMLHTML електронної пошти багатослівний (таблиці, вбудовані стилі). Форматуйте, щоб зробити його редагованим та зберіганим.
  • Форматування статичних сторінок HTMLВручну відредаговані статичні файли HTML виграють від послідовного форматування для спільного редагування.
  • Очищення HTML, експортованого з CMSWordPress, Wix, Squarespace експортують HTML з багатьма артефактами. Форматуйте, щоб зробити його редагованим.
  • Мініфікація HTML для виробництваЗменшіть розмір файлу HTML для швидшого завантаження сторінки, видаливши пробіли та непотрібні символи.

Як це працює

Інструмент форматує чи стискає HTML власноруч написаним токенізатором з розумінням тегів, вбудованим прямо в сторінку, — без сторонніх бібліотек форматування й звернень до сервера. Кожен символ вашої розмітки обробляється локально в браузері щойно ви його вводите чи вставляєте.

  1. 1
    Токенізатор сканує розмітку
    Власний посимвольний сканер проходить рядком HTML, визначаючи коментарі, оголошення DOCTYPE, відкривальні й закривальні теги, самозакривальні порожні елементи (br, img, input тощо) та сирі текстові вузли. Окремий помічник відстежує значення атрибутів у лапках, тож символи на кшталт > усередині атрибута (наприклад, value="a>b") ніколи не розривають тег завчасно.
  2. 2
    Глибина відступу відстежується для кожного тегу
    У режимі форматування токенізатор веде лічильник глибини. Відкривальні блокові теги збільшують глибину; закривальні зменшують її перед записом. Рядкові елементи (span, a, strong, em тощо) залишаються в тому самому рядку, що й їхній вміст, а не переносяться на окремий рядок із відступом. Вміст тегів pre, script, style і textarea виводиться дослівно, щоб не пошкодити чутливий до пробілів чи виконуваний код.
  3. 3
    Мініфікатор безпечно стискає пробіли
    У режимі мініфікації вміст блоків pre, script, style і textarea замінюється нумерованими маркерами перед стисненням пробілів. HTML-коментарі видаляються, а послідовності пробілів між тегами прибираються — крім проміжків між сусідніми рядковими елементами, де зберігається один пробіл, щоб слова не зливалися. Потім маркери замінюються назад оригінальним вмістом.
  4. 4
    Результат показується й за бажанням зберігається
    Відформатований чи мініфікований результат з’являється наживо на панелі виведення разом із відсотком зміни розміру. Його можна скопіювати в буфер обміну або завантажити як файл .html, не залишаючи браузер.

Схожі інструменти

🎨

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

Форматуйте мінімізований CSS з однаковими відступами або мінімізуйте його. Додаткове сортування властивостей за абеткою для передбачуваних відмінностей.

Спробувати
🗜️

Мініфікатор та форматувальник CSS

Мінімізуйте CSS для зменшення розміру файлу або форматуйте мінімізований CSS для читабельності. Миттєво, у вашому браузері.

Спробувати
📰

Форматувальник та валідатор XML

Красиво форматуйте та валідуйте XML за допомогою вбудованого DOM-парсера браузера. Включає мінімізований результат для виробничого використання.

Спробувати

Часті запитання