Khôi phục định dạng HTML trực tuyến
Biến mã nguồn trang đã rút gọn thành mã đánh dấu dễ đọc. Các thẻ được thụt lề theo độ sâu lồng nhau, thuộc tính được sắp xếp rõ ràng, script và style nội tuyến được định dạng cùng tài liệu.
Vì sao mã nguồn trang khó đọc
Công cụ rút gọn HTML gộp khoảng trắng giữa các thẻ, xóa chú thích, lược bỏ thẻ đóng không bắt buộc và bỏ dấu nháy quanh giá trị thuộc tính khi được phép. Việc ghép mẫu phía máy chủ cũng làm mã khó theo dõi hơn: một trang được tạo từ hàng chục phần mẫu đến trình duyệt như một luồng liên tục, không thể hiện ranh giới các tệp nguồn. Mở mã nguồn của nhiều website đang hoạt động, bạn sẽ thấy chỉ vài dòng khổng lồ, đến mức muốn tìm thẻ đóng của một phần cũng phải dò từng cặp dấu ngoặc nhọn bằng mắt.
Cấu trúc là điều quan trọng nhất
HTML có cấu trúc cây, nhưng cấu trúc ấy khó đọc khi bị trải phẳng thành một dòng. Thụt lề theo độ sâu cho thấy ngay hình dạng tài liệu: phần đầu trang kết thúc ở đâu, vùng chứa nào bọc nội dung chính, thành phần nằm sâu đến mức nào và phần tử nào thiếu thẻ đóng. Mã nguồn đã định dạng vì thế rất hữu ích để kiểm tra thứ tự tiêu đề, xem mã đánh dấu do framework tạo ra hoặc tìm hiểu cách một website khác tổ chức phần nội dung mà bạn quan tâm.
Script và style nội tuyến cũng được xử lý
Một trang thực tế hiếm khi chỉ chứa mã đánh dấu. Đoạn mã phân tích, dữ liệu có cấu trúc JSON-LD, đối tượng cấu hình và CSS thiết yếu thường được nhúng trực tiếp trong tài liệu, và cũng bị rút gọn. Trình định dạng dùng bộ phân tích phù hợp cho từng khối: JavaScript trong thẻ script trở thành mã dễ đọc, còn nội dung thẻ style thành CSS được trình bày rõ ràng. Tất cả vẫn nằm trong tài liệu HTML có thụt lề đúng cấu trúc.
Tôn trọng các thẻ nhạy cảm với khoảng trắng
Thụt lề HTML làm thay đổi khoảng trắng giữa các thẻ, trong khi khoảng trắng đôi khi ảnh hưởng đến hiển thị. Trình định dạng có tính đến điều đó: nội dung của pre và textarea được giữ nguyên, còn các phần tử nội tuyến được xử lý để tránh thêm hoặc bớt khoảng trắng hiển thị quanh văn bản. Bạn có được tài liệu dễ đọc hơn mà vẫn hướng tới việc giữ nguyên cách trang hiển thị. Với tài liệu quan trọng, hãy kiểm tra bản đã định dạng trước khi sử dụng lại.
Câu hỏi thường gặp
Có thể dán toàn bộ mã nguồn trang không?
Có. Sao chép mã nguồn bằng chức năng xem nguồn của trình duyệt, hoặc lưu trang rồi mở tệp. Toàn bộ tài liệu, bao gồm head, body, script nội tuyến và dữ liệu có cấu trúc, sẽ được định dạng.
Định dạng có làm thay đổi cách trang hiển thị không?
Thông thường là không. Các phần tử nhạy cảm với khoảng trắng như pre và textarea được giữ nguyên, và nội dung nội tuyến được xử lý cẩn thận. Dù vậy, hãy định dạng một bản sao để đọc và kiểm tra trước khi đưa kết quả trở lại môi trường vận hành.
Có dùng được với mẫu Twig hoặc Blade không?
Một phần. Mã đánh dấu HTML thuần được định dạng bình thường, nhưng thẻ mẫu có cú pháp riêng có thể khiến bộ phân tích HTML không xử lý được. Công cụ dành cho HTML mà trình duyệt nhận được, thay vì mã mẫu dùng để sinh ra HTML đó.