Bạn sẽ kiểm tra một trang theo cách có hệ thống: từ cú pháp và đường dẫn đến dàn ý, nhãn biểu mẫu và thao tác bàn phím. Trang trông ổn trong trình duyệt chưa đủ để kết luận HTML đúng và dễ sử dụng.

Lộ trình này học qua website “Góc học web”: trang chủ, trang bài viết và trang liên hệ. Mỗi bài giải quyết một việc cụ thể. Các bài về từng thẻ là tài liệu tra cứu, không phải danh sách bắt buộc học thuộc.

Trình duyệt có thể che giấu lỗi

Trình duyệt cố sửa nhiều cấu trúc sai để tiếp tục hiển thị. Nếu lồng heading trong p hoặc thiếu thẻ theo cách không hợp lệ, cây DOM nhìn trong Inspect có thể không giống mã bạn gõ. Vì vậy việc “mở được trang” không phải một phép kiểm tra đủ.

View Source cho biết mã đã tải; Inspect cho biết cấu trúc DOM hiện tại sau khi phân tích và có thể sau khi script thay đổi. Dùng cả hai để tìm nguyên nhân, không vội đổ mọi lỗi bố cục cho CSS.

Kiểm tra tài liệu từ ngoài vào trong

• Có doctype, lang, charset, title và viewport phù hợp.
• Dàn ý heading phản ánh nội dung; không chọn cấp chỉ vì kiểu chữ.
• ID không trùng và liên kết fragment trỏ tới phần tử tồn tại.
• Nội dung được đặt vào phần tử có vai trò phù hợp.
• Đường dẫn tới trang, ảnh, CSS và tệp nhúng đúng vị trí thực tế.

Validator HTML như Nu Html Checker giúp phát hiện nhiều lỗi cú pháp và cấu trúc. Với tài liệu không công khai, cân nhắc cách kiểm tra cục bộ hoặc chỉ dùng nội dung có thể chia sẻ. Validator không đánh giá thay bạn việc alt có hữu ích hoặc nội dung có dễ hiểu hay không.

Kiểm tra không dùng chuột

Dùng Tab và Shift + Tab qua các liên kết, nút và trường nhập. Bạn phải nhìn thấy vị trí focus, hiểu nhãn và thực hiện được các thao tác. Đừng đặt tabindex dương hàng loạt chỉ để ép một thứ tự khác với cấu trúc tài liệu.

Ví dụ có liên kết “Bỏ qua điều hướng” dẫn tới main. Đây là một cách giúp người dùng không phải đi qua cùng menu dài mỗi lần. Thứ tự nội dung trong HTML nên hợp lý ngay cả khi chưa áp dụng bố cục CSS.

Ảnh và biểu mẫu cần kiểm tra ý nghĩa

Với ảnh, hỏi liệu alt có truyền đạt đúng thông tin theo ngữ cảnh không. Với form, hỏi mỗi điều khiển có tên và hướng dẫn rõ ràng không, lỗi có thể hiểu và sửa được không. Một placeholder nhìn đẹp không thay thế nhãn và một ID đúng cú pháp không đủ nếu label for trỏ sang ID khác.

Kiểm tra thao tác với text zoom lớn hơn hoặc cửa sổ hẹp. Nội dung dài, code và bảng có thể cần vùng cuộn riêng; đừng để cả trang buộc người đọc kéo ngang liên tục. Khả năng tương phản và bố cục sau này còn phụ thuộc CSS.

Một lỗi cần sửa theo từng bước

Giả sử bạn viết label for=”email” nhưng input id=”mail” và không có name. Hãy sửa liên kết for/id, thêm name phù hợp rồi thử lại focus và dữ liệu giả gửi bằng GET. Nếu sửa nhiều yếu tố cùng lúc mà không kiểm tra, rất khó biết điều nào tạo ra thay đổi.

Tự ghi một bảng ba cột: hiện tượng, nguyên nhân, cách xác nhận đã sửa. Đây là một thói quen làm việc, không phải một bài thi cuối khóa. Cùng cách đó sẽ hữu ích khi học CSS, JavaScript và backend.

Ví dụ để tự chạy

Tạo một tệp HTML để thử đoạn mã sau. Nếu đây là đoạn trích trong body, hãy đặt nó vào bộ khung tài liệu đã học ở bài 3. Bộ mã tải về có sẵn ví dụ đầy đủ của bài này.

<a href="#noi-dung">Bỏ qua điều hướng, tới nội dung chính</a>
<header><p>Góc học web</p><nav aria-label="Điều hướng chính"><a href="index.html">Trang chủ</a> · <a href="bai-viet.html">Bài viết</a> · <a href="lien-he.html">Liên hệ</a></nav></header>
<main id="noi-dung">
<h1>Kiểm tra trang HTML</h1>
<h2>Ảnh có ý nghĩa</h2>
<img src="images/goc-hoc-web.png" alt="Trang chủ dẫn tới trang bài viết và trang liên hệ" width="960" height="480">
<h2>Biểu mẫu có nhãn</h2>
<form action="result.html" method="get">
<label for="email">Email giả để thử</label>
<input id="email" name="email" type="email" required>
<button type="submit">Gửi thử</button>
</form>
</main>
<footer><p>Góc học web — Ví dụ học HTML của Học Viết Code.</p></footer>

Kết quả hiển thị

Trang có liên kết bỏ qua menu, ảnh có alt và form có nhãn liên kết đúng. Bạn có thể thử Tab để kiểm tra focus; bộ ví dụ không yêu cầu đăng nhập hay công cụ trả phí.

Mở ví dụ bài 15 trong tab riêng · Tải bộ ví dụ 16 bài và website hoàn chỉnh

Lỗi thường gặp và cách sửa

• Validator không báo lỗi nên kết luận trang đã accessible: vẫn cần kiểm tra nhãn, nội dung và thao tác.
• Thêm tabindex dương để vá thứ tự: sửa cấu trúc trước.
• Ảnh alt đúng cú pháp nhưng vô nghĩa: viết theo ngữ cảnh.

Tự kiểm tra

• Cố ý đổi id của input rồi dùng bàn phím và nhãn để tìm lỗi.
• Liệt kê ba kiểm tra mà một trình kiểm tra cú pháp không thể làm thay bạn hoàn toàn.

Tra cứu khi cần

• Phân biệt ID và Class trong HTML
• Thẻ label trong HTML
• Cách dùng thẻ img trong HTML và các thuộc tính của img

Tài liệu gốc về chủ đề này trên MDN / HTML Standard

Mục lục lộ trình HTML 16 bài · Thư viện bài HTML tra cứu