tigtools

Trình định dạng HTML

Dán HTML để thụt lề theo cấp lồng nhau hoặc loại bỏ khoảng trắng không cần thiết. Mã chỉ được xử lý dưới dạng văn bản và không bao giờ được kết xuất.

Chạy ngay trên trình duyệt Không cần đăng ký

Chế độ
Thụt lề (dấu cách)

Nhập nội dung để xem kết quả.

Cách sử dụng

  1. Dán HTML vào ô nhập, mở tệp .html hoặc thử ví dụ.
  2. Chọn Làm đẹp để có mã thụt lề, dễ đọc hoặc Rút gọn để có đầu ra gọn nhẹ.
  3. Khi làm đẹp, hãy chọn 2 khoảng trắng, 4 khoảng trắng hoặc tab, và quyết định có giữ chú thích hay không.
  4. Sao chép kết quả hoặc tải xuống dưới dạng tệp .html.

Cách hoạt động

Trình định dạng đọc HTML bằng bộ tokenizer linh hoạt, giống như trình duyệt, rồi ghi lại. Công cụ không bao giờ kết xuất dữ liệu đầu vào, vì vậy các script trong mã được dán không thể chạy và không có gì được tải từ web.

Beautify đặt mỗi phần tử cấp khối (div, p, ul, li, section, table, …) trên dòng riêng, thụt lề theo độ sâu lồng nhau. Văn bản và các phần tử nội tuyến như a, b, em, span, code, img và br nằm cùng trên một dòng, nhờ đó khoảng trắng giữa các từ và liên kết không bị thay đổi theo cách làm biến đổi trang được hiển thị. Các chuỗi khoảng trắng và ngắt dòng trong văn bản được chuyển thành một khoảng trắng, đúng như cách trình duyệt hiển thị chúng.

Nội dung của các phần tử pre, textarea, script và style được sao chép chính xác như đã viết, bao gồm khoảng trắng và mọi ký tự < hoặc >. Các phần tử void như br, img, input, meta và link không bao giờ có thẻ đóng. Các thẻ tự đóng như <path /> trong SVG nội tuyến được giữ nguyên dạng tự đóng.

Minify thu gọn khoảng trắng trong văn bản thành một khoảng trắng, xóa khoảng trắng cạnh các phần tử cấp khối, chuẩn hóa khoảng trắng giữa các thuộc tính và, nếu “Giữ chú thích” đang tắt, sẽ xóa chú thích. Chú thích có điều kiện luôn được giữ lại.

Công cụ không sửa HTML không hợp lệ, không thêm thẻ bị thiếu, không sắp xếp lại thuộc tính hoặc thu gọn CSS và JavaScript bên trong các phần tử style và script. Các phần tử chưa được đóng sẽ được đóng ở cuối phần tử cha, còn thẻ đóng không có thẻ mở tương ứng được giữ nguyên như đã viết.

Ví dụ

Đọc mã HTML được tạo ra

Một CMS xuất mẫu dưới dạng một dòng dài. Beautify với 2 khoảng trắng hiển thị điều hướng, mục danh sách và nội dung chính dưới dạng cây thụt lề, trong khi “Prices include <strong>VAT</strong>.” vẫn nằm trên một dòng dễ đọc.

Chuẩn bị mẫu email

Minify email HTML và tắt chú thích để giảm kích thước. Khối <pre> chứa bảng giá và thẻ <style> nội tuyến được giữ nguyên như ban đầu.

Kiểm tra cấu trúc

Khi thiếu thẻ đóng </div>, đầu ra Beautify sẽ hiển thị các phần tử phía sau thụt lề sâu hơn một cấp, giúp dễ nhận biết vị trí đáng lẽ phần tử đó phải được đóng.

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

Việc làm đẹp có làm thay đổi giao diện trang của tôi không?

Hầu như không. Khoảng trắng bên trong các phần tử dạng khối bị gộp lại và chuyển thành ngắt dòng, trình duyệt sẽ bỏ qua. Văn bản và phần tử nội tuyến vẫn nằm trên cùng một dòng, còn pre, textarea, script và style không bị thay đổi. Ngoại lệ là các trang dựa vào CSS white-space: pre trên các phần tử thường.

Công cụ có rút gọn CSS và JavaScript bên trong trang không?

Không. Nội dung script và style được giữ nguyên như đã viết nên không thể bị hỏng. Hãy dùng trình định dạng CSS để rút gọn riêng tệp stylesheet.

Có an toàn khi dán HTML từ nguồn không xác định không?

Có. Dữ liệu nhập chỉ được xử lý dạng văn bản và không bao giờ được chèn vào trang, vì vậy script trong đó không chạy và hình ảnh hay liên kết không được tải.

Công cụ có xác thực HTML của tôi không?

Không. Công cụ cố ý dễ tính và định dạng cả mã lỗi thay vì từ chối. Các thẻ đóng không khớp được giữ nguyên, nhờ đó thụt lề giúp bạn phát hiện chúng, nhưng không tạo danh sách lỗi.

Quyền riêng tư

HTML của bạn chỉ được xử lý trong trình duyệt và không bao giờ bị kết xuất hay tải lên. Không có gì bị lưu trữ hoặc đưa vào phân tích.