Hai việc trái ngược trên cùng một đoạn văn bản. Định dạng thêm xuống dòng và thụt lề để con người theo được các lớp lồng nhau; rút gọn bỏ đi mọi thứ trình duyệt không cần. Ở đây cả hai đều làm việc trên đúng những ký tự bạn đưa vào, không phải trên một tài liệu được dựng lại, nên thứ đi ra vẫn là mã của bạn.

Cách dùng

1. 1 Dán HTML vào - cả trang hay chỉ một đoạn đều được.
2. 2 Chọn mức thụt lề, rồi bấm Định dạng hoặc Rút gọn.
3. 3 Sao chép kết quả, hoặc cho chạy qua nút kia để so sánh.

Khoảng trắng không phải lúc nào cũng là thừa

Giữa hai phần tử nội tuyến, một dấu cách chính là chữ nhìn thấy được: bỏ nó đi thì "one two" thành "onetwo". Giữa các phần tử khối, đúng dấu cách đó lại chẳng có nghĩa gì. Bộ rút gọn ở đây bỏ phần thụt lề nhưng giữ lại dấu cách phân tách ở nơi nó đang thật sự làm việc.

Vì sao pre và textarea được để nguyên

Bên trong chúng, mỗi dấu cách và mỗi lần xuống dòng đều là nội dung người đọc sẽ thấy. Thụt lề lại một khối mã sẽ lặng lẽ đổi thứ nó hiển thị, còn cắt gọt textarea sẽ đổi giá trị mà biểu mẫu gửi đi. Script và style cũng vậy: bên trong là một ngôn ngữ khác, nên được cho qua nguyên vẹn.

Nó định dạng, không sửa chữa

Những công cụ dựng trên bộ phân tích của trình duyệt lặng lẽ sửa mã hỏng: chúng đóng thẻ hộ bạn, vứt các thẻ lạc và dời phần tử về chỗ mà đặc tả đòi hỏi. Khi đang gỡ lỗi, đó thường không phải điều bạn muốn - con lỗi bạn đang truy có thể chính là thứ vừa bị "sửa". Công cụ này chỉ sắp lại văn bản và để nguyên các sai sót ở chỗ bạn nhìn thấy được.

Rút gọn HTML chỉ là cái lợi nhỏ

Bỏ khoảng trắng khỏi một trang thường chỉ tiết kiệm vài phần trăm, mà gzip trên máy chủ dẫu sao cũng đã nén gần hết chỗ đó. Sức nặng thật nằm ở ảnh, phông chữ và script. Hãy rút gọn HTML vì một bộ sinh khuôn mẫu để lại kết quả không đọc nổi, chứ không phải vì bạn trông đợi trang nhanh hơn nhiều.