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}h1{color:red}p{font-family:Arial;font-size:25px}</style></head><body><h1>Frre HTML Formatter</h1><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;
    }

    h1 {
        color: red;
    }

    p {
        font-family: "Arial";
        font-size: 25px;
    }
    </style>
</head>

<body>
    <h1>Frre HTML Formatter</h1>
    <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>