Cập nhật ·
Trong lập trình web, tính hợp lệ của HTML (HTML validity) là việc đảm bảo mã HTML tuân thủ đúng chuẩn W3C. Việc viết HTML hợp lệ không chỉ giúp trình duyệt hiển thị chính xác, mà còn cải thiện SEO, hiệu suất và khả năng truy cập cho người dùng. Bài viết này sẽ hướng dẫn bạn hiểu các khái niệm, quy tắc quan trọng cũng như cách kiểm tra HTML hợp lệ.
Tính hợp lệ của html
- Trình duyệt tự thêm các thẻ còn thiếu: Nếu code HTML không có
<html>,<head>,<body>thì trình duyệt thường tự động chèn vào. - Thẻ
<head>và<body>là optional (không bắt buộc): Theo Tài liệu W3C hai thẻ này có thể được bỏ qua mà HTML vẫn hợp lệ. - Các yếu tố cơ bản đảm bảo HTML hợp lệ theo chuẩn W3C:
- Khai báo
<!DOCTYPE html>ở đầu tài liệu. - Khai báo thuộc tính
langcho thẻ<html>. - Có thẻ
<title>trong<head>. - Sử dụng đúng cú pháp đóng/mở thẻ.
- Khai báo
Ví dụ HTML hợp lệ tối thiểu:
.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8" />
<title>Trang hợp lệ</title>
</head>
<body>
<h1>Xin chào!</h1>
<p>Đây là trang HTML hợp lệ.</p>
</body>
</html>
Ví dụ HTML rút gọn vẫn hợp lệ (thẻ <head> và <body> optional):
.
<!DOCTYPE html>
<html lang="vi">
<title>Trang hợp lệ rút gọn</title>
<h1>Nội dung</h1>
<p>Trình duyệt vẫn hiểu và hiển thị đúng.</p>
</html>
- Google HTML/CSS Style Guide cũng đề cập tới việc bỏ thẻ optional để tối ưu dung lượng. Tuy nhiên, khi áp dụng, bạn nên cân nhắc vì nhiều lập trình viên khác có thể không quen với cách viết rút gọn.
- Kiểm tra HTML hợp lệ tại: https://validator.w3.org/#validate_by_input
Thẻ tùy chỉnh (Custom Elements)
- Khái niệm: Thẻ tùy chỉnh (custom elements) là các thẻ do bạn tự định nghĩa, không nằm trong quy chuẩn HTML chuẩn của W3C (W3C Validator).
- Đặt tên: Theo chuẩn web components, tên thẻ tùy chỉnh nên chứa ít nhất 1 dấu gạch ngang (
-) để tránh trùng với thẻ chuẩn (ví dụapp-text,my-component). - Không có style mặc định: Vì không phải thẻ HTML chuẩn nên sẽ không có CSS mặc định. Bạn phải tự viết CSS.
- Lợi ích: Giúp đóng gói tính năng, tái sử dụng nhiều lần, dễ bảo trì.
Ví dụ:
.
<app-text>Đây là nội dung trong thẻ app-text</app-text>
<app-toast>Thông báo tùy chỉnh</app-toast>
Một số lưu ý để HTML hợp lệ
- Đảm bảo thẻ đóng/mở đúng thứ tự.
- Không để thẻ trùng nhau mà không đóng (nhất là
<div>,<p>). - Kiểm tra chính tả tên thẻ chuẩn (ví dụ
<titel>→ sai, phải là<title>). - Sử dụng HTML Entities để hiển thị ký tự đặc biệt (
<,>...). - Đặt thuộc tính alt cho
<img>để hỗ trợ SEO và accessibility.
Kết luận
- Tính hợp lệ của HTML giúp trình duyệt hiển thị đúng, cải thiện SEO, tốc độ và khả năng truy cập.
- Các yếu tố cơ bản:
<!DOCTYPE html>,lang,<title>... đảm bảo HTML hợp lệ. - Thẻ
<head>và<body>có thể optional, nhưng nên giữ để rõ ràng và dễ bảo trì. - Custom elements giúp mở rộng HTML nhưng không nằm trong chuẩn W3C, cần đặt tên có dấu gạch ngang và tự định nghĩa style.
- Luôn kiểm tra HTML bằng W3C Validator để phát hiện lỗi cú pháp.
Nắm vững các quy tắc này sẽ giúp bạn viết HTML chuẩn, dễ bảo trì, chuyên nghiệp và thân thiện với cả trình duyệt lẫn công cụ tìm kiếm.