Почему нельзя переформатировать теги , , и ?

Внутри элементов , и пробелы и разрывы строк отображаются буквально браузером, поэтому изменение отступов искажает отображаемый вывод. Аналогично, разделение строк внутри тегов или с помощью анализатора HTML может привести к поломке литералов JavaScript string или селекторов CSS. Включение Keep , , Unformatted сохраняет эти блоки дословно.

HTML Beautifier и форматтер онлайн

Q: В чем разница между улучшением HTML и минимизацией HTML?

HTML украшение (красивая печать) добавляет структурированные разрывы строк и иерархические отступы, чтобы разработчики могли легко читать, отлаживать и поддерживать разметку. HTML Минимизация удаляет ненужные пробелы, символы новой строки и комментарии, чтобы уменьшить размер файла и ускорить загрузку рабочей страницы.

Q: Как HTML Beautifier обрабатывает пустые (самозакрывающиеся) элементы HTML5?

HTML5 определяет 14 пустых элементов (area, base, br, col, embed, hr, img, input, link, мета, param, source, track и wbr), которые никогда не имеют закрывающих тегов. Этот форматтер автоматически распознает все 14 пустых элементов, а также объявления и инструкции XML/SGML, поэтому они никогда не помещают последующие родственные теги на более глубокие уровни отступов.

Форматируйте, делайте отступы и очищайте беспорядочный или минимизированный код HTML5 в режиме реального времени. Правильно обрабатывает теги void HTML5, встроенные элементы, перенос атрибутов и сохраняет блоки

Введите код HTML

Quick Presets:

Символы: 0

Строки: 0

Размер: 0 B

Форматированный вывод HTML

Параметры отступов

Размер отступа (пробелы):

Используйте табуляцию вместо пробелов Indent nested HTML elements using tab characters (\t)

Тег и Line Wrapping

Держите короткие встроенные теги на одной строке Keep inline tags like <strong>, <a>, <span>, and <code> together with surrounding text

Сохраняйте

Preserve exact whitespace and line breaks inside raw text and code blocks

Wrap Атрибуты тегов на новых строках Place each HTML attribute on its own indented line when a tag has 2+ attributes

Текстовое содержимое Wrap по адресу:

Параметры очистки

Удалить комментарии HTML Strip  comments from the formatted output

Удалить все пустые строки Strip blank lines between formatted HTML elements

Максимальное количество пустых строк для сохранения:

Что такое онлайн-HTML Beautifier и форматтер?

HTML Beautifier (также известный как форматтер HTML или симпатичный принтер) берет сжатый, минимизированный или непоследовательный исходный код HTML и реструктурирует его в чистую, удобочитаемую иерархию DOM. Независимо от того, проверяете ли вы минимизированные рабочие шаблоны, очищаете экспорт CMS или стандартизируете код перед фиксацией в Git, правильные отступы позволяют легко обнаружить незакрытые теги и глубоко вложенные контейнеры.

В отличие от наивных средств форматирования регулярных выражений, которые разбивают каждую угловую скобку на новую строку и повреждают блоки

или

Как украсить или Minify HTML Код онлайн

Вставьте разметку HTML: Вставьте неформатированный или минимизированный код HTML в поле Введите код HTML или нажмите Загрузить образец HTML, чтобы протестировать форматтер с полным шаблоном HTML5.
Выберите параметры форматирования: Используйте панель Быстрые настройки или правый столбец настроек, чтобы настроить отступ (2, 4 или 8 пробелов или табуляции), перенос атрибутов, группировку встроенных тегов и удаление комментариев.
Скопируйте, загрузите или minify: Отформатированный HTML автоматически обновляется по мере ввода. Нажмите Копировать в clipboard, Загрузить .html, чтобы сохранить файл локально, или Свернуть HTML, чтобы сжать разметку в одну строку.

Сравнение форматирования «До» и «После» HTML

Режим форматирования	Пример вывода HTML	Лучший вариант использования
Минифицированный HTML	`Привет, Мир`	Производственное развертывание, уменьшение размера полезных данных HTTP и шаблоны электронной почты HTML.
Стандартное оформление (4 места)	`Привет, Мир`	Ежедневная веб-разработка, отладка вложений DOM и обзоры кода.
Режим завернутых атрибутов	`class="card" id="hero">`	Компоненты со многими служебными классами Tailwind CSS, атрибутами `data-*` или реквизитами ARIA.

HTML5 Void-элементы и форматирование встроенных и блочных тегов

HTML5 Пустые элементы никогда не увеличивают глубину вложенности: В HTML5 пустые элементы (, , , , , , , <вход>, <ссылка>, , , , и ) не требуют закрывающих тегов или завершающих косых черт. Наш форматтер автоматически отслеживает это, поэтому однородные элементы остаются выровненными.
Inline против блочных элементов: Разбиение строковых элементов, таких как Прочитайте нашу документацию сегодня. на пять отдельных строк затрудняет чтение прозы и может привести к появлению нежелательных пробелов между словами в браузере. Включение Keep Short Inline Tags on One Line сохраняет естественный поток предложений.
Сохранение необработанных блоков: Пробелы внутри тегов , и </code> теги буквально отображаются браузерами. Если флажок <em>Unformatted</em> установлен, ваши фрагменты кода, диаграммы ASCII и встроенные блоки <code><script></code> или <code><style></code> никогда не будут изменены.

Часто задаваемые вопросы (FAQ)

В чем разница между улучшением HTML и минимизацией HTML?

HTML beautifying (красивая печать) добавляет структурированные разрывы строк и иерархические отступы, чтобы разработчики могли легко читать, отлаживать и поддерживать разметку. HTML minifying удаляет ненужные пробелы, символы новой строки и комментарии, чтобы уменьшить размер файла и ускорить загрузку рабочей страницы.

Почему нельзя переформатировать теги

, ,

Внутри элементов

 и </code> пробелы и разрывы строк отображаются буквально браузером, поэтому изменение отступов искажает отображаемый вывод. Аналогично, разделение строк внутри тегов <code><script></code> или <code><style></code> с помощью анализатора HTML может привести к поломке литералов JavaScript string или селекторов CSS. Включение <strong>Keep <pre>, <script>, <style> Unformatted</strong> сохраняет эти блоки дословно.

Как HTML Beautifier обрабатывает пустые (самозакрывающиеся) элементы HTML5?

HTML5 определяет 14 пустых элементов (area, base, br, col, embed, hr, img, input, link, meta, param, source, track и wbr), которые никогда не имеют закрывающих тегов. Этот форматировщик автоматически распознает все 14 пустых элементов, а также объявления и инструкции XML/SGML, поэтому они никогда не помещают последующие родственные теги на более глубокие уровни отступов.

Должен ли я использовать 2 пробела, 4 пробела или табуляцию для отступа HTML?

Широко используются как 2 пробела, так и 4 пробела. Руководство по стилю HTML/CSS от Google и современные наборы инструментов внешнего интерфейса (Prettier, Vue, React) по умолчанию используют пробелы 2, поскольку документы HTML часто имеют глубокую вложенность DOM. WordPress и многие серверные шаблонизаторы предпочитают пробелы tabs или 4. Вы можете мгновенно переключаться между ними с помощью панели быстрого доступа Presets.

Загружен ли мой код HTML на какой-либо сервер?

Нет. Весь анализ, форматирование и минификация HTML выполняются на 100% локально в вашем браузере с использованием JavaScript. Ваш исходный код и шаблоны никогда не покинут ваше устройство.