Kiểm tra tính chính xác của Semantic HTML do AI tạo

Hãy học cách viết Semantic HTML giúp cải thiện khả năng truy cập, SEO và khả năng tương thích với trình đọc màn hình — và cách kiểm tra tính chính xác về ngữ nghĩa của HTML do AI tạo ra.

🔄 Tóm tắt bài học: Trong bài học trước, bạn đã tìm hiểu cách AI thay đổi quá trình phát triển frontend và những điểm yếu thường xuyên của nó — đặc biệt là về Semantic HTML và khả năng truy cập. Bây giờ, hãy cùng khắc phục nền tảng này.

Semantic HTML là bộ khung của mọi trang web. Nó quyết định cách trình đọc màn hình điều hướng trang web của bạn, cách công cụ tìm kiếm hiểu nội dung của bạn và cách trình duyệt áp dụng các hành vi mặc định. AI tạo ra HTML hiển thị đúng về mặt hình ảnh nhưng hầu như luôn bỏ sót ý nghĩa ngữ nghĩa.

Tham khảo các phần tử ngữ nghĩa

Template cấu trúc trang

Prompt AI về cấu trúc ngữ nghĩa:

Chuyển đổi HTML dựa trên thẻ <div> này để sử dụng các phần tử ngữ nghĩa phù hợp. Thay thế các thẻ div chung chung bằng phần tử ngữ nghĩa cụ thể nhất hiện có. Thêm nhãn ARIA khi có nhiều phần tử đánh dấu cùng loại. Đảm bảo trang chỉ có chính xác một thẻ <main>, hệ thống phân cấp tiêu đề hợp lý (h1 → h2 → h3, không bỏ qua cấp độ nào) và các phần tử đánh dấu để điều hướng.

Cấu trúc trang chính xác:

📍 Nơi dán: Mở ChatGPT (chat.openai.com), Claude (claude.ai) hoặc Gemini (gemini.google.com) và bắt đầu một cuộc trò chuyện mới.

📋 Cách sao chép prompt này: Nhấp vào bất kỳ đâu bên trong khối màu xám, nhấn Cmd+A rồi Cmd+C (Mac) hoặc Ctrl+A rồi Ctrl+C (Windows). Hoặc sử dụng biểu tượng sao chép xuất hiện.

<header>
  <nav aria-label="Main navigation">...</nav>
</header>

<main>
  <h1>Page Title</h1>

  <section aria-labelledby="featured-heading">
    <h2 id="featured-heading">Featured Products</h2>
    <article>...</article>
    <article>...</article>
  </section>

  <aside aria-label="Related categories">
    <h2>Categories</h2>
    <nav aria-label="Category navigation">...</nav>
  </aside>
</main>

<footer>
  <nav aria-label="Footer links">...</nav>
</footer>
<header>
  <nav aria-label="Main navigation">...</nav>
</header>

<main>
  <h1>Page Title</h1>

  <section aria-labelledby="featured-heading">
    <h2 id="featured-heading">Featured Products</h2>
    <article>...</article>
    <article>...</article>
  </section>

  <aside aria-label="Related categories">
    <h2>Categories</h2>
    <nav aria-label="Category navigation">...</nav>
  </aside>
</main>

<footer>
  <nav aria-label="Footer links">...</nav>
</footer>

✏️ ​​Cách điền thông tin chi tiết của bạn: Thay thế mỗi dấu ngoặc vuông [] và trình giữ chỗ trong ngoặc bằng thông tin cụ thể từ tình huống thực tế của bạn. Thông tin đầu vào mơ hồ sẽ tạo ra kết quả mơ hồ — hãy cụ thể.

👀 Những gì bạn sẽ thấy: Trong vòng vài giây, AI sẽ trả về một phản hồi có cấu trúc dựa vào prompt ở trên. Hãy đọc kỹ và coi đó là bản nháp, không phải câu trả lời cuối cùng.

📌 Nên làm gì với kết quả: Lưu phản hồi vào file Notes. Chọn gợi ý có hiệu quả cao nhất và thực hiện nó trong tuần này — đừng cố gắng làm tất cả cùng một lúc.

⚠️ Nếu kết quả không ổn: Nếu các gợi ý có vẻ chung chung, hãy dán nội dung sau: "Hãy cụ thể hơn với ngữ cảnh thực tế của tôi. Bỏ qua những lời khuyên chung chung." Nếu nó bỏ qua các chi tiết quan trọng bạn đã cung cấp, hãy hỏi: "Bạn đã bỏ sót [X] trong ngữ cảnh của tôi — hãy thực hiện lại với điều đó làm ràng buộc chính."

Cấu trúc phân cấp tiêu đề

Các tiêu đề tạo ra một dàn ý mà trình đọc màn hình sử dụng để điều hướng:

Prompt AI cho việc kiểm tra tiêu đề:

Phân tích trang HTML này và kiểm tra thứ bậc tiêu đề: (1) Có chính xác một thẻ <h1> không? (2) Các cấp độ tiêu đề có tuần tự không (không có bước nhảy h1 → h3)? (3) Cấu trúc tiêu đề có hợp lý không nếu bạn chỉ đọc các tiêu đề? (4) Có tiêu đề nào được sử dụng để tạo kiểu trực quan thay vì cấu trúc ngữ nghĩa không?

Biểu mẫu: Thành phần semantic bị bỏ sót nhiều nhất

Các biểu mẫu do AI tạo ra thường thiếu nhãn và cấu trúc phù hợp:

✅ Kiểm tra nhanh: AI tạo ra một nút là `<div class="button" onclick="submit()">Submit</div>`. Tại sao điều này lại có vấn đề?

Câu trả lời: `<div>` không phải là một nút — nó không thể được chọn bằng bàn phím, không được trình đọc màn hình nhận dạng là nút, không thể được kích hoạt bằng phím Enter/Space và không được bao gồm trong thứ tự tab. Phần tử chính xác là `<button type="submit">Submit</button>`, phần tử này cung cấp tất cả các hành vi trên một cách tự nhiên. Nếu bạn BẮT BUỘC phải sử dụng một phần tử không phải là nút, hãy thêm `role="button", `tabindex="0"` và trình xử lý sự kiện bàn phím — nhưng hãy ưu tiên phần tử `<button>` thực sự.

Kiểm tra HTML do AI tạo ra

Prompt AI kiểm tra ngữ nghĩa:

Kiểm tra tính đúng đắn về ngữ nghĩa của HTML này: [DÁN HTML]. Kiểm tra: (1) Có sử dụng các phần tử `<div>` ở những nơi cần các phần tử ngữ nghĩa không? Liệt kê từng phần tử thay thế. (2) Hệ thống phân cấp tiêu đề có hợp lệ không (một `h1`, các cấp độ tuần tự)? (3) Tất cả hình ảnh có văn bản thay thế (alt text) có ý nghĩa không (không phải "image" hoặc "photo")? (4) Các biểu mẫu có được dán nhãn đúng cách không (mỗi ô nhập liệu đều có <label>)? (5) Các phần tử tương tác có sử dụng HTML chính xác không (nút là <button>, liên kết là <a>)? (6) Các mốc lặp lại có nhãn aria không?

Những điểm chính cần ghi nhớ

• Semantic HTML truyền đạt ý nghĩa cho trình đọc màn hình, công cụ tìm kiếm và trình duyệt — <nav>, <main>, <article> tạo ra các mốc có thể điều hướng, trong khi <div> tạo ra những container vô hình; AI mặc định sử dụng cấu trúc thẻ `<div>` trông có vẻ đúng về mặt hình ảnh nhưng lại loại bỏ hoàn toàn ý nghĩa ngữ nghĩa.

• Hãy sử dụng phần tử HTML cụ thể nhất có sẵn trước khi dùng đến `<div>` + JavaScript: `<details>/<summary>` cho các accordion, `<dialog>` cho những modal, `<button>` cho các hành động có thể nhấp chuột — những phần tử gốc cung cấp khả năng truy cập bằng bàn phím, hỗ trợ trình đọc màn hình và quản lý trạng thái miễn phí.

• Luôn kiểm tra HTML do AI tạo ra về thứ tự phân cấp tiêu đề (một tiêu đề h1, không bỏ qua cấp độ nào), nhãn biểu mẫu (mỗi ô nhập liệu cần có `<label>`) và tính duy nhất của các điểm mốc (những phần tử `<nav>` hoặc `<aside>` lặp lại cần `aria-label` để phân biệt chúng).