Trình kiểm tra cấu trúc HTML

Kiểm tra HTML là gì?

Công cụ kiểm tra HTML này tìm các lỗi cấu trúc hay làm vỡ bố cục nhất: phần tử không bao giờ được đóng, thẻ đóng sai thứ tự, thẻ đóng không có thẻ mở, id và thuộc tính trùng, <img> thiếu alt, và tài liệu đầy đủ thiếu doctype, <title> hoặc lang. Đây là bước kiểm tra cục bộ nhanh, không phải trình kiểm tra chính thức của W3C (Nu), và không kiểm tra phần tử nào được phép đặt ở đâu.

Cách sử dụng Kiểm tra HTML

1. Dán một tài liệu hoặc đoạn HTML.
2. Bấm Kiểm tra hợp lệ (kết quả cập nhật khi bạn gõ).
3. Đọc phần tóm tắt lỗi và cảnh báo.
4. Dùng dòng và cột của từng mục để sửa markup.

Ví dụ

<div id="a">
<span>text</div>
<p id="a">x
<img src="a.png">
</br>

Errors: 3 · Warnings: 1
Line 2, column 1 <span> is not closed before </div>
Line 3, column 4 Duplicate id "a" (first used on line 1)
Line 4, column 1 <img> has no alt attribute
Line 5, column 1 <br> is a void element and must not have a closing tag

Khi nào nên dùng Kiểm tra HTML

Dùng để nhanh chóng tìm thẻ làm vỡ bố cục, kiểm tra template và HTML email, hoặc bắt id trùng trước khi chúng làm hỏng JavaScript hay label. Để kiểm tra tuân thủ đầy đủ (mô hình nội dung, ARIA, giá trị thuộc tính), hãy dùng trình kiểm tra của W3C.

Kiểm tra HTML hoạt động như thế nào

Một bộ tách token đọc thẻ, thuộc tính, chú thích và phần tử văn bản thô (script, style, textarea, title) trong khi ghi lại vị trí. Một ngăn xếp phần tử đang mở tuân theo quy tắc HTML về phần tử rỗng (br, img, input…) và thẻ đóng tùy chọn: </p>, </li>, </td> và các thẻ tương tự có thể bỏ, và một <li> mới hoặc phần tử khối sẽ ngầm đóng phần tử trước, nên các cách viết tắt hợp lệ của HTML5 không bị báo. Nội dung SVG và MathML cho phép thẻ tự đóng. Mọi phần tử khác vẫn còn mở khi phần tử cha đóng, hoặc ở cuối đầu vào, đều là lỗi.

Các Trường Hợp Sử Dụng Phổ Biến

• ✓ Tìm thẻ div chưa đóng làm vỡ bố cục trang
• ✓ Kiểm tra đầu ra của CMS hoặc mẫu email
• ✓ Bắt id trùng làm hỏng tham chiếu label/aria
• ✓ Kiểm tra khả năng truy cập cơ bản cho ảnh thiếu văn bản alt

Câu Hỏi Thường Gặp

Khám phá thêm danh mục