Làm đẹp mã HTML ngay lập tức để làm sạch, có thể đọc được, và cấu trúc trang web.
Giới thiệu
Mã HTML lấy từ một trang web đang chạy, xuất ra từ trình dựng trang hoặc sao chép từ một mẫu email thường bị nén lại trong vài dòng mà không hề có thụt lề — về mặt kỹ thuật thì vẫn hợp lệ, nhưng con người đọc thì rất vất vả. Làm đẹp mã sẽ đảo ngược điều đó: nó dựng lại các dấu ngắt dòng và phần thụt lề giúp nhìn thấy rõ các thẻ lồng vào nhau ra sao, mà không làm thay đổi bất cứ điều gì mã đó thực thi. Điều này quan trọng mỗi khi mục đích là thật sự đọc hoặc nghiên cứu mã HTML chứ không chỉ để trình duyệt hiển thị nó — chẳng hạn khi bạn muốn hiểu một trang được dựng như thế nào, xem lại bài nộp của học sinh, hay tìm ra vì sao một phần nội dung hiển thị không đúng.
Công cụ này định dạng mã của bạn như thế nào
Khi bạn dán mã HTML vào rồi bấm “Làm đẹp”, mã sẽ được dựng lại với mức thụt lề hai khoảng trắng, mỗi thẻ tương ứng một cấp lồng nhau, nhờ vậy chỉ cần nhìn qua là thấy phần tử nào nằm bên trong phần tử nào. Có vài điểm đáng biết về cách công cụ xử lý mã HTML thực tế:
- Chú thích được giữ lại chứ không bị xóa. Các chú thích HTML, kể cả chú thích điều kiện và khối CDATA, đều được chuyển sang nguyên vẹn — rất tiện nếu trong mã của bạn có phần ghi nguồn, ghi chú TODO hay một chú thích giấy phép cần giữ nguyên.
- Khối
<script>và<style>chỉ được đặt lại vị trí chứ không bị viết lại. Phần thụt lề của chúng được chỉnh cho khớp với chỗ chúng nằm trong mã HTML xung quanh, nhưng phần JavaScript hay CSS bên trong thì không được định dạng lại riêng. Nếu mã bên trong một khối script hay style vốn đã lộn xộn thì nó vẫn lộn xộn — thứ duy nhất được dọn dẹp là vị trí của nó so với mã HTML bao quanh. Hãy dùng thẳng JavaScript Beautifier hoặc CSS Beautifier cho phần nội dung đó nếu nó cũng cần được định dạng riêng.
Những điều cần biết trước khi dùng
Công cụ này xử lý tốt mã HTML thông thường và được viết chuẩn. Có ba điểm cụ thể bạn nên kiểm tra trước khi tin tưởng kết quả với những đoạn mã ít gặp hơn:
- Một vài phần tử HTML5 tự đóng không được nhận diện là tự đóng. Danh sách các thẻ mà công cụ này xem là không cần thẻ đóng, khi đối chiếu với danh sách phần tử rỗng trong bản đặc tả HTML hiện hành, còn thiếu một vài thẻ mới hơn — cụ thể là
<source>(dùng bên trong<video>,<audio>và<picture>),<track>(dùng bên trong<video>cho phụ đề) và<col>(dùng bên trong<colgroup>ở bảng). Nếu mã HTML của bạn dùng bất kỳ thẻ nào trong số đó theo cách viết thông thường — tức là không có dấu gạch chéo/>ở cuối — thì mọi thứ phía sau thẻ ấy có thể bị thụt lề sâu hơn một cấp, vì trình định dạng vẫn đang chờ một thẻ đóng không bao giờ xuất hiện. Viết các thẻ này kèm dấu gạch chéo tự đóng rõ ràng (<source />) sẽ tránh được vấn đề. - Công cụ không sửa mã HTML bị hỏng. Nếu một thẻ trong mã gốc của bạn không bao giờ được đóng, hoặc các thẻ không khớp nhau, công cụ vẫn định dạng lại cấu trúc mà nó tìm thấy mà không báo lỗi dừng, nhưng nó cũng không chèn thêm thẻ đóng còn thiếu hay khắc phục nguyên nhân gốc rễ. Kết quả vẫn sẽ thiếu đúng những gì đầu vào đã thiếu — đây là công cụ định dạng, không phải công cụ kiểm tra tính hợp lệ.
- Thẻ nội tuyến nằm giữa câu có thể bị đẩy xuống dòng riêng. Những thẻ như
<strong>,<em>hay<a>xuất hiện trong một đoạn văn xuôi có thể bị tách khỏi các từ xung quanh và nằm ở dòng riêng, vì công cụ này không xếp chúng vào nhóm cần “giữ trên cùng một dòng” như một số trình định dạng khác. Điều đó không làm thay đổi cách trình duyệt hiển thị mã HTML — khoảng trắng giữa các thẻ dù sao cũng được gộp lại — nhưng bạn nên lường trước nếu đang định dạng nội dung nhiều chữ với hàng loạt thẻ định kiểu nội tuyến.
Không điều nào trong số này làm thay đổi những gì mã HTML thực sự làm khi trình duyệt hiển thị — tất cả chỉ liên quan đến việc mã trông ra sao khi một người đọc trực tiếp, chứ không phải cách một trang hiển thị.
Khi nào đây là công cụ phù hợp
- Đọc mã HTML của một trang thật để học hỏi từ đó. Xem mã nguồn của một trang web hoặc kiểm tra bằng công cụ dành cho nhà phát triển của trình duyệt thường cho ra đoạn mã bị nén hoặc do máy sinh ra, gần như không có cấu trúc — làm đẹp mã giúp bạn thật sự nghiên cứu được một trang được dựng nên như thế nào, một ứng dụng đúng nghĩa cho năng lực số chứ không chỉ để định dạng mã của chính mình.
- Xem lại bài tập HTML của học sinh. Mã được dán qua lại giữa các trình soạn thảo hoặc xuất ra từ trình dựng trang đôi khi mất hết định dạng ban đầu; làm đẹp trước khi đọc sẽ giúp việc chấm bài và nhận xét nhanh hơn.
- Gỡ lỗi đoạn mã hiển thị không đúng. Mã HTML dày đặc, không định dạng thì khó dò ra một thẻ bị thiếu hoặc đặt sai chỗ — định dạng trước thường giúp vấn đề cấu trúc thật sự lộ ra dễ hơn, dĩ nhiên vẫn nhớ rằng công cụ này sẽ không sửa giúp bạn một thẻ thật sự bị hỏng.
Nếu mã HTML của bạn dùng nhiều thẻ <source>, <track> hay <col> mà không có dấu gạch chéo tự đóng rõ ràng, hãy kiểm tra lại phần thụt lề sau những thẻ đó trong kết quả — xem phần hạn chế ở trên. Còn với mã trang thông thường, đây là cách nhanh chóng để có một cấu trúc dễ đọc mà không cần cài trình soạn thảo hay tiện ích mở rộng nào.
Ví dụ
Một học sinh được giao nhiệm vụ xem xét trang chủ của một website thật và mô tả phần điều hướng chính được tổ chức ra sao trong mã HTML. Khi xem mã nguồn của trang, em chỉ thấy một dòng duy nhất dày đặc, đã bị nén, không có chút khoảng cách nào. Dán dòng đó vào công cụ này rồi làm đẹp sẽ biến nó thành đoạn mã thụt lề đàng hoàng, nhờ vậy mới thấy được những phần tử <nav>, <ul> và <li> nào lồng bên trong phần tử nào, và phần điều hướng liên hệ ra sao với phần còn lại của trang — đúng kiểu đọc hiểu cấu trúc mà nếu chỉ nhìn một dòng chưa định dạng thì khó hơn rất nhiều.
Câu hỏi thường gặp
Làm đẹp mã có làm thay đổi cách HTML hiển thị không?
Không. Chỉ có khoảng trắng và dấu ngắt dòng thay đổi — các thẻ, thuộc tính và nội dung vẫn giữ nguyên, nên trang hiển thị y hệt nhau trên trình duyệt trong cả hai trường hợp.
Chú thích HTML có bị xóa không?
Không — các chú thích, kể cả chú thích điều kiện, đều được giữ nguyên trong kết quả.
Phần CSS hoặc JavaScript nằm trong HTML của tôi có được định dạng luôn không?
Không được định dạng riêng. Khối <script> và <style> được đặt lại vị trí cho khớp với thụt lề của mã HTML xung quanh, nhưng phần mã bên trong chúng thì không được định dạng lại độc lập. Hãy dùng thẳng JavaScript Beautifier hoặc CSS Beautifier cho phần nội dung đó nếu nó cần được định dạng riêng.
Công cụ có sửa các thẻ bị hỏng hoặc chưa đóng không?
Không. Công cụ này định dạng cấu trúc mà nó tìm thấy; nó không kiểm tra tính hợp lệ của HTML và cũng không chèn thêm thẻ đóng còn thiếu.
Công cụ xử lý các thẻ <source>, <track> và <col> có chính xác không?
Không thật sự đáng tin khi chúng được viết mà không có dấu gạch chéo tự đóng rõ ràng — phần nội dung phía sau có thể bị thụt lề sâu hơn một cấp. Viết chúng thành <source /> sẽ tránh được điều này. Xem mục “Những điều cần biết trước khi dùng” ở trên.
Mã của tôi có được lưu lại ở đâu không?
Không. Mã HTML bạn dán vào được xử lý để tạo ra kết quả đã định dạng rồi không được lưu giữ sau đó; hệ thống chỉ ghi nhận việc công cụ đã được sử dụng, chứ không ghi lại chính đoạn mã.
Tôi có thể dùng những công cụ liên quan nào?
Hãy dùng JavaScript Beautifier hoặc CSS Beautifier để định dạng phần JavaScript hay CSS bên trong mã HTML của bạn, hoặc HTML Minifier để nén lại mã HTML đã hoàn thiện cho môi trường vận hành.
