Định dạng HTML
Làm đẹp HTML lộn xộn, hoặc thu gọn để đưa lên production.
Chạy ngay trên trình duyệt. Không có gì bạn nhập vào bị gửi đi đâu cả.
- Thụt lề 2 hoặc 4 dấu cách
- Thu gọn chỉ một cú click
- Không tải gì lên
Cách định dạng HTML
- Dán HTML của bạn.
- Chọn độ rộng thụt lề, hoặc bật thu gọn.
- Sao chép hoặc tải kết quả.
Làm đẹp so với thu gọn
| Làm đẹp | Thu gọn | |
|---|---|---|
| Thụt lề | Thêm 2, 4 hoặc 8 dấu cách | Loại bỏ |
| Chú thích | Giữ lại | Bị xóa |
| Khoảng trắng giữa các thẻ | Được chuẩn hóa | Bị xóa |
| Nội dung trong pre, textarea, script, style | Không đụng đến | Không đụng đến |
HTML thu gọn quan trọng ở đâu
- Một trang production tải nhanh hơn một chút và tốn ít băng thông hơn khi khoảng trắng và chú thích đã biến mất.
- Markup đã thu gọn khó đọc hơn trong view-source, một sự đánh đổi hợp lý ở production nhưng là điểm trừ khi debug.
Mẹo khi định dạng HTML
- Giữ một bản có thụt lề, dễ đọc trong source control và chỉ thu gọn phần bạn deploy, vì debug markup đã thu gọn bằng mắt rất chậm.
- Thụt lề 2 dấu cách hợp với markup lồng sâu, còn 4 dấu cách dễ rà soát hơn trên trang đơn giản, ít lồng.
Thụt lề ảnh hưởng và không ảnh hưởng đến điều gì
- Nó không bao giờ làm thay đổi những gì trình duyệt hiển thị, vì khoảng trắng giữa các thẻ khối luôn bị gộp lại dù thế nào.
- Nó có thể làm lệch khoảng cách rõ rệt giữa các phần tử nội tuyến như <span>, nếu một thiết kế phụ thuộc vào khoảng trắng chính xác ở đó. Hãy kiểm tra những chỗ đó sau khi định dạng.
- Nó không ảnh hưởng gì đến hành vi JavaScript, vì cấu trúc DOM của trang vẫn giữ nguyên dù thế nào.
Câu hỏi thường gặp về Định dạng HTML
Thu gọn ở đây làm gì?
Nó loại bỏ chú thích và khoảng trắng giữa các thẻ, mà không đụng đến văn bản hay thuộc tính bên trong thẻ pre, textarea, script và style.
Định dạng có làm thay đổi giao diện trang của tôi không?
Không. Thụt lề và khoảng cách giữa các thẻ không ảnh hưởng đến việc hiển thị, nên trang trông giống hệt trước và sau khi định dạng.
Công cụ có sửa thẻ bị hỏng hoặc chưa đóng không?
Không. Nó chỉ định dạng lại HTML bạn đưa vào. Hãy sửa thẻ thiếu hoặc không khớp trong trình soạn thảo của bạn trước.
Tôi có thể định dạng cả một tài liệu HTML đầy đủ không?
Được, kể cả doctype, head và body. Tài liệu rất dài có thể mất một chút thời gian để định dạng.
Công cụ có xác thực HTML của tôi không?
Không. Nó chỉ định dạng lại hoặc thu gọn markup bạn đưa vào, và không kiểm tra alt text bị thiếu, thẻ chưa đóng hay các vấn đề xác thực khác.
Thẻ style và script nội tuyến có được định dạng lại không?
Có, khi làm đẹp. Bộ định dạng thụt lề cả CSS bên trong thẻ style và JavaScript bên trong thẻ script cùng với markup xung quanh.
Thu gọn có xóa chú thích mà một hệ thống template dùng không?
Chú thích HTML chuẩn (<!-- ... -->) luôn bị xóa, kể cả loại mà một hệ thống template có thể dùng làm điểm đánh dấu. Nếu chú thích của bạn mang ý nghĩa ở nơi khác, chỉ dùng định dạng và bỏ qua thu gọn.
Tôi có thể định dạng chỉ một đoạn nhỏ, không phải cả tài liệu không?
Được. Một đoạn vài thẻ định dạng giống hệt như cả một trang. Nó không cần doctype, head hay body để hoạt động.