Nén và Định Dạng HTML Online — Miễn Phí, Không Tải Lên

Dán HTML vào bên dưới để nén — loại bỏ comment, thuộc tính dư thừa và khoảng trắng thừa — hoặc làm đẹp thành mã có thu lề, dễ đọc. Cả hai chiều đều chạy hoàn toàn trên trình duyệt bằng một trình phân tích HTML thật, không phải bằng regex thô sơ, nên nội dung bên trong <pre> và <textarea> luôn được giữ nguyên.

Công Cụ Này Là Gì?

Trình nén HTML loại bỏ mọi thứ trình duyệt không cần để hiển thị trang đúng: comment, khoảng trắng thừa giữa các thẻ, thuộc tính dư thừa như type="text/javascript", và dấu gạch chéo đóng thẻ tùy chọn. Kết quả là HTML tương đương về chức năng nhưng tải và phân tích nhanh hơn.

Công cụ này xây dựng trên html-minifier-terser, cùng bộ nén được dùng trong các công cụ build phổ biến, nên nó hiểu cấu trúc HTML thay vì mù quáng xóa khoảng trắng — nó sẽ không đụng vào nội dung nhạy cảm với định dạng bên trong <pre>, <textarea>, hay các khối <script>/<style> nội tuyến, và nó cũng nén luôn CSS và JS được nhúng trong mã của bạn.

Tại Sao Nên Dùng?

Dùng trình phân tích thật, không phải regex — an toàn với các trường hợp đặc biệt như khối <pre>, script nội tuyến, và conditional comment.
Nén cả nội dung <style> và <script> nhúng bên trong, không chỉ phần mã bao quanh.
Xem chính xác số byte tiết kiệm được trước khi triển khai file.
Chế độ Format biến HTML nén trên một dòng trở lại thành mã người dùng có thể đọc và chỉnh sửa được.
Xử lý 100% cục bộ — mã của bạn, và bất kỳ thông tin riêng tư nào trong đó, không bao giờ rời khỏi trình duyệt.

Cách Sử Dụng

Dán HTML vào ô nhập, hoặc nhấn "Load Example" để thử một mẫu có sẵn.
Nhấn "Minify" để nén, hoặc "Format" để làm đẹp với thu lề 2 khoảng trắng.
Xem thông báo bên dưới các ô — chế độ minify hiển thị mức giảm dung lượng; nếu HTML không thể phân tích được, bạn sẽ thấy lỗi cụ thể thay vì kết quả hỏng.
Nhấn "Copy" để lấy kết quả.

Ví dụ

Đầu vào

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <!-- greeting -->
    <p class="greeting">
      Hello, world!
    </p>
  </body>
</html>

Đầu ra

<!doctype html><html><head><title>Example</title></head><body><p class="greeting">Hello, world!</p></body></html>

Comment, thu lề và xuống dòng bị loại bỏ; doctype được rút gọn. Trang hiển thị ra y hệt như trước.

Mẹo thực tế

Nén ngay trước khi triển khai, không phải trong quá trình phát triển — giữ HTML dễ đọc trong source control và chỉ nén phần output build.
Nếu một trang hoạt động lạ sau khi nén, kiểm tra xem có JavaScript nào phụ thuộc vào khoảng trắng chính xác bên trong text node không (hiếm, nhưng vẫn xảy ra với một số widget cũ).
Định dạng lại HTML đã nén từ một trang thực tế là cách nhanh để xem cấu trúc trang trước khi viết scraper hoặc gỡ lỗi layout.
Kết hợp với công cụ nén CSS và JS bên dưới nếu quy trình build của bạn tách riêng style và script.

Ứng dụng trong quy trình làm việc thực tế

Các trang tĩnh, template email và landing page viết tay thường vẫn giữ nguyên phần thu lề và comment dùng trong quá trình phát triển. Nén trước khi triển khai giúp giảm một lượng dung lượng truyền tải đáng kể dù không lớn — và riêng với HTML email, số ký tự đôi khi ảnh hưởng đến ngưỡng cắt ngắn nội dung của Gmail, nên mã gọn hơn còn mang lại lợi ích thực tế ngoài tốc độ.

Chiều Format cũng hữu ích không kém: dán một trang đã nén từ view-source và định dạng lại thường là cách nhanh nhất để hiểu cấu trúc landing page của đối thủ hoặc gỡ lỗi một nội dung nhúng từ bên thứ ba.

→ Nén CSS · Nén JS

Các trường hợp sử dụng phổ biến

Giảm dung lượng cho landing page tĩnh hoặc template email trước khi đưa vào hoạt động.
Định dạng lại một đoạn HTML đã nén lấy từ view-source để hiểu cấu trúc của nó.
Dọn dẹp HTML dán từ trình soạn thảo WYSIWYG hoặc export từ CMS, vốn thường mang theo nhiều khoảng trắng thừa.
Kiểm tra nhanh xem một đoạn HTML viết tay có hợp lệ hay không, vì lỗi phân tích sẽ hiện ra rõ ràng.

Câu Hỏi Thường Gặp

HTML của tôi có bị tải lên đâu không?

Không. Cả nén và định dạng đều diễn ra cục bộ trên trình duyệt bằng JavaScript. Không có gì bạn dán vào được gửi lên máy chủ, nên an toàn khi dùng với template nội bộ hoặc trang chưa công bố.

Nén HTML có làm hỏng trang của tôi không?

Thường thì không — công cụ dùng một trình phân tích HTML thật (html-minifier-terser) hiểu được cấu trúc thẻ, nên nó giữ nguyên các phần tử nhạy cảm với khoảng trắng như <pre> và <textarea> và không gộp sai thuộc tính. Luôn kiểm tra thử các trang quan trọng sau khi nén, đặc biệt nếu bạn dùng script nội tuyến bất thường.

Nó có nén cả CSS và JavaScript bên trong HTML không?

Có. Các khối <style> và <script> nội tuyến được nén ngay tại chỗ, dùng cùng engine với các công cụ nén CSS và JS chuyên biệt, nên bạn không cần tách chúng ra thủ công.

HTML thường giảm được bao nhiêu dung lượng?

Tùy vào lượng khoảng trắng, comment và định dạng của mã gốc — HTML viết tay có nhiều thu lề và comment thường giảm được 20-40%. HTML sinh ra từ framework vốn đã gọn thì sẽ tiết kiệm được ít hơn.

Tôi có thể chuyển HTML đã nén về lại dạng dễ đọc không?

Có — dán HTML đã nén vào và nhấn "Format" thay vì "Minify" để lấy lại mã có thu lề, dễ đọc.

Nén và Định Dạng HTML