Công cụ định dạng & làm đẹp HTML

Công cụ định dạng HTML là gì?

Công cụ định dạng HTML (hay beautifier) viết lại mã với mỗi phần tử trên một dòng và thụt lề nhất quán theo đúng cấu trúc cây tài liệu, giúp bạn nhìn nhanh xem một <div> đóng ở đâu. Đây là cách nhanh nhất để đọc mã nguồn xuất ra từ trình dựng trang, mẫu email, đoạn mã CMS, hoặc HTML đã được nén cho production. Công cụ này sử dụng bộ máy mã nguồn mở js-beautify, cùng bộ định dạng mà tính năng format HTML tích hợp của VS Code dùng, và cũng định dạng CSS bên trong <style> cũng như JavaScript bên trong thẻ <script>.

Giải thích các tùy chọn làm đẹp

Các phần tử inline như <a>, <strong> và <span> vẫn nằm trong cùng dòng văn bản, còn nội dung của <pre> và <textarea> không bao giờ bị thay đổi, vì đổi khoảng trắng ở đó sẽ làm thay đổi những gì người dùng nhìn thấy.

Trình nén HTML an toàn hoạt động như thế nào

Khoảng trắng trong HTML không phải lúc nào cũng vô nghĩa: <b>Xin</b> <i>chào</i> hiển thị một khoảng trắng rõ ràng giữa hai từ. Vì vậy, trình nén áp dụng cách tiếp cận thận trọng:

• Xóa chú thích, ngoại trừ chú thích có điều kiện của Internet Explorer (đánh dấu Giữ chú thích để giữ lại tất cả).
• Gộp các chuỗi khoảng trắng, tab và xuống dòng trong văn bản thành một khoảng trắng — đúng với cách trình duyệt vẫn hiển thị.
• Chỉ xóa khoảng trắng ở những nơi không bao giờ được hiển thị: bên trong <head>, xung quanh <html>, <body>, hàng bảng và các container danh sách.
• Chuẩn hóa thẻ (<p class = "a"> thành <p class="a">) mà không thay đổi giá trị thuộc tính.
• Giữ nguyên <pre>, <textarea> và các script template; nén CSS inline, rút gọn JSON-LD, và chỉ nén JavaScript inline khi qua được bước kiểm tra cú pháp.

Mức tiết kiệm thường gặp là 10–25% trước khi nén gzip. Với quy trình build đầy đủ, các công cụ như html-minifier-terser có thể làm sâu hơn (xóa thẻ hoặc dấu nháy không bắt buộc), nhưng đổi lại các biến đổi này rủi ro hơn. Để thu gọn riêng stylesheet, hãy dùng CSS Minifier; với script, JavaScript Formatter có chế độ nén riêng.

Các lỗi thường gặp

Thụt lề trông sai sau một thẻ. Thường là do một phần tử chưa đóng (thiếu </div>) — bộ định dạng sẽ thụt lề mọi thứ phía sau sâu thêm một cấp, khiến lỗi dễ nhận ra. Cú pháp template như Handlebars, Liquid, Jinja hoặc khối PHP được nhận diện và giữ nguyên, nhưng logic template phức tạp bên trong thuộc tính vẫn có thể tạo ra các dấu xuống dòng khác thường.

Cũng được tìm dưới tên: làm đẹp code html, html beautifier, format html online, nén html, minify html, rút gọn html, công cụ định dạng html.

Các công cụ dùng kèm tốt với Định dạng HTML

• Định dạng CSS — Chuyển stylesheet đã nén thành CSS dễ đọc, mỗi thuộc tính một dòng và các khối @media được lồng đúng cấu trúc.
• Mã hóa HTML Entity — Escape < > & " để văn bản hiển thị an toàn trong HTML, chuyển dấu và ký hiệu sang entity dạng tên hoặc số, hoặc giải mã HTML chứa entity về văn bản thuần.
• Chuyển HTML sang Markdown — Dán HTML — hoặc sao chép trực tiếp văn bản rich text từ trang web, Google Doc hay email — rồi nhận Markdown gọn gàng để đưa vào README, wiki hoặc static site.
• Markdown sang HTML — Viết hoặc dán Markdown để nhận HTML sạch ngay lập tức, kèm bản xem trước đã được làm sạch, bảng GitHub-flavored, danh sách việc cần làm và khối code có rào chắn.