HTML5 | Công cụ kiểm tra thẻ không được tiết lộ

Lưu ý: Khi một số thẻ không được đóng đúng cách, điều này có thể dẫn đến hiệu ứng quả cầu tuyết khi cho thấy nhiều thẻ không được đóng, hầu hết, thủ phạm nằm ở nửa dưới của danh sách lỗi, ở giữa hoặc sau phần tử cuối cùng trong danh sách lỗi và việc sửa (các) thẻ không được đóng sẽ khiến toàn bộ tài liệu vượt qua quá trình kiểm tra (giả sử đầu vào được cung cấp là mã HTML5 hợp lệ). Nếu mã dài, đôi khi có thể chia nó thành các phần nhỏ hơn để thu hẹp các thẻ chưa được đóng.

Hợp lý hóa mã HTML của bạn bằng công cụ tiên tiến của chúng tôi giúp dễ dàng phát hiện các thẻ không được tiết lộ, đảm bảo mã của bạn không có lỗi và các trang web của bạn hiển thị hoàn hảo. Dán mã của bạn vào khu vực trên để tìm hiểu xem có thẻ HTML5 nào chưa được tiết lộ hay không.

HTML5 là tiêu chuẩn mới nhất của Ngôn ngữ đánh dấu siêu văn bản, cung cấp các tính năng và khả năng nâng cao để xây dựng nội dung web hiện đại.

Việc duy trì mã HTML không có lỗi với các thẻ được đóng đúng cách là điều quan trọng để có hiệu suất SEO mạnh mẽ, nâng cao khả năng truy cập trang web và đảm bảo trải nghiệm người dùng liền mạch.

Thẻ HTML

HTML có cả thẻ tự đóng cho các phần tử ngắn gọn như hình ảnh ('<img>') và thẻ thông thường bao quanh nội dung, chẳng hạn như đoạn văn ('<p>'), cung cấp các cách linh hoạt để cấu trúc Nội dung web.

Thẻ tự đóng

• '<area />': Xác định khu vực có thể nhấp vào trong bản đồ hình ảnh.
• '<base />': Chỉ định URL cơ sở cho các URL tương đối trong tài liệu.
• '<br />': Chèn ngắt dòng trong văn bản hoặc nội dung.
• '<circle />': Xác định đường dẫn vòng tròn trong SVG (Đồ họa vectơ có thể mở rộng).
• '<col />': Chỉ định thuộc tính cột cho bảng HTML.
• '<embed />': Nhúng nội dung bên ngoài, như đa phương tiện hoặc plugin.
• '<hr />': Tạo điểm ngắt theo chủ đề hoặc đường ngang.
• '<img />': Nhúng hình ảnh vào tài liệu.
• '<input />': Xác định phần tử đầu vào của người dùng.
• '<link />': Liên kết các tài nguyên bên ngoài như bảng định kiểu hoặc biểu tượng.
• '<meta />': Cung cấp siêu dữ liệu về tài liệu.
• '<param />': Chỉ định các tham số cho plugin trong các thành phần đối tượng.
• '<path />': Xác định đường dẫn vectơ trong SVG (Đồ họa vectơ có thể mở rộng).
• '<source />': Chỉ định nhiều tài nguyên đa phương tiện cho các phần tử đa phương tiện.
• '<track />': Cung cấp các đoạn văn bản cho các thành phần đa phương tiện như '<video>' hoặc '<audio>'.
• '<wbr />': Xác định cơ hội ngắt từ trong văn bản.
• '<command />': Xác định nút lệnh trong menu.
• '<keygen />': Tạo cặp khóa cho các biểu mẫu được sử dụng trong mật mã.
• '<menuitem />': Xác định một mục trong '<menu>'.
• '<frame />': Xác định một cửa sổ con (không được dùng trong HTML5).

Thẻ thông thường

• '<p>': Xác định một đoạn văn.
• '<h1> to <h6>': Tiêu đề của các cấp độ khác nhau.
• '<strong>': Thể hiện tầm quan trọng mạnh mẽ.
• '<em>': Thể hiện văn bản được nhấn mạnh.
• '<mark>': Đánh dấu văn bản để tham khảo.
• '<abbr>': Định nghĩa một từ viết tắt.
• '<blockquote>': Đại diện cho một trích dẫn khối.
• '<ul>': Định nghĩa một danh sách không có thứ tự.
• '<ol>': Xác định một danh sách có thứ tự.
• '<li>': Đại diện cho một mục danh sách.
• '<dl>': Xác định một danh sách mô tả.
• '<dt>': Đại diện cho một thuật ngữ trong danh sách mô tả.
• '<dd>': Đại diện cho một mô tả trong danh sách mô tả.
• '<a>': Xác định một siêu liên kết.
• '<nav>': Thể hiện các liên kết điều hướng.
• '<audio>': Nhúng nội dung âm thanh.
• '<video>': Nhúng nội dung video.
• '<form>': Xác định một biểu mẫu HTML.
• '<textarea>': Tạo kiểu nhập văn bản nhiều dòng.
• '<select>': Tạo danh sách thả xuống.
• '<button>': Xác định một nút có thể nhấp được.
• '<table>': Xác định một bảng HTML.
• '<thead>': Xác định tiêu đề của bảng.
• '<tbody>': Xác định nội dung nội dung của một bảng.
• '<tr>': Xác định một hàng của bảng.
• '<th>': Xác định ô tiêu đề bảng.
• '<td>': Xác định một ô dữ liệu của bảng.
• '<caption>': Cung cấp chú thích cho một bảng.
• '<div>': Xác định một vùng chứa chung.
• '<span>': Xác định văn bản theo kiểu nội tuyến.
• '<header>': Đại diện cho tiêu đề tài liệu hoặc phần.
• '<footer>': Đại diện cho một tài liệu hoặc phần chân trang.
• '<section>': Đại diện cho một nhóm nội dung theo chủ đề.
• '<article>': Đại diện cho một phần nội dung độc lập.
• '<aside>': Thể hiện nội dung có liên quan mật thiết với nội dung xung quanh.
• '<button>': Xác định một nút có thể nhấp được.
• '<details>': Đại diện cho một tiện ích tiết lộ.
• '<summary>': Cung cấp bản tóm tắt cho phần tử '<details>'.
• '<object>': Nhúng nội dung hoặc tài nguyên bên ngoài.
• '<iframe>': Nhúng bối cảnh duyệt lồng nhau.
• '<canvas>': Nhúng đồ họa thông qua tập lệnh.
• '<svg>': Nhúng Đồ họa Vector có thể mở rộng.
• '<math>': Nhúng các phương trình toán học.
• '<time>': Đại diện cho một thời gian hoặc phạm vi cụ thể.
• '<address>': Thể hiện thông tin liên lạc.
• '<code>': Đại diện cho văn bản mã máy tính.
• '<pre>': Đại diện cho văn bản được định dạng sẵn.
• '<fieldset>': Các phần tử biểu mẫu liên quan đến nhóm.
• '<legend>': Cung cấp chú thích cho '<fieldset>'.
• '<ruby>': Đại diện cho các chú thích cho kiểu chữ Đông Á.
• '<rt>': Thể hiện cách phát âm của các ký tự trong phần tử '<ruby>'.

Lưu ý rằng danh sách trên chỉ bao gồm một số thẻ HTML tự đóng và không tự đóng (thông thường) phổ biến, nhưng có nhiều thẻ khác có sẵn trong HTML5 cho nhiều mục đích khác nhau.

Bảng chú giải

• Xác minh mã HTML cho các thẻ không được tiết lộ: Nút chạy quá trình kiểm tra.
• Dòng: Văn bản trước (các) số dòng, trong đó đã phát hiện (các) thẻ không có phần tương ứng đóng.
• Không phát hiện thấy thẻ nào chưa được đóng.: Thông báo khi tất cả các thẻ HTML được đóng chính xác.
• Dán mã HTML của bạn vào đây...: Khu vực chứa mã HTML, để kiểm tra các thẻ bị thiếu/không được đóng.
• Thẻ sau dường như không bị đóng: Trong trường hợp có một thẻ chưa được đóng trong mã.
• Các thẻ sau dường như không bị đóng: Trong trường hợp có hai hoặc nhiều thẻ không được đóng trong mã.

Phần kết luận

Việc đóng các thẻ HTML đúng cách là điều hết sức quan trọng trong phát triển web. Mỗi thẻ đóng vai trò là một hướng dẫn quan trọng để trình duyệt diễn giải và hiển thị nội dung một cách chính xác. Việc bỏ qua việc đóng thẻ có thể dẫn đến các vấn đề ngoài ý muốn về bố cục, hiểu sai nội dung và trải nghiệm người dùng không nhất quán trên các thiết bị và trình duyệt khác nhau. Sự chú ý tỉ mỉ đến từng chi tiết này không chỉ đảm bảo giao diện người dùng liền mạch và đẹp mắt mà còn hỗ trợ khả năng truy cập và tối ưu hóa công cụ tìm kiếm. Bằng cách tuân thủ phương pháp đóng thẻ HTML tốt nhất, các nhà phát triển bảo vệ tính toàn vẹn của mã của họ, thúc đẩy các trang web đáng tin cậy, dễ truy cập và thân thiện với người dùng để truyền tải thông tin một cách hiệu quả trong khi vẫn duy trì cách trình bày trực quan nhất quán.