Làm đẹp mã HTML lộn xộn
Trình Định Dạng HTML biến mã đánh dấu đã nén hoặc rối rắm thành HTML gọn gàng, thụt lề đúng chuẩn theo thời gian thực, ngay trong trình duyệt. Dán một trang dồn một dòng hay một mớ thẻ lồng nhau, kết quả đã làm đẹp xuất hiện tức thì ở ô bên phải, thụt lề nhất quán và sắp xếp thuộc tính ngăn nắp.
Trường hợp dùng phổ biến
Bung trang đã nén
Dọn dẹp mã đánh dấu
Đọc & học
Cách định dạng HTML
Dán mã đánh dấu của bạn
Gõ hoặc dán HTML vào ô Đầu vào bên trái. Bạn cũng có thể Tải lên một file .html, hoặc bấm Code mẫu để nạp một ví dụ.
Xem kết quả tức thì
Mã đánh dấu đã định dạng và tô sáng cú pháp hiện ra tự động ở ô bên phải khi bạn gõ. Số dòng và bộ đếm dung lượng trực tiếp giúp bạn di chuyển trong tài liệu lớn dễ dàng. Nhấn Ctrl + Shift + F để định dạng lại theo yêu cầu.
Tùy chỉnh tùy chọn
Đặt thụt lề (2, 3, 4, 8 dấu cách hoặc Tab), độ rộng dòng, cách thuộc tính xuống dòng và vị trí của dấu ngoặc đóng. Kết quả được định dạng lại ngay lập tức.
Sao chép hoặc tải về
Bấm Sao chép để lấy kết quả, hoặc Tải về để lưu thành file .html. Dùng Chỉnh sửa để tinh chỉnh kết quả bằng tay trước khi xuất.
Tùy chọn làm đẹp HTML
Điều khiển định dạng
Các điều khiển này điều chỉnh kết quả HTML của Prettier theo phong cách đánh dấu bạn ưa thích. Mỗi thay đổi đều định dạng lại kết quả tức thì.
| Tùy chọn | Lựa chọn | Kiểm soát điều gì |
|---|---|---|
| Thụt lề | 2 · 3 · 4 · 8 dấu cách · Tab | Độ rộng thụt lề và ký tự dùng cho mỗi cấp lồng nhau (mặc định 4 dấu cách). |
| Độ rộng dòng | 80 · 100 · 120 | Độ dài dòng mục tiêu trước khi thẻ và văn bản dài xuống dòng (mặc định 80). |
| Thuộc tính | Tự xuống dòng · Mỗi dòng một | Thuộc tính nằm cùng dòng hay mỗi cái một dòng riêng. |
| Dấu ngoặc | Dòng mới · Cùng dòng | Dấu > đóng của thẻ nhiều dòng có xuống dòng mới hay không. |
Những gì được định dạng
Thẻ & thuộc tính
Lồng nhau nhất quán, giãn cách thuộc tính gọn gàng và xử lý đúng thẻ tự đóng cùng phần tử rỗng.
CSS & JS nhúng
Mã trong khối <style> và <script> được định dạng cùng lúc với mã đánh dấu.
Công cụ tích hợp
Định dạng thời gian thực
Kết quả cập nhật khi bạn gõ, kèm tô sáng cú pháp và cột số dòng khớp nhau.
Tải lên & tải về
Nạp một file .html trên máy hoặc xuất kết quả đã định dạng chỉ bằng một cú bấm.
Kết quả chỉnh sửa được
Chuyển ô kết quả sang chế độ chỉnh sửa để tinh chỉnh bằng tay trước khi sao chép.
Câu hỏi thường gặp
Trình định dạng HTML làm gì?
Nó thụt lề lại mã HTML thô, đã nén hoặc lộn xộn thành mã đánh dấu gọn gàng, dễ đọc với giãn cách và ngắt dòng nhất quán. "Trình định dạng HTML" và "trình làm đẹp HTML" cùng chỉ một việc — làm cho mã đánh dấu dễ đọc và dễ bảo trì.
Định dạng có đổi cách trang hiển thị không?
Không. Làm đẹp chỉ chỉnh khoảng trắng và thụt lề cho dễ đọc. Các thẻ, thuộc tính và nội dung vẫn giữ nguyên, nên trang trông và hoạt động y hệt như trước.
HTML của tôi có bị gửi lên máy chủ không?
Không. Mọi thao tác định dạng diễn ra cục bộ trong trình duyệt. Mã đánh dấu của bạn không bao giờ được tải lên, ghi log hay lưu trữ, nên an toàn để định dạng cả trang nội bộ hoặc chưa phát hành.
Có định dạng CSS và JavaScript bên trong trang không?
Có. Mã trong thẻ <style> và <script> được định dạng cùng HTML xung quanh, để toàn bộ tài liệu luôn nhất quán.
Tôi có đưa mỗi thuộc tính lên một dòng riêng được không?
Có. Đặt tùy chọn Thuộc tính thành "Mỗi dòng một" để tách mỗi thuộc tính ra một dòng riêng, hoặc để "Tự xuống dòng" cho Prettier tự quyết theo độ rộng dòng bạn chọn.
Công cụ có nén (minify) HTML luôn không?
Không. Công cụ này chuyên làm đẹp — nó bung và thụt lề mã đánh dấu cho dễ đọc chứ không nén lại. Để thu nhỏ trang cho production, hãy dùng một công cụ nén HTML chuyên dụng.
Nếu mã đánh dấu bị sai cấu trúc thì sao?
Nếu bộ phân tích không xử lý được đầu vào, công cụ sẽ hiện thông báo lỗi mô tả vấn đề thay vì tạo ra kết quả sai. Sửa lỗi được báo và kết quả đã định dạng sẽ xuất hiện lại.