Format HTML

Format hoặc minify HTML với indent, ngắt thuộc tính, self-closing tùy chỉnh. 100% offline.

formatters

HTML Beautifier / Minifier

Indent size

Input

Output

Runs entirely in your browser. Your input never leaves your device.

What next?

Format CSS

Format CSS luôn

Chuyển đổi Markdown ↔ HTML

Convert Markdown sang HTML

How it works

Tại sao format HTML quan trọng

HTML thô từ code generator, CMS export, hay build tool thường đến dưới dạng một dòng dài hoặc thụt lề không nhất quán. Dù trình duyệt parse giống nhau bất kể whitespace, con người thì không. HTML dễ đọc dễ diff hơn trong version control, dễ debug hơn trong browser DevTools, và ít có khả năng che giấu lỗi cấu trúc như tag chưa đóng hoặc attribute đặt sai chỗ.

Minification đi theo hướng ngược lại: loại bỏ tất cả whitespace không cần thiết để giảm kích thước file. Với HTML phục vụ qua HTTP, HTTP compression (gzip hoặc brotli) thực sự mạnh hơn nhiều so với việc chỉ xóa whitespace thô.

HTML parsing và những edge case khó

HTML có những quirk làm format khó hơn JSON hay YAML:

Void elements — các element như <br>, <hr>, <img>, <input>, <meta>, <link> không thể có children và không có closing tag. Một formatter phải biết danh sách này để tránh thêm newline sai hay chờ </br>. js-beautify xử lý đúng tập void element của HTML5.

Optional closing tags — <li>, <td>, <tr>, <p> và một số element khác có closing tag mà spec HTML5 cho là tùy chọn. Trình duyệt tự đóng chúng; formatter ngây thơ có thể đọc sai nesting.

CDATA trong SVG/MathML — inline <svg> có thể chứa <![CDATA[...]]>. Formatter phải xử lý đây là text không thể đọc, không cố re-indent.

Comments —  và IE conditional comments (<!--[if lt IE 9]>) phải tồn tại qua cả beautify lẫn minify (trừ khi bạn chọn strip comments khi minify).

Tùy chọn indentation

Tool hỗ trợ thụt lề 2 space, 4 space và tab. Lựa chọn nào tùy thuộc vào .editorconfig hoặc quy ước nhóm của bạn. Hai space chiếm ưu thế trong các project JavaScript front-end hiện đại và khớp với default của Prettier cho HTML. Bốn space phổ biến hơn trong các project cũ và một số Python/Django template.

Khi paste output trở lại project, khớp với style hiện có của project. Pha trộn kích thước thụt lề trong một file làm rối diff và hầu hết các công cụ review code.

Exception với `<pre>` và `<textarea>`

Whitespace bên trong <pre>, <textarea>, và <script type="text/plain"> có nghĩa ngữ nghĩa. Một block <pre> render đúng mỗi khoảng trắng, tab và newline. Formatter không được re-indent nội dung bên trong các element này.

js-beautify giữ nguyên whitespace bên trong <pre> và <textarea> theo mặc định. Chú ý các tool không làm vậy — chúng sẽ làm hỏng về mặt thị giác các code block <pre> và thay đổi giá trị mặc định của <textarea>.

Khi nào beautify, khi nào minify

Beautify dùng cho:

Development và debugging.
Code review và pull request — HTML thụt lề dễ review hơn nhiều.
Học từ HTML bên thứ ba: paste source, indent nó, đọc nó.
Chỉnh sửa template nhận từ designer hoặc CMS export.

Minify dùng cho:

Asset production phục vụ trực tiếp (khi HTTP compression một mình không đủ).
HTML inline trong JavaScript string được chèn qua innerHTML.
Email HTML: nhiều email client tắt CSS ngoài và style inline trở nên dài dòng; minify HTML có thể tiết kiệm kích thước đáng kể.

Trong web app hiện đại, HTML thường được server-render hoặc build bởi bundler. Vite, webpack và Next.js đều minify HTML trong production build. Dùng tool này cho cleanup ad-hoc, template một lần, hoặc trường hợp bạn không đi qua bundler.

Sử dụng `js-beautify` cho HTML

import beautify from 'js-beautify';

const pretty = beautify.html(rawHtml, {
  indent_size: 2,
  indent_char: ' ',
  max_preserve_newlines: 1,
  indent_inner_html: true,
  wrap_line_length: 0,        // 0 = không wrap
  unformatted: ['pre', 'textarea'],
  extra_liners: ['head', 'body', '/html'],
});

Các option quan trọng:

unformatted — danh sách tag không nên re-indent nội dung bên trong.
indent_inner_html — có thụt lề nội dung <head> và <body> không.
wrap_line_length — độ dài dòng tối đa trước khi wrap attribute list dài.

Để minify trong production, nên dùng html-minifier-terser:

import { minify } from 'html-minifier-terser';

const small = await minify(rawHtml, {
  collapseWhitespace: true,
  removeComments: true,
  minifyCSS: true,
  minifyJS: true,
});

Các tool khác trong ecosystem

Prettier — formatter chuẩn cho hầu hết codebase front-end. Format HTML, CSS, JS, TypeScript, JSON và nhiều hơn nữa.
html-minifier-terser — minify aggressive hơn: loại bỏ attribute dư thừa, inline critical CSS.

Để format nhanh một lần không cần cài gì, tool này cho kết quả ngay trong trình duyệt.

Quyền riêng tư

Toàn bộ xử lý HTML chạy trên trình duyệt của bạn. Markup không bao giờ được gửi lên server.

FAQ

Beautify HTML có làm thay đổi cách trang render không?

Hầu như không. Trình duyệt chuẩn hóa whitespace trong HTML: nhiều khoảng trắng, tab và newline trong text content thu gọn thành một khoảng trắng. Thụt lề markup thay đổi whitespace giữa các tag, không phải trong text content hiển thị. Ngoại lệ duy nhất là nội dung bên trong <pre>, <textarea>, hoặc element được style với white-space: pre — tool này giữ nguyên whitespace bên trong các element đó.

Minification có làm hỏng JavaScript hay CSS inline không?

Không, với các option cẩn thận. Chế độ minify của js-beautify chỉ loại bỏ whitespace giữa các tag — không viết lại nội dung của block <script> hay <style>. Để minify aggressive hơn cũng minify JS và CSS inline, dùng html-minifier-terser với minifyJS: true và minifyCSS: true. Tool này phục vụ cleanup nhanh; với pipeline production, tích hợp html-minifier-terser vào build step.

Void element là gì và tại sao chúng quan trọng?

Void element là HTML tag không có children: <br>, <hr>, <img>, <input>, <meta>, <link>, <area>, <col>, <embed>, <param>, <source>, <track>, và <wbr>. Chúng không có closing tag. Formatter không biết danh sách này có thể thụt lề children không tồn tại, tạo ra output sai. Parser nhận thức HTML5 trong js-beautify xử lý void element đúng cách.

Nên dùng thụt lề 2 space hay 4 space?

Khớp với quy ước hiện có của project. Hai space là tiêu chuẩn thống trị trong project JavaScript front-end hiện đại và khớp với default của Prettier. Bốn space phổ biến hơn trong codebase cũ, Python/Django template, và một số style guide doanh nghiệp. Nếu bắt đầu mới, hai space giữ HTML lồng sâu không bị trôi quá xa sang phải.

Tại sao một số attribute lại xuống dòng mới?

Setting wrap line length kiểm soát điều này. Khi opening tag với nhiều attribute vượt quá độ dài dòng được cấu hình, js-beautify wrap attribute sang từng dòng riêng để dễ đọc. Đặt wrap length là 0 để tắt hoàn toàn việc wrap và giữ tất cả attribute inline, hoặc đặt giá trị như 120 để cho phép tag dài trên một dòng trước khi wrap.

So sánh với Prettier cho HTML formatting?

Prettier là tiêu chuẩn ngành cho format tự động, nhất quán trên toàn codebase — cài một lần per project và mọi developer nhận được output giống nhau. Tool này dành cho format ad-hoc không cần cài đặt hay config. Dùng Prettier trong CI và pre-commit hook; dùng tool này để cleanup nhanh một lần, paste snippet, hoặc khám phá format trên HTML bạn copy từ nơi khác.

Có format được HTML nhúng trong JavaScript template literal không?

Không trực tiếp — tool này chỉ format HTML độc lập. Với HTML trong file JS/TS (tagged template literal, JSX), Prettier xử lý context đó tự động. Cách khác, extract HTML string, format ở đây, rồi paste lại.

Có an toàn khi paste HTML nhạy cảm vào đây không?

Toàn bộ xử lý chạy cục bộ trên trình duyệt qua js-beautify biên dịch sang JavaScript. Không có nội dung nào được gửi lên server. Bạn có thể kiểm tra bằng cách mở tab Network của trình duyệt — không có request nào được thực hiện khi bạn paste và format.