Cách định dạng và nén mã HTML

Định dạng và nén HTML là hai thao tác đối lập phục vụ các mục đích khác nhau. Định dạng làm cho mã dễ đọc cho các nhà phát triển. Nén làm cho nó nhẹ cho các trình duyệt. Hầu hết các dự án cần cả hai — mã được định dạng trong quá trình phát triển, mã được nén trong sản xuất.

Định dạng: làm cho HTML dễ đọc

Một trình định dạng lấy HTML đã nén hoặc lộn xộn và thêm thụt lề thích hợp, ngắt dòng và khoảng cách nhất quán. Cấu trúc trở nên hiển thị trong nháy mắt.

Trước:

<div class="card"><h2>Tiêu đề</h2><p>Một chút văn bản ở đây</p><a href="/lien-ket">Đọc thêm</a></div>

Sau:

<div class="card">
  <h2>Tiêu đề</h2>
  <p>Một chút văn bản ở đây</p>
  <a href="/lien-ket">Đọc thêm</a>
</div>

Cách định dạng HTML

1. Dán HTML của bạn — nhập mã lộn xộn hoặc đã nén vào trình định dạng.
2. Đặt tùy chọn của bạn — chọn kích thước thụt lề (2 hoặc 4 khoảng trắng) và liệu bạn có muốn giữ các thẻ nội tuyến hay không.
3. Sao chép kết quả — HTML đã định dạng đã sẵn sàng cho trình soạn thảo của bạn.

Nén: làm cho HTML nhẹ

Một trình nén loại bỏ tất cả những gì trình duyệt không cần — khoảng trắng, chú thích, các thẻ đóng tùy chọn và các giá trị thuộc tính dư thừa. Kết quả là một chuỗi đơn lẻ và nhỏ gọn.

Cách nén HTML

1. Dán HTML đã định dạng của bạn — nhập mã có thụt lề, chú thích và khoảng trắng.
2. Cấu hình các tùy chọn — chọn loại bỏ chú thích, giảm khoảng trắng và tối ưu hóa các thuộc tính.
3. Sao chép đầu ra đã nén — sử dụng nó trong bản dựng sản xuất của bạn.

Khi nào sử dụng cái nào

Mẹo

• Tự động hóa trong quy trình build của bạn — hầu hết các công cụ (Webpack, Vite, Gulp) có thể tự động nén HTML khi triển khai. Viết mã được định dạng, gửi đi mã được nén.
• Định dạng trước khi commit — HTML sạch và nhất quán làm cho các diff Git dễ đọc hơn và việc đánh giá mã nhanh hơn.
• Việc nén sẽ không phá vỡ HTML của bạn — nó chỉ loại bỏ những gì không có tác dụng đến kết xuất. Chú thích, khoảng trắng dư thừa và các thẻ tùy chọn có thể được loại bỏ một cách an toàn.
• Sử dụng tô màu cú pháp — cả trình định dạng và trình nén đều cung cấp tô màu giúp xác minh rằng đầu ra là chính xác.