Định dạng lại HTML cho dễ đọc: quy tắc thụt đầu dòng và những chỗ công cụ dễ sai
Công cụ tách các thẻ HTML dính liền nhau thành từng dòng riêng rồi thụt đầu dòng theo mức lồng nhau, mỗi cấp hai dấu cách. Mục đích là biến một khối HTML bị nén thành một dòng trở lại thành thứ đọc được để dò lỗi cấu trúc, kèm sẵn một nút nén ngược lại khi bạn cần bản gọn.
Tính năng nổi bật
- Tách các thẻ đang dính nhau thành từng dòng riêng để nhìn ra cấu trúc
- Thụt đầu dòng theo mức lồng nhau, mỗi cấp hai dấu cách
- Nhận diện mười bốn thẻ rỗng theo chuẩn HTML nên không tăng mức thụt sau chúng
- Bỏ qua khai báo kiểu tài liệu và các dòng bắt đầu bằng dấu chấm than khi tính mức thụt
- Nút nén ngược lại gộp toàn bộ về một dòng khi bạn cần bản gọn
- Nút sao chép kết quả và nút xóa nhanh ô nhập
- Hai ô đặt song song để đối chiếu bản gốc với bản đã định dạng
- Chạy hoàn toàn trên trình duyệt, mã bạn dán vào không được gửi lên máy chủ
Khi nào bạn cần định dạng lại một khối HTML
Tình huống quen thuộc nhất là bạn nhận về một khối HTML đã bị nén thành một dòng dài vài nghìn ký tự: mã lấy từ trang đã xuất bản, mã do một hệ quản trị nội dung sinh ra, mã trong một mẫu thư điện tử, hoặc một đoạn nhúng từ bên thứ ba. Ở dạng đó, việc tìm xem thẻ nào chưa đóng hay khối nào lồng sai gần như bất khả thi. Tình huống thứ hai là khi bạn phải sửa một trang cũ không có ai duy trì, mã viết tay qua nhiều đời và mức thụt đầu dòng đã loạn hết. Tình huống thứ ba đơn giản hơn: bạn muốn dán một đoạn HTML vào tài liệu hướng dẫn hoặc vào bài viết kỹ thuật và cần nó trông tử tế. Trong cả ba, thứ bạn cần là một bước xử lý nhanh ngay trong trình duyệt, không phải dựng dự án hay cài công cụ định dạng vào máy. Đổi lại sự nhanh gọn đó, công cụ này làm việc theo cách đơn giản và có những giới hạn cụ thể mà bạn nên biết trước khi tin vào kết quả.
Lợi ích khi sử dụng
- Nhìn ra cấu trúc lồng nhau của một khối HTML lạ chỉ trong vài giây
- Phát hiện thẻ chưa đóng qua chỗ mức thụt đầu dòng nhảy bất thường
- Không cần cài công cụ định dạng hay dựng dự án chỉ để xử lý một đoạn mã
- Mã nguồn nội bộ không rời khỏi trình duyệt
- Có sẵn cả hai chiều định dạng và nén trong cùng một màn hình
Cách định dạng lại một khối HTML
- 1Dán khối HTML cần xử lý vào ô bên trái.
- 2Bấm nút định dạng, kết quả hiện ngay ở ô bên phải với các thẻ đã tách dòng và thụt đầu dòng.
- 3Đọc từ trên xuống để dò cấu trúc, chú ý những chỗ mức thụt nhảy bất thường vì đó thường là dấu hiệu thẻ chưa đóng.
- 4Nếu trong mã có thẻ giữ nguyên định dạng hoặc có mã kịch bản, hãy kiểm tra lại đúng những vùng đó trước khi dùng kết quả.
- 5Bấm sao chép để lấy kết quả, hoặc bấm nút nén nếu điều bạn cần là bản gộp về một dòng.
Quy tắc thụt đầu dòng mà công cụ áp dụng
Công cụ làm ba việc theo thứ tự. Việc thứ nhất là chèn dấu xuống dòng vào mọi chỗ có dấu đóng thẻ đứng ngay trước dấu mở thẻ, kể cả khi giữa chúng chỉ có khoảng trắng. Nhờ vậy một khối bị nén thành một dòng sẽ vỡ ra thành nhiều dòng, mỗi dòng thường là một thẻ. Việc thứ hai là duyệt từng dòng và đếm mức lồng: gặp thẻ đóng thì giảm một mức trước khi ghi dòng, gặp thẻ mở thì tăng một mức sau khi ghi dòng. Việc thứ ba là chèn hai dấu cách cho mỗi mức lồng vào đầu dòng. Có hai ngoại lệ được xử lý riêng. Ngoại lệ thứ nhất là nhóm thẻ rỗng, tức những thẻ không có thẻ đóng, gồm br, hr, img, input, meta, link, area, base, col, embed, param, source, track và wbr; sau những thẻ này mức thụt không tăng vì chúng không mở ra khối nào. Ngoại lệ thứ hai là những dòng bắt đầu bằng dấu nhỏ hơn kèm dấu chấm than, tức khai báo kiểu tài liệu và chú thích, chúng cũng không làm tăng mức thụt. Mức thụt luôn được giữ không âm, nên mã thừa thẻ đóng sẽ không đẩy kết quả ra ngoài lề trái.
Vì sao kết quả có thể lệch dần sang phải, và cách đọc dấu hiệu đó
Đây là hạn chế lớn nhất và bạn nên biết để không hiểu nhầm kết quả. Công cụ tính mức lồng dựa trên thẻ đầu tiên tìm thấy trong mỗi dòng. Với những dòng chỉ chứa đúng một thẻ thì cách này chạy đúng. Nhưng một dòng chứa cả thẻ mở lẫn thẻ đóng, ví dụ một thẻ đoạn văn có chữ nằm giữa và đóng ngay trên cùng dòng, sẽ bị tính là mở mà không được tính là đóng, khiến mức lồng tăng thêm một bậc và không bao giờ được trả lại. Hệ quả là càng xuống dưới, mã càng bị đẩy dần sang phải, và với một trang dài thì mức thụt có thể lên tới vài chục cấp trông rất kỳ quặc. Điều quan trọng là hiểu đúng bản chất: phần lệch đó là lỗi đếm của công cụ chứ không phải cấu trúc HTML của bạn có vấn đề. Ngược lại, một mức thụt nhảy vọt tại đúng một vị trí rồi giữ nguyên mới là dấu hiệu đáng ngờ về thẻ chưa đóng. Khi cần độ chính xác cao, hãy dùng công cụ định dạng dựa trên bộ phân tích cú pháp thật, chẳng hạn phần mở rộng định dạng mã trong trình soạn thảo của bạn.
Những vùng mã không nên để công cụ đụng vào
Vùng thứ nhất là thẻ giữ nguyên định dạng và ô nhập nhiều dòng. Trong hai thẻ này, mọi dấu cách và dấu xuống dòng đều là nội dung hiển thị thật, nên khi công cụ chèn thêm dấu xuống dòng và dấu cách vào đầu dòng, nội dung người dùng nhìn thấy sẽ đổi theo. Với một khối mã ví dụ đặt trong thẻ giữ nguyên định dạng, kết quả là toàn bộ khối bị thụt lệch. Vùng thứ hai là mã kịch bản và mã định kiểu nhúng trong trang. Công cụ không hiểu nội dung bên trong hai thẻ này, nó chỉ thấy đó là chữ, nên phần lớn trường hợp nội dung được giữ nguyên trên một dòng, nhưng mức thụt của các dòng lân cận có thể bị tính sai vì trong mã có thể xuất hiện dấu lớn hơn và dấu nhỏ hơn dùng làm toán tử so sánh. Vùng thứ ba là các thuộc tính có giá trị chứa dấu ngoặc nhọn, chẳng hạn một thuộc tính chứa đoạn dữ liệu JSON hoặc một biểu thức của khung giao diện. Nguyên tắc an toàn là sau khi định dạng, hãy rà lại đúng ba vùng này trước khi dùng kết quả cho trang đang chạy thật.
Mã đẹp giúp gì cho việc dò lỗi cấu trúc HTML
Khi mã đã được thụt đầu dòng, có vài loại lỗi lộ ra rất nhanh mà nhìn bản nén thì không thấy. Loại thứ nhất là thẻ chưa đóng, biểu hiện qua việc mức thụt tăng lên một cấp rồi cả phần còn lại của tài liệu nằm ở cấp đó mãi. Loại thứ hai là lồng chéo, tức mở thẻ nhấn mạnh rồi mở thẻ in đậm nhưng lại đóng theo thứ tự ngược; trình duyệt tự sửa được nhưng bố cục sinh ra thường không như bạn nghĩ. Loại thứ ba là đặt thẻ sai chỗ theo quy tắc nội dung, ví dụ đặt một thẻ khối vào trong một thẻ đoạn văn, hoặc đặt thẻ ngoài hàng thẳng vào trong thẻ bảng mà không qua thẻ ô. Loại thứ tư là những khối trùng lặp do dán nhầm, rất dễ nhận ra khi nhìn hai đoạn thụt giống hệt nhau nối tiếp. Sau khi định dạng và soi bằng mắt, bước tiếp theo nên làm là đưa mã qua bộ kiểm tra chuẩn của tổ chức quản lý tiêu chuẩn web, vì nó phát hiện được cả những lỗi mà mắt bỏ qua như thuộc tính trùng lặp hay giá trị không hợp lệ.
Nút nén trên trang này khác gì công cụ nén chuyên dụng
Nút nén ở đây làm đúng hai việc: bỏ khoảng trắng nằm giữa các thẻ, rồi gộp mọi chuỗi khoảng trắng còn lại thành một dấu cách duy nhất. Nó không có tùy chọn nào và không xóa chú thích. Điều đó có nghĩa là nó phù hợp khi bạn chỉ cần một bản gọn để dán vào một ô cấu hình hay một trường dữ liệu, chứ không phải để tối ưu trang chạy thật. Có hai điểm cần cảnh giác. Thứ nhất, việc gộp mọi khoảng trắng sẽ phá hỏng nội dung trong thẻ giữ nguyên định dạng và trong ô nhập nhiều dòng, đúng như phần trên đã nói. Thứ hai, nếu trong trang có mã kịch bản nhúng chứa chú thích một dòng bắt đầu bằng hai dấu gạch chéo, việc gộp về một dòng sẽ khiến toàn bộ phần mã phía sau nằm chung dòng với chú thích đó và bị vô hiệu hóa, tức trang hỏng hẳn chứ không chỉ xấu. Vì vậy chỉ nén những khối HTML thuần không kèm mã kịch bản. Với việc tối ưu trang thật, hãy dùng công cụ nén có tùy chọn riêng, và nhớ rằng phần lớn lợi ích về dung lượng đến từ việc bật nén ở máy chủ chứ không phải từ việc bỏ khoảng trắng.
Câu hỏi thường gặp (FAQ)
Mã HTML tôi dán vào có bị gửi lên máy chủ không?
Không. Toàn bộ việc tách dòng, đếm mức lồng và thụt đầu dòng chạy bằng JavaScript ngay trong tab trình duyệt, không có lời gọi mạng nào mang nội dung đi và không có lịch sử nào được lưu. Đóng tab là mã biến mất, nên dùng được với mã nguồn nội bộ.
Vì sao mã càng xuống dưới càng lệch dần sang phải?
Vì công cụ chỉ nhìn thẻ đầu tiên trên mỗi dòng để đếm mức lồng, nên dòng nào chứa cả thẻ mở lẫn thẻ đóng sẽ bị tính là mở mà không được trừ lại. Đây là lỗi đếm của công cụ chứ không phải cấu trúc HTML của bạn có vấn đề, phần nội dung vẫn nguyên vẹn.
Mức thụt đầu dòng đổi được sang bốn dấu cách hay dùng tab không?
Không, công cụ cố định hai dấu cách cho mỗi cấp. Nếu quy ước của dự án bạn là bốn dấu cách hoặc dùng phím tab, hãy chạy lại kết quả qua công cụ định dạng mã trong trình soạn thảo, nơi bạn khai báo được quy ước riêng cho từng dự án.
Nội dung trong thẻ giữ nguyên định dạng có bị ảnh hưởng không?
Có, và đây là điểm cần cẩn thận nhất. Trong thẻ giữ nguyên định dạng và trong ô nhập nhiều dòng, mọi dấu cách và dấu xuống dòng đều là nội dung hiển thị, nên việc chèn thêm xuống dòng và thụt đầu dòng sẽ làm đổi thứ người dùng nhìn thấy. Hãy kiểm tra lại đúng những vùng đó.
Công cụ xử lý mã kịch bản và mã định kiểu nhúng thế nào?
Nó không hiểu nội dung bên trong hai thẻ đó, chỉ coi là chữ nên phần lớn trường hợp nội dung được giữ nguyên trên một dòng. Tuy nhiên các dấu lớn hơn và nhỏ hơn dùng làm toán tử trong mã có thể khiến việc đếm mức lồng ở các dòng lân cận bị sai.
Công cụ có sửa được thẻ chưa đóng không?
Không, nó không sửa gì mà chỉ trình bày lại. Nhưng sau khi định dạng thì lỗi này lộ ra khá rõ: mức thụt tăng lên một cấp rồi cả phần còn lại của tài liệu nằm mãi ở cấp đó. Nhìn ra vị trí bắt đầu lệch là bạn tìm được thẻ thiếu.
Mười bốn thẻ rỗng là những thẻ nào?
Gồm br, hr, img, input, meta, link, area, base, col, embed, param, source, track và wbr. Đây là các thẻ không có thẻ đóng theo chuẩn HTML, nên công cụ không tăng mức thụt sau chúng. Thẻ tự đóng bằng dấu gạch chéo trước dấu lớn hơn cũng được xử lý tương tự.
Xử lý được khối HTML dài bao nhiêu?
Không có giới hạn cứng, nhưng mọi thứ chạy trong trình duyệt và kết quả được đổ vào một ô văn bản duy nhất, nên với tệp vài nghìn dòng thì thao tác cuộn và bôi đen bắt đầu chậm. Với tệp lớn, nên định dạng ngay trong trình soạn thảo mã của bạn.
Định dạng xong dán lại vào trang có làm đổi giao diện không?
Trong phần lớn trường hợp là không, vì trình duyệt gộp mọi chuỗi khoảng trắng thành một dấu cách khi hiển thị. Nhưng có hai chỗ đổi thật: nội dung trong thẻ giữ nguyên định dạng, và khoảng cách giữa các phần tử hàng ngang như thẻ ngoài hàng hoặc ô danh sách xếp ngang.
Nút nén ở đây có dùng cho trang chạy thật được không?
Không nên. Nó không có tùy chọn, không xóa chú thích, và việc gộp mọi khoảng trắng sẽ phá mã kịch bản nhúng có chú thích một dòng. Với trang chạy thật, hãy dùng công cụ nén có tùy chọn riêng và quan trọng hơn là bật nén ở phía máy chủ.
Sau khi định dạng thì nên kiểm tra tiếp bằng gì?
Đưa mã qua bộ kiểm tra chuẩn của tổ chức quản lý tiêu chuẩn web. Nó phát hiện được những lỗi mà nhìn mắt thường bỏ qua, ví dụ thuộc tính trùng lặp trên cùng một thẻ, giá trị thuộc tính không hợp lệ, hoặc thẻ đặt sai vị trí theo quy tắc nội dung.
Có định dạng được XML hay mã của khung giao diện không?
Với XML thuần thì thường chạy được vì cấu trúc thẻ tương tự. Với mã của các khung giao diện có cú pháp riêng, chẳng hạn biểu thức đặt trong dấu ngoặc nhọn hay thuộc tính viết theo kiểu chữ hoa lẫn thường, kết quả không đáng tin và bạn nên dùng công cụ định dạng dành riêng cho khung đó.
Từ khóa liên quan
- format html online
- định dạng lại code html
- html beautifier online
- làm đẹp code html miễn phí
- thụt đầu dòng html
- html bị nén thành một dòng
- kiểm tra thẻ html chưa đóng
- cấu trúc lồng nhau của html
- thẻ rỗng trong html
- công cụ format code trên trình duyệt
- chuẩn hóa code html
- đọc code html của trang web
- sửa code html cũ
- html indent 2 space
- lỗi lồng thẻ html
- kiểm tra html hợp lệ
- format html cho email template
- prettify html online
- format html không cần cài đặt
- công cụ dành cho lập trình web
