Як користуватися
- Вставте HTML у поле вводу, відкрийте файл .html або спробуйте приклад.
- Виберіть «Форматувати» для відформатованої, читабельної розмітки або «Мініфікувати» для компактного результату.
- Під час форматування виберіть 2 пробіли, 4 пробіли або табуляцію та вирішіть, чи зберігати коментарі.
- Скопіюйте результат або завантажте його як файл .html.
Як це працює
Форматувальник зчитує HTML за допомогою нестрогого токенізатора, приблизно як це робить браузер, і записує його знову. Він ніколи не рендерить вхідний код, тому скрипти у вставленому коді не можуть виконуватися, і нічого не завантажується з інтернету.
Форматування розміщує кожен блоковий елемент (div, p, ul, li, section, table, …) з нового рядка, з відступом відповідно до рівня вкладеності. Текст і рядкові елементи, як-от a, b, em, span, code, img і br, залишаються разом в одному рядку, тому пробіли між словами й посиланнями не змінюються так, щоб це впливало на відображення сторінки. Послідовні пробіли та переноси рядків у тексті перетворюються на один пробіл, як це й відображають браузери.
Вміст елементів pre, textarea, script і style копіюється точно як написано, включно з пробільними символами та будь-якими символами < або >. Порожні елементи, як-от br, img, input, meta і link, ніколи не отримують закривальний тег. Самозакривні теги, як-от <path /> у вбудованому SVG, залишаються самозакривними.
Мініфікація згортає пробільні символи в тексті до одиночних пробілів, прибирає пробіли біля блокових елементів, нормалізує пробіли між атрибутами та, якщо «Залишати коментарі» вимкнено, видаляє коментарі. Умовні коментарі завжди зберігаються.
Інструмент не виправляє некоректний HTML, не додає відсутні теги, не змінює порядок атрибутів і не мініфікує CSS та JavaScript усередині елементів style і script. Елементи, які залишилися незакритими, закриваються в кінці свого батьківського елемента, а закривальний тег без відповідного відкривального зберігається як є.
Приклади
Читання згенерованої розмітки
CMS виводить шаблон одним довгим рядком. Форматування з відступом 2 пробіли показує навігацію, пункти списку та основний вміст як дерево з відступами, а «Ціни включають <strong>ПДВ</strong>.» залишається в одному читабельному рядку.
Підготовка шаблону електронного листа
Мініфікуйте HTML-лист із вимкненими коментарями, щоб зменшити його розмір. Блок <pre> з таблицею цін та вбудований <style> залишаються точно такими, як були.
Перевірка структури
Коли не вистачає закривального </div>, у відформатованому виводі наступні елементи мають зайвий рівень відступу, тому легко побачити, де мав закінчитися елемент.
Поширені запитання
Чи змінить форматування вигляд моєї сторінки?
Майже у всіх випадках ні. Пробіли всередині блочних елементів згортаються і переносяться на нові рядки, які браузери ігнорують. Текст і рядкові елементи залишаються на тому самому рядку, а pre, textarea, script і style не змінюються. Виняток — сторінки, які покладаються на CSS white-space: pre для звичайних елементів.
Чи мініфікує він CSS і JavaScript всередині сторінки?
Ні. Вміст script і style зберігається точно як написано, тому не може порушитися. Щоб окремо мініфікувати таблицю стилів, скористайтеся форматувальником CSS.
Чи безпечно вставляти HTML із невідомого джерела?
Так. Вхідні дані обробляються суто як текст і ніколи не вставляються у сторінку, тому їхні скрипти не виконуються, а зображення чи посилання не завантажуються.
Чи перевіряє він мій HTML на валідність?
Ні. Він навмисно поблажливий і форматує зламану розмітку замість того, щоб відхиляти її. Невідповідні закривальні теги зберігаються, тож відступи допомагають їх помітити, але список помилок не створюється.
Конфіденційність
Ваш HTML обробляється лише у вашому браузері та ніколи не відображається й не завантажується. Нічого не зберігається й не потрапляє в аналітику.