Trong thiết kế website, việc viết mã HTML hợp lệ và đúng chuẩn là rất cần thiết, nhưng trong quá trình thiết kế sẽ không thể tránh khỏi một số lỗi không hợp lệ (invalid), ngay cả bản thân mình nhiều lúc vẫn mắc phải 
Bài viết này mình sẽ hướng dẫn các bạn một số phương pháp để viết mã HTML hợp lệ và đúng chuẩn, đặc biệt là các bạn mới tìm hiểu HTML.
Cách kiểm tra :
Để kiểm tra một đoạn mã HTML mình viết có hợp lệ hay không, bạn truy cập địa chỉ: buidoi.net và tiến hành kiểm tra với các công cụ hệ thống cung cấp.
Nếu mã HTML của bạn hợp lệ sẽ nhận được thông báo Passed, ngược lại sẽ nhận được thông báo chi tiết các lỗi bạn cần chỉnh sửa
1. Luôn khai báo thành phần Strict DOCTYPE
Thành phần DOCTYPE được thêm vào đầu trong tài liệu HTML để tạo thành chuẩn web mới XHTML, những trang web không được khai báo thành phần DOCTYPE sẽ được cho là chuẩn web cũ (Lỗi thời) và không hợp lệ
Dưới đây là một thành phần DOCTYPE mẫu bạn có thể tham khảo:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. Luôn đặt giá trị cho tất cả các thuộc tính (Attribute) của các thẻ.
Khi khai báo thuộc tính của các thẻ, bạn buộc phải thêm giá trị cho thuộc tính đó mà không được phép bỏ trống.
Ví dụ:
Trường hợp sau đây sẽ không hợp lệ:
1 <h2 title>HTML validator</a>
Để đoạn mã trên hợp lệ bạn phải khai báo giá trị cho thuộc tính title
1 <h2 title="HTML">HTML validator</a>
3. Giá trị của các thuộc tính phải được đặt trong dấu ngoặc kép (“”)
Đối với chuẩn cũ bạn có thể viết như sau:
1 <h2 title=first>HTML validator</a>
Nhưng với chuẩn mới thì cách viết đó không còn hợp lệ, để hợp lệ bạn phải đặt giá trị của thuộc tính title trong dấu ngoặc kép.
1 <h2 title="first">HTML validator</a>
4. Luôn đặt thuộc tính alt cho thẻ <img>
Giá trị của thuộc tính Alt trong thẻ <img> sẽ được hiển thị thay thế khi link hình ảnh không tồn tại. Ngoài ra còn có tác dụng đối với SEO cho website.
Chuẩn XHTML bắt buộc bạn phải đặt thuộc tính Alt cho tất cả các hình ảnh trong trang web.
Ví dụ về thẻ <img> hợp lệ
1 <img src="logo.gif" alt="Logo" />
5. Luôn đóng tất cả các thẻ
Việc quên đóng một thẻ nào đó sau khi mở không những không valid được HTML mà có thể còn làm giao diện của bạn hiển thị không đúng.
Đối với các cặp thẻ phải luôn có thẻ đóng
Ví dụ: <p> thì phải có </p>, <div> phải có </div>,…
Đối với các thẻ đơn thì phải có dấu / (slash) ở cuối
Ví dụ: <br />, <img />, <hr />…
6. Đóng đúng thứ tự các thẻ
HTML là ngôn ngữ logic, do đó bạn phải luôn đóng dúng thứ tự tất cả các thẻ từ trong ra ngoài. Trường hợp sau là cách đóng thẻ không hợp lệ:
1 <p><span>HTML là gì?</p></span>
Cách viết đúng phải là:
1 <p><span>HTML là gì?</span></p>
7. Đối với HTML List (ul, ol, li)
Thẻ <li> là phần tử của ul và ol, do đó thẻ <li> phải luôn được đặt trong cặp thẻ <ul> hoặc cặp thẻ <ol>.
8. Đặt đúng vị trí của các thành phần block và Inline
Có thể đặt các thành phần inline trong các thành phần block, như không thể đặt các thành phần Block trong trong các thành phần Inline
Cách viết sau sẽ được cho là không hợp lệ:
1 <span><p>HTML là gì?</p></span>
Thành phần p là thành phần block, do đó không thể đặt trong thành phần span (Span là thành phần Inline).
Bạn có thể tìm hiểu thêm về các thành phần block và inline trong bài: Block và Inline.
9. Sử dụng mã để thay cho các ký tự đặc biệt
Khi bạn muốn hiển thị các ký tự đặc biệt như: <, >, &, …, thì trong HTML các ký tự đó phải được viết ở dạng mã:
Ví dụ muốn hiển thị > thì bạn phải thay thế bằng >
< thay thế bằng <
& thay thế bằng &
….
Bạn có thể tra mã các ký tự đặc biệt trong HTML tại đây.
10. Viết thường tất cả các tên thẻ
Mình rất nhiều lần bắt gặp một số trang web gặp lỗi này, đó là viết Hoa tên thẻ, ví dụ <B>Viết hoa tên thẻ</B>. Nếu bạn cũng có ý định đó thì xin hãy sửa chữa ngay lúc này, thứ nhất mất thời gian hơn (vì phải bật Caps Lock, hoặc nhấn thêm Shift), và điều quan trọng nhất là cách viết đó không hợp lệ. Xin nhớ nhé, hãy viết tên các thẻ HTML ở dạng chữ in thường.
KẾT LUẬN
Bên trên là 10 phương pháp để viết mã HTML hợp lệ, có thể nó chưa đầy đủ nhưng mình mong rằng nó giúp ích được cho bạn.
Bài viết này mình sẽ hướng dẫn các bạn một số phương pháp để viết mã HTML hợp lệ và đúng chuẩn, đặc biệt là các bạn mới tìm hiểu HTML.
Cách kiểm tra :
Để kiểm tra một đoạn mã HTML mình viết có hợp lệ hay không, bạn truy cập địa chỉ: buidoi.net và tiến hành kiểm tra với các công cụ hệ thống cung cấp.
Nếu mã HTML của bạn hợp lệ sẽ nhận được thông báo Passed, ngược lại sẽ nhận được thông báo chi tiết các lỗi bạn cần chỉnh sửa
1. Luôn khai báo thành phần Strict DOCTYPE
Thành phần DOCTYPE được thêm vào đầu trong tài liệu HTML để tạo thành chuẩn web mới XHTML, những trang web không được khai báo thành phần DOCTYPE sẽ được cho là chuẩn web cũ (Lỗi thời) và không hợp lệ
Dưới đây là một thành phần DOCTYPE mẫu bạn có thể tham khảo:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. Luôn đặt giá trị cho tất cả các thuộc tính (Attribute) của các thẻ.
Khi khai báo thuộc tính của các thẻ, bạn buộc phải thêm giá trị cho thuộc tính đó mà không được phép bỏ trống.
Ví dụ:
Trường hợp sau đây sẽ không hợp lệ:
1 <h2 title>HTML validator</a>
Để đoạn mã trên hợp lệ bạn phải khai báo giá trị cho thuộc tính title
1 <h2 title="HTML">HTML validator</a>
3. Giá trị của các thuộc tính phải được đặt trong dấu ngoặc kép (“”)
Đối với chuẩn cũ bạn có thể viết như sau:
1 <h2 title=first>HTML validator</a>
Nhưng với chuẩn mới thì cách viết đó không còn hợp lệ, để hợp lệ bạn phải đặt giá trị của thuộc tính title trong dấu ngoặc kép.
1 <h2 title="first">HTML validator</a>
4. Luôn đặt thuộc tính alt cho thẻ <img>
Giá trị của thuộc tính Alt trong thẻ <img> sẽ được hiển thị thay thế khi link hình ảnh không tồn tại. Ngoài ra còn có tác dụng đối với SEO cho website.
Chuẩn XHTML bắt buộc bạn phải đặt thuộc tính Alt cho tất cả các hình ảnh trong trang web.
Ví dụ về thẻ <img> hợp lệ
1 <img src="logo.gif" alt="Logo" />
5. Luôn đóng tất cả các thẻ
Việc quên đóng một thẻ nào đó sau khi mở không những không valid được HTML mà có thể còn làm giao diện của bạn hiển thị không đúng.
Đối với các cặp thẻ phải luôn có thẻ đóng
Ví dụ: <p> thì phải có </p>, <div> phải có </div>,…
Đối với các thẻ đơn thì phải có dấu / (slash) ở cuối
Ví dụ: <br />, <img />, <hr />…
6. Đóng đúng thứ tự các thẻ
HTML là ngôn ngữ logic, do đó bạn phải luôn đóng dúng thứ tự tất cả các thẻ từ trong ra ngoài. Trường hợp sau là cách đóng thẻ không hợp lệ:
1 <p><span>HTML là gì?</p></span>
Cách viết đúng phải là:
1 <p><span>HTML là gì?</span></p>
7. Đối với HTML List (ul, ol, li)
Thẻ <li> là phần tử của ul và ol, do đó thẻ <li> phải luôn được đặt trong cặp thẻ <ul> hoặc cặp thẻ <ol>.
8. Đặt đúng vị trí của các thành phần block và Inline
Có thể đặt các thành phần inline trong các thành phần block, như không thể đặt các thành phần Block trong trong các thành phần Inline
Cách viết sau sẽ được cho là không hợp lệ:
1 <span><p>HTML là gì?</p></span>
Thành phần p là thành phần block, do đó không thể đặt trong thành phần span (Span là thành phần Inline).
Bạn có thể tìm hiểu thêm về các thành phần block và inline trong bài: Block và Inline.
9. Sử dụng mã để thay cho các ký tự đặc biệt
Khi bạn muốn hiển thị các ký tự đặc biệt như: <, >, &, …, thì trong HTML các ký tự đó phải được viết ở dạng mã:
Ví dụ muốn hiển thị > thì bạn phải thay thế bằng >
< thay thế bằng <
& thay thế bằng &
….
Bạn có thể tra mã các ký tự đặc biệt trong HTML tại đây.
10. Viết thường tất cả các tên thẻ
Mình rất nhiều lần bắt gặp một số trang web gặp lỗi này, đó là viết Hoa tên thẻ, ví dụ <B>Viết hoa tên thẻ</B>. Nếu bạn cũng có ý định đó thì xin hãy sửa chữa ngay lúc này, thứ nhất mất thời gian hơn (vì phải bật Caps Lock, hoặc nhấn thêm Shift), và điều quan trọng nhất là cách viết đó không hợp lệ. Xin nhớ nhé, hãy viết tên các thẻ HTML ở dạng chữ in thường.
KẾT LUẬN
Bên trên là 10 phương pháp để viết mã HTML hợp lệ, có thể nó chưa đầy đủ nhưng mình mong rằng nó giúp ích được cho bạn.
![[OzzModz] Display Visitor Name ( [you] Mod)](/data/resource_icons/0/342.jpg?1709004947){kind=icon}
![[CSCN] Roman Numeral Chord BB Code Support](/data/resource_icons/0/341.jpg?1624724061){kind=icon}
![[ShikiSuen] CSCN Anniversary theme (for AdminCP Only)](/data/resource_icons/0/340.jpg?1624032501){kind=icon}
![[OzzModz] Login By Country Log](/data/resource_icons/0/339.jpg?1623080236){kind=icon}
![[OzzModz] Nag Guests To Register](/data/resource_icons/0/338.jpg?1623079745){kind=icon}
![[OzzModz] Anti Bump](/data/resource_icons/0/337.jpg?1623079305){kind=icon}