Bài đọc

HTML có ngữ nghĩa: tình huống lỗi và cách chẩn đoán

3 phút đọc

Đây là bài 4 của chương 1: HTML có ngữ nghĩa, thuộc khóa demo HTML & CSS. Nội dung được dùng để trải nghiệm cấu trúc chương trình học; hãy thực hành trên dữ liệu và môi trường thử nghiệm riêng. Trong dự án xuyên suốt, bạn sẽ xây dựng website giới thiệu khóa học có trang chủ, danh sách bài học và biểu mẫu đăng ký.

Mục tiêu cụ thể

Các thẻ main, nav, section và article diễn tả vai trò nội dung. Tiêu đề cần có thứ bậc hợp lý; lựa chọn thẻ dựa vào ý nghĩa thay vì kích thước chữ.

Tình huống lỗi

Dùng div cho mọi thành phần khiến cấu trúc khó hiểu. Có nhiều h1 không phải lúc nào cũng là lỗi cú pháp, nhưng một tiêu đề chính giúp tài liệu dễ theo dõi.

Chẩn đoán có bằng chứng

Trong bài html có ngữ nghĩa, hãy cố ý tái hiện tình huống trên ở môi trường thử nghiệm. Mục tiêu là thấy vì sao kết quả sai và thu thập đủ bằng chứng để phân biệt lỗi dữ liệu, lỗi quy tắc và lỗi cấu hình. Không sửa đồng thời nhiều yếu tố vì bạn sẽ khó xác định nguyên nhân.

Ghi rõ bước thao tác và kết quả mong đợi.
Thu nhỏ ví dụ đến mức vẫn tái hiện được lỗi.
Đối chiếu dữ liệu thực với giả định ban đầu.
Đặt giả thuyết và thay đổi một yếu tố.
Xác nhận bằng cách tái chạy ví dụ tối thiểu.

Mẫu đối chiếu

<main>
  <h1>Học lập trình web</h1>
  <section aria-labelledby="intro">
    <h2 id="intro">Giới thiệu khóa học</h2>
    <p>Bắt đầu từ một trang HTML rõ ràng.</p>
  </section>
</main>

Kiểm tra sau sửa

Một h1 mô tả chủ đề trang
Các mục có h2 rõ nghĩa
Liên kết trong menu đi tới đúng mục

Khi lỗi biến mất, thực hiện lại yêu cầu gốc: Tạo trang giới thiệu có một tiêu đề chính, hai mục nội dung và một menu điều hướng. Sau đó thử trường hợp đầu vào rỗng hoặc trạng thái chưa được khởi tạo nếu phù hợp. Một bản sửa phải khôi phục hành vi đã định nghĩa, không chỉ làm mất thông báo lỗi.

Ghi chú bàn giao