Як працює форматування HTML
Форматер читає розмітку тег за тегом, відстежує глибину вкладеності кожного елемента і виводить її з однаковими відступами. Він ніколи не змінює те, що рендерить сторінка — лише те, як оформлено вихідний код.
- Розбір тегів. Бібліотека сканує вхідні дані у потік токенів: відкривальні теги, закривальні теги, текстовий вміст, коментарі та вміст блоків script і style. Значення атрибутів у лапках і тіла елементів pre та textarea обробляються як єдині одиниці, тому пробіли всередині них залишаються незміненими.
- Відстеження вкладеності. Проходячи по потоку токенів, форматер підтримує поточний рівень відступу. Кожен відкривальний тег, що не є самозакривальним, збільшує рівень на один крок; кожен відповідний закривальний тег зменшує його назад. Ця глибина визначає, скільки одиниць відступу стоїть перед кожним рядком результату.
- Застосування налаштувань. Ваш вибір відступу — 2 пробіли, 4 пробіли або табуляція — задає ширину одного рівня. Значення перенесення на колонці розбиває довгі рядки атрибутів або тексту при досягненні обраної колонки. Ліміт порожніх рядків згортає довгі серії порожніх рядків до заданного ліміту.
- Виведення розмітки. Зрештою форматер виводить теги назад з обчисленими відступами та переносами рядків. Якщо ви увімкнули вбудоване форматування, вміст кожного блоку style проганяється через CSS-форматер, а кожного блоку script — через JS-форматер, тож вбудований код вирівнюється по навколишній розмітці.
Навіщо форматувати HTML
- Читати мінімізовані сторінки. Продакшн-HTML постачається без переносів рядків — для економії байтів. Форматування відновлює структуру, щоб можна було знайти потрібний розділ, виявити пропущений закривальний тег і розібратися, як документ реально вкладений.
- Впорядковувати непослідовні шаблони. Розмітка, яку редагували кілька людей, поступово набуває змішаних відступів і розстановки тегів. Один прохід через форматер нормалізує весь файл, тож наступний коміт показує внесені зміни, а не стіну переформатованих пробілів.
- Не навантажує сторінку. Більшість онлайн-форматерів завантажують усю бібліотеку під час відкриття сторінки. Цей завантажує js-beautify лише коли ви натискаєте «Форматувати» або вмикаєте живий режим, тому відкриття коштує кілька кілобайт замість кількох сотень, а початковий рендеринг залишається швидким.
- Нічого не залишає браузер. Усе працює на вашому пристрої. Розмітка ніколи не завантажується на сервер — це важливо, коли сторінка належить клієнту, містить внутрішні URL або підпадає під угоду про конфіденційність.
Типові застосування
Форматування HTML використовується щоразу, коли потрібно прочитати розмітку, написану не для читання.
- Перевірка живої сторінки: вставте мінімізований код із «Перегляду коду сторінки», щоб знайти розмітку за помилкою верстки, яку не вдається відтворити локально.
- Очищення CMS-виводу: переформатуйте шаблон, експортований конструктором сторінок в один рядок, перед його комітом до репозиторію.
- Аудит доступності та SEO: розгорніть документ, щоб перевірити порядок заголовків, структуру орієнтирів і атрибути alt по реальній DOM.
Практичний приклад
Візьмемо мінімізований сніпет: <div><p>hi</p><span>x</span></div>. Вставте його вище з відступом 2 пробіли, тоді натисніть «Форматувати». Ви отримаєте читабельний блок: <div> на окремому рядку, <p>hi</p> і <span>x</span> з відступом на один рівень нижче, і закривальний </div>, вирівняний під ним. Перемкніть відступ на «Табуляція» — і кожен рівень зміститься з двох пробілів на символ табуляції. Додайте блок <style>a{color:red}</style>, увімкніть «Також форматувати вбудовані CSS і JS» — і правило розгорнеться на окремі рядки з відступом замість одного рядка.
FAQ
Це працює у моєму браузері?
Так. Бібліотека js-beautify завантажується при першому натисканні «Форматувати» або вмиканні живого режиму, а потім кешується. Розмітка ніколи не залишає сторінку — немає серверного запиту й немає завантаження даних.
Чи змінить форматування відображення моєї сторінки?
Ні. Форматер лише додає та прибирає пробіли й переноси рядків між тегами. Браузер ігнорує ці пробіли при побудові сторінки, тому рендерований результат ідентичний. Єдине, на що варто звернути увагу — пробілозалежний вміст всередині pre, textarea або рядкових елементів, який форматер навмисно не чіпає.
Що робить перемикач вбудованих CSS і JS?
Коли він вимкнений, вміст блоків style і script залишається точно таким, яким ви його вставили. Увімкніть — і CSS всередині кожного блоку style прогониться через CSS-форматер, а JavaScript всередині кожного блоку script — через JS-форматер, так що вбудований код вирівнюється по навколишній розмітці.
Що робить параметр «Перенесення на колонці»?
Він задає довжину рядка, при якій тег з багатьма атрибутами або довгий текстовий фрагмент переносяться на кілька рядків. Встановіть 0, щоб кожен елемент залишався на одному рядку незалежно від довжини. Встановіть 80 або 120 — і форматер переноситиме все, що виходить за цю колонку, роблячи широкі елементи читабельними у вузькому редакторі.
Браузерне форматування HTML дає вам читабельну розмітку без кроку збірки й без завантаження даних. Вставте мінімізовану або неохайну сторінку, виберіть відступ і ширину переносу, вирішіть, чи потрібно переформатувати вбудовані CSS і JS, потім скопіюйте або завантажте результат. Нічого не залишає ваш пристрій, акаунт не потрібен, а бібліотека завантажується лише на вимогу — тому відкриття цієї сторінки коштує кілька кілобайт, а не мегабайт.