Làm thế nào để biết tài liệu HTML của bạn đạt chuẩn

Validate HTML Code
Validate HTML Code

Khi mới bắt đầu làm việc với HTML. Chúng ta sẽ gặp một chút bối rối về sản phẩm của mình. Làm sao chúng ta tự tin tài liệu HTML của mình đã đạt chuẩn. Mình nên sử dụng phần tử nào, thuộc tính nào…vv

Trong bài viết này, mình sẽ giới thiệu cho các bạn 2 công cụ, đủ để chúng ta kiểm tra mã HTML của mình đã ổn chưa, cần phải chỉnh sửa phần tử nào.

Markup validation service

Dịch vụ này cho phép chúng ta kiểm tra các lỗi thường gặp trong quá trình xây dựng một tài liệu HTML là:

  • Đóng mở thẻ không đúng
  • Sử dụng các phần tử không hợp lý, thiếu các thuộc tính quan trọng.

Các bạn có thể truy cập vào trang chủ của dịch vụ markup validation service. Sau đó sử dụng 1 trong 3 phương thức của họ cung cấp để kiểm tra.

markup validation service
markup validation service
  1. Qua một uri. Ví dụ: các bạn nhập đường dẫn này vào, đây là một trang ví dụ của chúng ta trong bài selector: https://download.hoadm.net/front-end/css/selector/example-1.html
  2. Upload trực tiếp tài liệu HTML
  3. Bạn có thể copy/paste đoạn mã HTML của mình và kiểm tra trực tiếp

Sau khoảng 1 vài giây, hệ thống sẽ cho các bạn biết, tài liệu HTML của mình còn thiếu gì, hay đã ổn. Nếu kết quả bạn nhận được giống như sau, thì xin chúc mừng bạn. File HTML của bạn đã rất ổn.

Kết quả kiểm tra
Kết quả kiểm tra

Còn nếu warning hay error, thì cũng đừng buồn. Các thông báo rất rõ ràng và chúng ta có thể dễ dàng sửa chúng mà.

HTML 5 Outliner

Như các bạn đã biết, HTML được tạo ra với mục đích chính là đánh dấu một tài liệu, văn bản. Do đó, bố cục hay đề mục của các phần trong tài liệu là rất quan trọng. Outliner là một dịch vụ phân tích nội dung của tài liệu HTML xem bố cục (bố cục về nội dung chứ không phải giao diện) có hợp lý chưa. Bố cục này có được thông qua việc sử dụng hợp lý các tags div, section, nav, h1, h2…vv

Tương tự với dịch markup validation service. Trang chủ outliner cũng cung cấp cho chúng ta 3 phương thức để kiểm tra một tài liệu HTML. Với ví dụ đường dẫn phía trên, chúng ta sẽ nhận được kết quả như sau:

HTML 5 Outliner
HTML 5 Outliner

Với outline này, chưa cần đọc quá nhiều vào trang web, chúng ta cũng có thể nắm được sơ bộ nội dung rồi phải không nào.