Trình định dạng & làm đẹp HTML miễn phí

Định dạng HTML là gì?

Định dạng HTML (còn được gọi là "làm đẹp" hoặc "pretty-printing") là nghịch đảo của minification. Một bộ định dạng nhận HTML ở bất kỳ dạng nào, đầu ra sản xuất đã minify, được sao chép từ trình kiểm tra của trình duyệt, được tạo từ template engine, hoặc chỉ được viết bằng tay một cách lộn xộn, và phát ra lại với thụt lề nhất quán, ngắt dòng giữa các phần tử block, và cấu trúc trực quan có thể đoán trước. Trình duyệt bỏ qua khoảng trắng thừa khi parse, vì vậy định dạng thay đổi cách mã nguồn trông như thế nào nhưng không bao giờ thay đổi cách trang được render. Tại sao phải bận tâm? Vì mắt người phân tích cú pháp phân cấp được thụt lề nhanh hơn so với mớ thẻ phẳng trực quan. Đánh giá mã, gỡ lỗi, học cấu trúc HTML, bàn giao markup cho developer khác, so sánh hai phiên bản để tìm thay đổi, tất cả trở nên dễ dàng hơn đáng kể khi cây tài liệu rõ ràng trực quan từ thụt lề.

Năm quy trình làm việc thực tế trong đó một bộ định dạng phát huy giá trị: (1) HTML sản xuất đã minify được dán từ "View Source" của trình duyệt hoặc "Copy outer HTML" của DevTools trở lại debugger; (2) HTML được trích xuất từ textarea CMS nơi trình soạn thảo WYSIWYG đã tạo ra đầu ra sạch về mặt trực quan nhưng nguồn lộn xộn; (3) gỡ lỗi đầu ra template engine (Jinja, Twig, Handlebars, ERB) nơi HTML được render không khớp với những gì bạn mong đợi; (4) chuyển đổi HTML được tạo tự động (từ rendering server-side React, Pandoc, trình chuyển đổi tài liệu) thành dạng dễ đọc cho code review; (5) dọn dẹp HTML template email trước khi gửi đến nền tảng tiếp thị có thể loại bỏ định dạng của bạn khi nhập.

Các bộ định dạng HTML chính

js-beautify (Einar Lielmanis, từ 2007 trở đi) là bộ định dạng lâu đời của hệ sinh thái JavaScript, xử lý HTML, CSS, JavaScript và JSON với một thư viện duy nhất. Bộ định dạng HTML là thứ cung cấp năng lượng cho mặt công khai của beautifier.io và là thứ trong lịch sử đã hậu thuẫn hàng chục trang "định dạng HTML trực tuyến". Prettier (James Long, 2017) là bộ định dạng có quan điểm rõ ràng đã thống trị hệ sinh thái frontend hiện đại; hỗ trợ HTML đến ngay sau khi ra mắt. Triết lý thiết kế của Prettier là "hầu như không cấu hình", một kiểu thụt lề (2 khoảng trắng mặc định), một mục tiêu chiều rộng dòng (printWidth: 80), một bộ quy tắc ngắt thuộc tính. Sự đánh đổi là tính nhất quán giữa các đội mà không có tranh cãi vặt; chi phí là ít linh hoạt cá nhân hơn. HTML Tidy (Dave Raggett tại W3C năm 1997, hiện được HTACG bảo trì) là bản gốc, có trước cảnh quan bộ định dạng hiện đại của web và ban đầu được thiết kế để dọn dẹp HTML cũ, hỏng, không còn dùng nữa từ cuối thập niên 1990. Tidy vẫn được gửi kèm trên macOS theo mặc định (/usr/bin/tidy) và trên hầu hết các bản phân phối Linux; ít được sử dụng phổ biến hơn vào năm 2026 nhưng vẫn được tôn trọng vì sự nghiêm khắc của nó. Trong quy trình hiện đại, Prettier là mặc định cho các dự án mới, được tích hợp vào VS Code (bộ định dạng mặc định cho file HTML), JetBrains IDEs, và hook pre-commit thông qua Husky + lint-staged. Công cụ này dành cho các trường hợp bạn không có pipeline build chạy Prettier, dán, định dạng, sao chép ra.

Quy ước thụt lề

Ba kiểu thụt lề cạnh tranh trong HTML hiện đại. 2 khoảng trắng là mặc định web hiện đại, được sử dụng bởi HTML/CSS Style Guide của GitHub, Google HTML/CSS Style Guide, mặc định của Prettier, các ví dụ phong cách WHATWG, và hầu hết các gói frontend được xuất bản trên npm. Lập luận: HTML lồng nhau sâu (một component điển hình có thể có 6-10 cấp độ thụt lề), và 2 khoảng trắng giữ các dòng không chạy ra khỏi rìa phải của màn hình 80 cột. 4 khoảng trắng là truyền thống Java / Microsoft cũ hơn vẫn tồn tại trong một số dự án kế thừa và chuẩn PHP PSR-12; tạo ra phân cấp rõ ràng hơn về mặt trực quan với chi phí không gian ngang. Tab được ưa chuộng bởi cộng đồng kernel Linux, một số dự án Go, và các developer cho rằng ký tự tab cho phép mỗi người xem đặt sở thích chiều rộng trực quan của riêng họ. Cuộc tranh luận "tab vs khoảng trắng" lớn hơn hầu hết người đọc và không thể giải quyết; câu trả lời thực tế là chọn một cho mỗi dự án và để bộ định dạng của bạn thực thi nó. Công cụ này cung cấp cả ba.

Phần tử inline vs block, cái bẫy khoảng trắng

Cái bẫy lớn nhất trong định dạng HTML là sự phân biệt giữa các phần tử cấp block và inline. Các phần tử block (<div>, <p>, <section>, <article>, <ul>) chảy như các khối kiểu đoạn văn; khoảng trắng giữa chúng được render như không có gì nhìn thấy, vì vậy bộ định dạng có thể tự do thêm ngắt dòng và thụt lề xung quanh chúng. Các phần tử inline (<span>, <a>, <strong>, <em>, <code>) chảy trong văn bản; khoảng trắng giữa chúng ĐƯỢC render. Hãy xem xét <p>Hello <strong>world</strong>!</p>: khoảng trắng giữa "Hello" và mở <strong> là ký tự khoảng trắng thực sẽ xuất hiện giữa các từ. Nếu một bộ định dạng ngây thơ ngắt dòng đó và thụt lề <strong> trên dòng riêng của nó, đầu ra được render thầm lặng nhận thêm khoảng trắng có thể nhìn thấy và bây giờ có thể đọc "Hello world" với một khoảng trắng thừa. Tệ hơn, các bộ định dạng loại bỏ khoảng trắng giữa các phần tử inline có thể hợp nhất các từ liền kề: "Helloworld" không có khoảng trắng. Tùy chọn "giữ thẻ inline" (mặc định bật ở đây) yêu cầu bộ định dạng giữ các phần tử inline trên cùng dòng với văn bản xung quanh, hành vi an toàn cho hầu hết HTML thực tế.

Nội dung được bảo vệ, pre, textarea, script, style

Bốn phần tử HTML có nội dung quan trọng về khoảng trắng không được định dạng lại: <pre> hiển thị văn bản chính xác như đã viết bao gồm cả ngắt dòng và khoảng trắng; <textarea> nội dung ban đầu tồn tại với khoảng trắng; <script> chứa JavaScript có ngữ nghĩa phụ thuộc vào khoảng trắng (hoặc ít nhất là nơi thêm thụt lề sẽ làm hỏng nguồn); <style> chứa CSS nên được định dạng lại bởi một bộ định dạng nhận biết CSS, không phải HTML. Các bộ định dạng HTML sản xuất (Prettier, Tidy, js-beautify) phát hiện những phần tử này và bỏ qua việc định dạng lại nội dung của chúng. Tiết lộ trung thực cho công cụ này: việc triển khai được viết tay thay vì bao bọc một thư viện sản xuất, và xử lý inline-vs-block + nội dung được bảo vệ là bảo thủ nhưng không hoàn toàn chịu lỗi. Nếu bạn chạy HTML sản xuất nặng qua nó và đầu ra trông sai bên trong một khối <pre> hoặc làm hỏng script, lựa chọn an toàn hơn là sử dụng Prettier cục bộ (đó là cài đặt một lệnh: npm install -g prettier, sau đó prettier --parser html input.html). Đối với HTML template thông thường và cấp độ component, công cụ này xử lý các trường hợp phổ biến.

Quy ước thuộc tính và thẻ tự đóng

Các thuộc tính HTML có các lựa chọn định dạng riêng. Danh sách thuộc tính ngắn vừa với một dòng (<a href="/about" class="link">); danh sách dài bọc một-mỗi-dòng, thường có > đóng trên dòng riêng. Mặc định printWidth: 80 của Prettier kích hoạt việc bọc khi dòng vượt quá 80 ký tự, đó là quy ước hiện đại. Một số đội thực thi thứ tự thuộc tính (class trước, sau đó id, sau đó data-*, sau đó ARIA, sau đó event handlers); hầu hết các bộ định dạng tôn trọng thứ tự thuộc tính hiện có thay vì sắp xếp lại, vì sắp xếp lại có thể thay đổi hành vi trong các trường hợp tinh tế (tính cụ thể CSS, tìm kiếm lớp JavaScript). Thẻ tự đóng: HTML5 không yêu cầu dấu gạch chéo cuối trên các phần tử void (<br>, <hr>, <img>, <input>, <meta>, <link>, có tổng cộng 14 phần tử void trong HTML5), nhưng XHTML và JSX thì có (<br />). Các bộ định dạng hoặc giữ dấu gạch chéo nếu có, bỏ nó (HTML5-sạch), hoặc thêm nó (XHTML-thân thiện) tùy thuộc vào cấu hình. Công cụ này theo đầu vào, nếu nguồn của bạn sử dụng <br />, đầu ra giữ nó; nếu bạn sử dụng <br>, đầu ra giữ điều đó.

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

• Đánh giá mã · làm sạch HTML trước khi chia sẻ hoặc xem xét lại với các đồng nghiệp.
• Gỡ lỗi · mã được định dạng tốt giúp dễ phát hiện các thẻ bị thiếu hoặc lồng nhau không chính xác.
• Làm sạch các template · định dạng lại HTML được tạo bởi các template hoặc các công cụ build.
• Chuyển giao giữa các nhà phát triển · làm cho mã dễ đọc hơn cho các nhà phát triển khác làm việc trên cùng dự án.
• Học tập · hiểu rõ hơn về cấu trúc HTML bằng cách quan sát các mẫu thụt lề.
• Kiểm tra template email. Các trình tạo template email (Mailchimp, ConvertKit) thường tạo HTML inline-styled khó đọc; định dạng nó làm cho cấu trúc hiển thị trước khi gửi thay đổi.

Pipeline hiện đại, Prettier khi lưu

Đối với các dự án có pipeline build, mặc định 2026 là Prettier chạy khi lưu trong trình soạn thảo của bạn và trên mỗi commit thông qua hook pre-commit. VS Code gửi Prettier làm bộ định dạng HTML mặc định khi cài đặt extension; kích hoạt với Format Document (Shift+Alt+F trên Windows/Linux, Shift+Option+F trên macOS) hoặc bật "editor.formatOnSave": true trong cài đặt. JetBrains IDEs (WebStorm, IntelliJ) tích hợp Prettier qua Settings, Languages & Frameworks, JavaScript, Prettier. Hook pre-commit thông qua Husky + lint-staged chạy Prettier trên mỗi tệp được staged trước khi cho phép commit, đảm bảo không có HTML chưa định dạng nào đến repository. Kiểm tra CI chạy prettier --check trên pull request để bắt sự trôi dạt định dạng. Không có gì trong số này quan trọng đối với các đoạn dùng một lần được dán từ nơi khác, đó chính xác là mục đích của công cụ trong trình duyệt này. Đối với công việc dự án dài hạn, hãy thiết lập Prettier; công cụ trong trình duyệt là lựa chọn không ma sát cho mọi thứ khác.

Quyền riêng tư: Tại sao chỉ-trình duyệt quan trọng ở đây

HTML thường chứa những thứ bạn không muốn bên thứ ba nhìn thấy: template công cụ admin nội bộ, markup trang sản phẩm chưa phát hành, các biến thể A/B-test với các giả thuyết thử nghiệm được tiết lộ trong tên lớp, template email với nội dung được cá nhân hóa, dashboard khách hàng với PII trong placeholders. Các bộ định dạng phía máy chủ tải HTML của bạn lên dịch vụ bên thứ ba nơi nó nằm trong logs. Công cụ này chạy hoàn toàn trong trình duyệt của bạn thông qua JavaScript, xác minh trong tab Network của DevTools trong khi bạn nhấp Format, hoặc đưa trang offline (chế độ máy bay) sau khi nó tải và bộ định dạng vẫn hoạt động. An toàn cho template sản phẩm chưa phát hành, trang admin nội bộ, biến thể A/B-test hoặc bất kỳ HTML nào bạn không muốn được sao chép vào ổ cứng của người lạ.

Câu hỏi thường gặp

Làm đẹp HTML là gì?

Làm đẹp HTML định dạng lại mã của bạn để làm cho nó dễ đọc hơn bằng cách thêm thụt lề và xuống dòng. Điều này tạo điều kiện rất nhiều cho việc gỡ lỗi và chỉnh sửa, mà không sửa đổi việc kết xuất HTML trong các trình duyệt.

Định dạng có thay đổi vẻ ngoài của HTML của tôi trong một trình duyệt không?

Không. Định dạng chỉ thêm khoảng trắng và thụt lề. Các trình duyệt bỏ qua khoảng trắng bổ sung trong HTML. HTML đã định dạng của bạn sẽ hiển thị giống hệt với bản gốc.

Các thẻ inline là gì?

Các thẻ inline (như <span>, <a>, <strong>) chèn vào văn bản mà không tạo xuống dòng. Tùy chọn «bảo tồn các thẻ inline» ngăn chúng được đặt trên các dòng riêng biệt và giữ chúng với nội dung của chúng.

2 khoảng trắng, 4 khoảng trắng, hay tab?

2 khoảng trắng là mặc định web hiện đại, được sử dụng bởi GitHub, Google HTML/CSS Style Guide, Prettier, các ví dụ phong cách WHATWG và hầu hết các gói npm. 4 khoảng trắng vẫn tồn tại trong các truyền thống Java / Microsoft / PHP cũ hơn. Tab được ưa chuộng bởi kernel Linux và một số dự án Go. Cuộc tranh luận lớn hơn hầu hết người đọc và không thể giải quyết; câu trả lời thực tế là khớp với những gì dự án của bạn đã sử dụng (hoặc quy ước phổ biến của đội) và để bộ định dạng thực thi nó. Đối với một đoạn dùng một lần không có ngữ cảnh dự án, 2 khoảng trắng là mặc định an toàn nhất vào năm 2026.

Tôi có nên sử dụng cái này nếu tôi đã dùng Prettier không?

Có lẽ không, tích hợp Prettier của trình soạn thảo của bạn đang làm điều này khi lưu, với nhận thức đầy đủ AST HTML và xử lý nội dung được bảo vệ mà các bộ định dạng sản xuất yêu cầu. Công cụ này dành cho các trường hợp mà pipeline build của bạn không bao phủ: HTML được dán từ trình kiểm tra trình duyệt, đoạn từ email hoặc chat, đầu ra template engine bạn muốn kiểm tra, định dạng dùng một lần bên ngoài bất kỳ ngữ cảnh dự án nào. Đối với công việc dự án dài hạn, thiết lập Prettier cục bộ; đối với công việc dùng một lần không ma sát, công cụ này là hình dạng đúng.

Các tệp HTML của tôi có được tải lên không?

Không. Định dạng chạy hoàn toàn trong trình duyệt của bạn thông qua JavaScript. HTML bạn dán không bao giờ băng qua mạng, xác minh trong tab Network của DevTools trong khi bạn nhấp Format, hoặc đưa trang offline (chế độ máy bay) sau khi nó tải và công cụ vẫn hoạt động. An toàn cho template sản phẩm chưa phát hành, trang admin nội bộ, biến thể A/B-test, template email với nội dung được cá nhân hóa, hoặc bất kỳ HTML nào bạn không muốn được sao chép vào ổ cứng của người lạ.

Công cụ liên quan