Демініфікація HTML онлайн
Перетворіть стиснений вихідний код сторінки на читабельну розмітку. Теги отримують відступи за рівнем вкладеності, атрибути зручно розміщуються, а вбудовані скрипти та стилі форматуються разом із документом.
Чому вихідний код сторінки виглядає саме так
Мінімізатори HTML стискають пробіли між тегами, видаляють коментарі, прибирають необов’язкові закривальні теги та лапки навколо значень атрибутів, де вони не потрібні. Серверні шаблони додають безладу, адже сторінка, зібрана з десятків фрагментів, надходить єдиним потоком, не схожим на файли, з яких її створили. Відкрийте вихідний код майже будь-якого робочого сайту: замість документа побачите кілька величезних рядків, де закривальний тег секції доводиться шукати, рахуючи кутові дужки.
Найважливіше: побачити структуру
HTML має деревоподібну структуру, а дерево складно читати, коли його показано пласким рядком. Відступи за глибиною вкладеності одразу розкривають будову документа: де закінчується шапка, який контейнер обгортає основний вміст, наскільки глибоко вкладено компонент і якому елементу бракує закривального тега. Тому відформатований код корисний для перевірки порядку заголовків, дослідження розмітки, створеної фреймворком, або розуміння того, як інший сайт побудував цікаву для вас секцію.
Вбудовані скрипти та стилі теж форматуються
Справжня сторінка рідко складається лише з розмітки. Фрагменти аналітики, структуровані дані JSON-LD, об’єкти конфігурації та критичний CSS часто вбудовані безпосередньо в документ, і мінімізатор стискає їх також. Форматер обробляє кожен вбудований блок відповідним аналізатором. Тому тег script із мінімізованим JavaScript стає читабельним JavaScript, а вміст тега style стає читабельним CSS. Усе це залишається всередині документа з правильними відступами.
Теги, чутливі до пробілів, обробляються обережно
Відступи HTML змінюють пробіли між тегами, а пробіли можуть впливати на вигляд сторінки. Форматер враховує це: вміст pre та textarea залишається без змін, а рядкові елементи не розбиваються так, щоб додати чи прибрати видимі пробіли біля тексту. Ви отримуєте документ, який зручно читати, зі збереженням поведінки таких фрагментів. Для дослідження структури це дозволяє зосередитися на розмітці, не втрачаючи значущих пробілів.
Поширені запитання
Чи можна вставити весь вихідний код сторінки?
Так. Скопіюйте код у браузері через view-source або збережіть сторінку й відкрийте файл. Буде відформатовано весь документ, зокрема head, body, вбудовані скрипти та структуровані дані.
Чи змінить форматування відображення сторінки?
Не повинно. Вміст чутливих до пробілів елементів pre та textarea зберігається, а рядковий вміст обробляється обережно. Утім, форматуйте копію для читання та не публікуйте результат на робочому сайті без перевірки.
Чи працює інструмент із шаблонами Twig або Blade?
Частково. Звичайна розмітка форматується добре, але шаблонні теги з власним синтаксисом можуть завадити аналізатору HTML. Інструмент призначений для HTML, який отримує браузер, а не для шаблону, з якого його створили.