Красивый html код: Форматирование HTML кода онлайн

Онлайн HTML Форматирование, сделать HTML Красивее

Форма HTML Форматирования

Считаете ли вы этот инструмент полезным? То поделитесь этим с друзьями или коллегами. Это поможет нам сделать наши бесплатные веб-инструменты лучше.


Эта форма позволяет вам создавать красивый HTML код и делать ваш HTML-код более читабельным. Онлайн HTML форматирование также украшает CSS и JavaScript между их тегами.

открытьполноэкранныйобразецкопироватьочиститьскачать


Перенести в «Вставить код» для сохранения

О HTML Форматировании

Об инструменте HTML Formatter

Форматирование HTML онлайн была создана, чтобы помочь с отладкой. Поскольку данные HTML часто выводятся без разрывов строк для экономии места, на самом деле их чрезвычайно сложно читать. Этот инструмент позволяет решить проблему путем форматирования HTML-кода, чтобы его было легко читать и отлаживать.

Как это работает?

Просто вставьте свой HTML-код в текстовую область выше и нажмите кнопку «Форматировать», и вы получите красивый HTML-код в той же текстовой области. Вы можете скопировать или сохранить отформатированный HTML код.

Пример HTML Форматирования
Исходные данные (До):

<!DOCTYPE html><html><head><title>wtools.io - Best Tools</title><style>body{background-color:#d0e4fe}h2{color:red}p{font-family:Arial;font-size:25px}</style></head><body><h2>Frre HTML Formatter</h2><div>Sample text in div</div><ul>Sample UL<li>Test</li><li>Debug</li><li>Execute</li></ul><p>This is a paragraph.</p><table><tr><th>100</th><th>200</th><th>300</th></tr><tr><td>100</td><td>200</td><td>300</td></tr></table></body></html>
Конечный результат (После):

<!DOCTYPE html>
<html>
<head>
    <title>wtools. io - Best Tools</title>
    <style>
    body {
        background-color: #d0e4fe;
    }
    h2 {
        color: red;
    }
    p {
        font-family: "Arial";
        font-size: 25px;
    }
    </style>
</head>
<body>
    <h2>Frre HTML Formatter</h2>
    <div>Sample text in div</div>
    <ul>Sample UL
        <li>Test</li>
        <li>Debug</li>
        <li>Execute</li>
    </ul>
    <p>This is a paragraph.</p>
    <table>
        <tr>
            <th>100</th>
            <th>200</th>
            <th>300</th>
        </tr>
        <tr>
            <td>100</td>
            <td>200</td>
            <td>300</td>
        </tr>
    </table>
</body>
</html>

Форматирование HTML кода

Форматирование HTML кодаКонсалтинг и аналитикаSEO инструменты и сервисы

  • SEO инструменты
  • Форматирование HTML кода

Довольно часто при написании HTML кода ваши отступы, интервалы и другие элементы форматирования могут стать немного дезорганизованными.

С помощью данного инструмента вы можете легко сделать ваш код красивым и легко читаемым. Особенно важно соблюдать единый стиль форматирования когда над проектом работают нескольких разработчиков.

Если Вам приходится разбираться в чужом, минимизированном или неряшливо написанном коде, этот инструмент тоже для Вас.



Поставьте к себе на сайт

Введите сокращенный, или запутанный HTML-код в поле ниже, чтобы мы его почистили и сделали красивым. Сервис также поддерживает нумерацию строк и подсветку синтаксиса. С помощью настроек форматирования вы можете адаптировать код под ваши личные вкусы.


Отступы — табуляцияОтступы — 2 пробелаОтступы — 3 пробелаОтступы — 4 пробелаОтступы — 8 пробелов

Не переносить длинные строкиПереносить строки более 40 символовПереносить строки более 70 символовПереносить строки более 80 символовПереносить строки более 110 символовПереносить строки более 120 символовПереносить строки более 160 символов

Удалите все лишние переводы строкРазрешить 1 новую строку внутри теговРазрешить 2 новые строки внутри теговРазрешить 5 новых строк внутри теговРазрешить 10 новых строк внутри теговНеограниченное количество строк

Отступы для секций <head> и <body>

Форматирование внутри тегов <style>и <script>:

На уровне отступа в тегаДобавить один отступБез отступа



Примеры

Исходный сжатый HTML-код:

<table><tr><td><form action=»https://yandex. ru/search/» role=»search» aria-label=»Поиск в интернете»><div><div><button type=»submit»><span>Найти</span></button></div><div><input maxlength=»400″ name=»text»/></div><div><div></div><div></div></div></div></form></td></tr></table>

HTML-код после преобразования:

<table>
  <tr>
    <td>
      <form action=»https://yandex.ru/search/» role=»search» aria-label=»Поиск в интернете»>
        <div>
          <div>
            <button type=»submit»><span>Найти</span></button>
          </div>
          <div>
            <input maxlength=»400″ name=»text»/>
          </div>
          <div>
            <div></div>
            <div></div>
          </div>
        </div>
      </form>
    </td>
  </tr>
</table>




© 2023 SEO-AUDITOR

Бесплатные SEO инструменты и сервисы для веб-мастеров, оптимизаторов и копирайтеров, администраторов сайтов, серверов и сисадминов — все для OnLine анализа, оптимизации, продвижения, разработки и мониторинга сайта.

Все материалы этого сайта могут использоваться, перепечатываться, распространяться и цитироваться только с указанием ссылки на первоисточник.

Дизайн сайта “СириусВеб”

Следите за нами:
Читать @SEOAuditorRu в Twitter


Обратная связь

Мы будем рады ответить на любые ваши вопросы, просьбы и пожелания. Просто заполните форму, и наш представитель свяжется с вами в кратчайшие сроки.

Ваше имя*

E-mail*

Тема

Сообщение*



Online HTML Beautifier — HTML Formatter

Украсьте грязный, минимизированный HTML-код с помощью Online HTML Beautifier и сделайте свой HTML-код более читабельным. Это дает HTML-коду правильный отступ. Online HTML Beautifier также украшает css и javascript между тегами style и script.

  • URL-адрес загрузки
  • Обзор
  • Украсить HTML
  • Сократить html 
  • Опции
  • Параметры редактора
  • Скачать
  • Прозрачный

Отступ с символом табуляцииОтступ с 2 пробеламиОтступ с 3 пробеламиОтступ с 4 пробеламиОтступ с 8 пробелами

Удалить все лишние новые строкиРазрешить 1 новую строку между токенамиРазрешить 2 новых строки между токенамиРазрешить 5 новых строк между токенамиРазрешить 10 новых строк между токенамиРазрешить неограниченное количество новых строк между токенами

Не переносить строкиПереносить строки длиной около 40 символовПереносить строки длиной около 70 символовПереносить строки длиной около 80 символовПереносить строки длиной около 110 символовПереносить строки длиной около 120 символовПереносить строки длиной около 160 символов

Скобки с управляющим операторомСкобы на собственной строкеКонец фигурных скобок на собственной строкеПопытка сохранить фигурные скобки там, где они есть

HTML <стиль>, <скрипт> форматирование:

Сохранить уровень отступа тегаДобавить один уровень отступаОтдельный отступ

Завершить сценарий и стиль новой строкой?

Использовать стиль списка с запятой?

Обнаружить упаковщики и обфускаторы?

Сохранить отступ массива?

Разорвать строки на цепных методах?

Пробел перед условным выражением: «if(x)» / «if (x)»

Убрать печатные символы, закодированные как \xNN или \uNNNN?

Использовать JSLint-счастливые настройки форматирования?

Отступы разделов

и?

Введите html здесь:

Результаты:

Полный список объектов HTML

  1. Веб-ресурсы
  2. Список объектов HTML

Полный список объектов HTML с их номерами и именами. Также включен полный список символов ASCII, которые могут быть представлены в HTML (т. е. печатные символы).

  • Символы ASCII
  • Символы ISO 8859-1
  • ISO 8859-1 Символы
  • Математические символы
  • Греческие буквы
  • Разные объекты HTML

Символы ASCII (для печати)

Отображаются только печатные символы, поскольку управляющие символы (0–31) не должны присутствовать на страницах HTML, поскольку они не имеют визуального представления.

9010 3
Символ Имя объекта Номер объекта Описание
  Космос
! ! Восклицательный знак
» " Кавычка
# 901 01 # Знак номера
$ $ Знак доллара
% % Знак процента
и & & Амперсанд
' Апостроф
( ( Открывающая/левая скобка
) ) Закрывающая/правая скобка
* * Звездочка
+ +
Знак плюс
, , Запятая
- Дефис
. . Период
/ / Косая черта
0 0 Цифра 0
1 1 Цифра 1
2 2 Цифра 2
3 3 Цифра 3
4 4 Цифра 4
5 5 Цифра 5
6 6 Цифра 6
7 7 Цифра 7
8
8 Цифра 8
9 9 Цифра 9
: : Двоеточие
; ; Точка с запятой
< < < Меньше
= = Знак равенства
> > > Больше
? ? Знак вопроса
@ @ У знака
A A Верхний регистр A
B B Верхний регистр B
C C Верхний регистр C
D D Верхний регистр D
E E Верхний регистр E
F F Верхний регистр F
G G Верхний регистр G
H H Верхний регистр H
I I Верхний регистр I
J J Верхний регистр J
K K Верхний регистр K
L L Верхний регистр L
M M Верхний регистр M
N N Верхний регистр N
O O Верхний регистр O
P P Верхний регистр P
Q Q Верхний регистр Q
R R Прописная буква R
S S Верхний регистр S
T T Прописная буква T
U U Верхний регистр U
V V Верхний регистр V
W W Прописные буквы W
X X Верхний регистр X
Y Y Верхний регистр Y
Z Z Верхний регистр Z
[ [ 9 ^ Карет
_ _ Подчеркивание
` ` Могильный акцент
a a Нижний регистр a
b b Нижний регистр b
c c Нижний регистр c
d d Нижний регистр d
e e Нижний регистр e
f f Нижний регистр f
g g Нижний регистр g
h h Нижний регистр h
i i Нижний регистр i
j j Нижний регистр j
k k Нижний регистр k
l l Нижний регистр l
m m Нижний регистр m
n n Нижний регистр n
o o Нижний регистр или
р p Нижний регистр p
q q Нижний регистр q
r r Нижний регистр r
s s Нижний регистр s
t t Нижний регистр t
u u Нижний регистр u
v v Нижний регистр v
w w Нижний регистр w
x x Нижний регистр x
y y Нижний регистр y
z z Нижний регистр z
{ { Открывающая/левая фигурная скобка
| | Вертикальная перекладина
} } Закрывающая/правая фигурная скобка
~ ~ Тильда

Символы ISO 8859-1

Полный список поддерживаемых символов ISO-8859-1. Обратите внимание, что имена чувствительны к регистру, поэтому, если вам нужна заглавная буква, имя также должно начинаться с заглавной буквы.

9010 3
Символ Имя объекта Номер организации Описание
  Космос
! ! Восклицательный знак
» " Кавычка
# 901 01 # Знак номера
$ $ Знак доллара
% % Знак процента
и & & Амперсанд
' Апостроф
( ( Открывающая/левая скобка
) ) Закрывающая/правая скобка
* * Звездочка
+ + Знак плюс
, , Запятая
- Дефис
. . Период
/ / Косая черта
0 0 Цифра 0
1 1 Цифра 1
2 2 Цифра 2
3 3 Цифра 3
4 4 Цифра 4
5 5 Цифра 5
6 6 Цифра 6
7 7 Цифра 7
8 8 Цифра 8
9 9 Цифра 9
: : Двоеточие
; ; Точка с запятой
< < < Меньше
= = Знак равенства
> > > Больше
? ? Знак вопроса
@ @ У знака
A A Верхний регистр A
B B Верхний регистр B
C C Верхний регистр C
D D Верхний регистр D
E E Верхний регистр E
F F Верхний регистр F
G G Верхний регистр G
H H Верхний регистр H
I I Верхний регистр I
J J Верхний регистр J
K K Верхний регистр K
L L Верхний регистр L
M M Верхний регистр M
N N Верхний регистр N
O O Верхний регистр O
P P Верхний регистр P
Q Q Верхний регистр Q
R R Прописная буква R
S S Верхний регистр S
T T Верхний регистр T
U U Верхний регистр U
V V Верхний регистр V
W W Прописные буквы W
X X Верхний регистр X
Y Y Верхний регистр Y
Z Z 9 ^ Карет
_ _ Подчеркивание
` ` Могильный акцент
a a Нижний регистр a
b b Нижний регистр b
c c Нижний регистр c
d d Нижний регистр d
e e Нижний регистр e
f f Нижний регистр f
g g Нижний регистр g
h h Нижний регистр h
i i Нижний регистр i
j j Нижний регистр j
k k Нижний регистр k
l l Нижний регистр l
m m Нижний регистр m
n n Нижний регистр n
o o Нижний регистр или
р p Нижний регистр p
q q Нижний регистр q
r r Нижний регистр r
s s Нижний регистр s
t t Нижний регистр t
u u Нижний регистр u
v v Нижний регистр v
w w Нижний регистр w
x x Нижний регистр x
y y Нижний регистр y
z z Нижний регистр z
{ { Открывающая/левая фигурная скобка
| | Вертикальная перекладина
} } Закрывающая/правая фигурная скобка
~ ~ Тильда

Символы ISO-8859-1

Полный список поддерживаемых символов ISO-8859-1 в HTML.

Символ Имя объекта Номер организации Описание
      Неразрывный пробел
¡ ¡ ¡ Перевернутый восклицательный знак
¢ %цент; ¢ Цент
£ фунт; £ Фунт
¤ ¤ ¤ Валюта
¥ ¥ ¥ Иена
¦ ¦ ¦ Сломанный вертикальный стержень
§ § § Секция
¨ ¨ ¨ Диэрезис интервальный
© © © Copyright
ª ª ª Порядковый номер женского рода
« « « Открытие/левый угол кавычки
¬ ¬ ¬ Отрицание
­ ­ Мягкий дефис
® ® ® Зарегистрированный товарный знак
¯ ¯ ¯ Макрон интервальный
° ° ° Степень
± +плюсмн; ± Плюс или минус
² ² ² Верхний индекс 2
³ ³ ³ Верхний индекс 3
´ ´ ´ Расстояние острое
µ µ µ Micro
Пункт
¸ ¸ ¸ Распорка седилья
¹ ¹ ¹ Верхний индекс 1
º º º Порядковый номер мужского рода
» » » Закрывающая/прямоугольная кавычка
¼ ¼ ¼ Дробь 1/4
½ ½ ½ Дробь 1/2
¾ ¾ ¾ Дробь 3/4
À ¿ ¿ Перевернутый вопросительный знак
× × × Умножение
÷ &делить; ÷ Разделить

Математические символы

Полный список всех поддерживаемых математических символов в HTML.

Символ Имя объекта Номер организации Описание
Для всех
Деталь
Существует
&пусто; Пустой
Набла
Есть в
Нет в
Ni
Продукт
Сумма
Минус
Звездочка (Lowast)
Квадратный корень
Пропорционально
Бесконечность
Угол
&и; И
&или; или
Крышка
Чашка
Интеграл
Следовательно,
~ Аналогично
Соответствует
Почти равно
Не равно
Эквивалент
Меньше или равно
Больше или равно
Подмножество
Надмножество
Не подмножество
Подмножество или эквивалент
Супермножество или равное
Обведен плюс
Обведенное время
Перпендикулярно
Оператор точки

Греческие буквы

Полный список всех поддерживаемых греческих букв в HTML.

Письмо Имя объекта Номер организации Описание
Α Α Α Альфа
Β &Бета; Β Бета
Γ &Гамма; Γ Гамма
Δ Δ Δ Дельта
Ε &Эпсилон; Ε Эпсилон
Ζ &Зета; Ζ Зета
Η &Эта; Η Эта
Θ Θ Θ Тета
Ι &Йота; Ι Йота
Κ &Каппа; Κ Каппа
Λ Λ Λ Лямбда
Μ Μ Μ Mu
Ν Ν Ν Nu
Ξ Ξ Ξ Xi
Ο Ο Ο Омикрон
Π Π Π Пи
Ρ Ρ Ρ Rho
Σ Σ Σ Сигма
Т Τ Τ Тау
Υ Υ Υ Ипсилон
Φ Φ Φ Фи
Χ &Чи; Χ Хи
Ψ Ψ Ψ Psi
Ом Ω Ω Омега
α &альфа; α альфа
β бета; β бета
γ γ γ гамма
δ δ δ дельта
ε ε ε эпсилон
ζ ζ ζ дзета
η η η эта
θ θ θ тета
ι ι ι йота
κ κ κ каппа
λ λ λ лямбда
μ μ μ мю
ν ν ν ну
ξ ξ ξ xi
ο ο ο омикрон
π π π пи
ρ ρ ρ ро
ς ς ς sigmaf
σ σ σ сигма
τ τ τ тау
υ υ υ ипсилон
φ φ φ фи
χ &чи; χ чи
ψ ψ ψ psi
ω ω ω омега
ϑ ϑ ϑ Символ тета
ϒ ϒ ϒ Символ ипсилон
ϖ ϖ ϖ Символ Пи

Разные объекты HTML

Список разных объектов HTML.

Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *