Cấu trúc HTML với AI

Xây dựng HTML ngữ nghĩa với AI — cấu trúc trang, biểu mẫu, điều hướng, khả năng truy cập và markup thân thiện với SEO hoạt động trên mọi thiết bị.

HTML ngữ nghĩa: Cấu trúc có ý nghĩa

HTML không chỉ đơn thuần là hiển thị nội dung trên màn hình — mà còn là mang lại ý nghĩa cho nội dung. AI có thể tạo ra bất kỳ HTML nào bạn yêu cầu, nhưng chất lượng phụ thuộc vào việc bạn mô tả cấu trúc tốt đến mức nào.

Khung sườn trang

Mọi trang web đều bắt đầu với cùng một nền tảng:

📍 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.

Tạo cấu trúc trang HTML5 ngữ nghĩa cho [loại trang: trang đích / bài đăng blog / danh mục đầu tư / trang sản phẩm].

Bao gồm:
1. Thuộc tính DOCTYPE và html lang
2. Phần đầu trang: meta charset, viewport, title, meta description
3. Cấu trúc phần thân trang sử dụng các phần tử ngữ nghĩa:
   - header (thương hiệu trang web + điều hướng)
   - nội dung chính (khu vực nội dung chính)
   - footer (bản quyền, liên kết, liên hệ)
4. Vai trò đánh dấu trang khi thích hợp
5. Liên kết bỏ qua điều hướng để dễ tiếp cận

KHÔNG bao gồm bất kỳ CSS hoặc JavaScript nào — chỉ sử dụng HTML sạch, có ngữ nghĩa.

✏️ ​​Cách điền thông tin chi tiết của bạn: Thay thế mỗi [] và trình giữ chỗ trong ngoặc vuông 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ả đầu ra 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ề 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ả đầu ra: Lưu phản hồi vào file Notes. Chọn đề xuất có tác động cao nhất và thực hiện nó trong tuần này — đừng cố gắng làm mọi thứ cùng một lúc.

⚠️ Nếu thấy không ổn: Nếu các đề xuất 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 đi." 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 đó là ràng buộc chính."

✅ Kiểm tra nhanh: Tại sao prompt lại chỉ rõ "không sử dụng CSS hoặc JavaScript"?

Vì việc trộn lẫn các vấn đề trong những prompt ban đầu sẽ tạo ra code lộn xộn. Khi AI tạo ra HTML, CSS và JavaScript cùng nhau, nó thường bỏ qua một số bước trong cấu trúc HTML để làm cho việc tạo kiểu hoạt động nhanh hơn. Yêu cầu chỉ HTML buộc AI phải tập trung vào ngữ nghĩa và khả năng truy cập phù hợp — nền tảng mà mọi thứ khác được xây dựng dựa trên đó.

Điều hướng

Điều hướng là một trong những thành phần HTML phức tạp nhất cần phải thiết kế đúng cách:

Tạo một thành phần điều hướng ngữ nghĩa cho một trang web với các trang sau:
- Trang chủ
- Giới thiệu
- Dịch vụ (với menu drop-down: Tư vấn, Đào tạo, Hỗ trợ)
- Blog
- Liên hệ

Yêu cầu:
- Sử dụng phần tử `nav` với thuộc tính `aria-label`
- Sử dụng cấu trúc danh sách không thứ tự
- Menu drop-down phải có thể truy cập bằng bàn phím (Nhấn Enter để mở, Escape để đóng, Phím mũi tên để điều hướng)
- Bao gồm `aria-expanded` và `aria-haspopup` cho trình kích hoạt menu drop-down
- Đánh dấu trang hiện tại bằng `aria-current="page"`
- Cấu trúc thân thiện với thiết bị di động (sẽ thêm CSS sau)

Chỉ HTML — chưa có CSS ​​hoặc JavaScript.

Các biểu mẫu hoạt động cho mọi người

Các biểu mẫu là nơi mà khả năng truy cập quan trọng nhất:

Tạo một biểu mẫu HTML cho [mục đích: liên hệ / đăng ký / thanh toán / khảo sát].

Các trường:
1. [tên trường] — [loại: văn bản/email/điện thoại/chọn/vùng văn bản/hộp kiểm/radio] — [bắt buộc/tùy chọn]
2. [tên trường] — [loại] — [bắt buộc/tùy chọn]
3. [lặp lại cho tất cả các trường]

Yêu cầu về khả năng truy cập:
- Mỗi ô nhập liệu đều có phần tử nhãn được liên kết thông qua for/id
- Các trường bắt buộc được đánh dấu bằng aria-required="true" và chỉ báo trực quan
- Các vùng chứa thông báo lỗi với aria-describedby liên kết đến từng ô nhập liệu
- Tập hợp trường/chú thích cho các nhóm liên quan (nút radio, hộp kiểm)
- Nút gửi (không phải loại đầu vào="gửi")
- Biểu mẫu có tên dễ truy cập thông qua aria-label hoặc aria-labelledby

Chỉ bao gồm văn bản giữ chỗ ở những nơi nó bổ sung giá trị (không thay thế nhãn).

Các phần nội dung

Cấu trúc bài viết và bài đăng blog

Tạo HTML ngữ nghĩa cho trang bài đăng blog:

Cấu trúc nội dung:
- Tiêu đề bài viết (h1)
- Tên tác giả và ngày xuất bản (với phần tử thời gian)
- Hình ảnh nổi bật với văn bản thay thế mô tả
- Nội dung bài viết với:
  - 3-4 phần với tiêu đề h2
  - Một đoạn trích dẫn
  - Một danh sách có thứ tự
  - Một code snippet (sử dụng phần tử pre + code)
- Phần tag/danh mục
- Hộp thông tin tác giả
- Phần bài viết liên quan (3 thẻ với tiêu đề, đoạn trích, liên kết)

Sử dụng các phần tử article, section, aside, figure, figcaption, time một cách thích hợp.

Trang thẻ và danh sách

Tạo HTML ngữ nghĩa cho trang danh sách hiển thị [sản phẩm / bài đăng blog / thành viên nhóm / mục trong danh mục đầu tư]:

Cấu trúc trang:
- Tiêu đề trang (h1) với số lượng mục
- Các điều khiển lọc/sắp xếp (sử dụng các phần tử biểu mẫu)
- Lưới thẻ, mỗi thẻ chứa:
  - Hình ảnh với văn bản thay thế (alt text)
  - Tiêu đề (h3, có liên kết)
  - Mô tả ngắn gọn
  - [metadata: giá / ngày / vai trò / thẻ]
  - Liên kết hoặc nút kêu gọi hành động
- Phân trang (sử dụng phần tử nav với aria-label="Phân trang")

Sử dụng danh sách không thứ tự cho lưới thẻ (li cho mỗi thẻ). Mỗi thẻ phải là một phần tử bài viết.

Danh sách kiểm tra xác minh HTML

Sau khi AI tạo ra HTML, hãy chạy qua danh sách kiểm tra này:

Xem xét HTML này về chất lượng và khả năng truy cập:

[dán HTML của bạn]

Kiểm tra:
1. Các phần tử ngữ nghĩa được sử dụng chính xác (không phải là "mớ hỗn độn" các thẻ div)
2. Thứ tự phân cấp tiêu đề (h1 → h2 → h3, không bỏ qua cấp độ nào)
3. Tất cả hình ảnh đều có văn bản thay thế (alt text) có ý nghĩa (không phải "image" hoặc để trống cho mục đích trang trí)
4. Các trường nhập liệu trong biểu mẫu có nhãn liên kết
5. Các liên kết có văn bản mô tả (không phải "nhấp vào đây")
6. Thuộc tính ngôn ngữ trên phần tử html
7. Meta viewport cho thiết kế đáp ứng
8. Không có kiểu hoặc script nội tuyến
9. Cấu trúc HTML5 hợp lệ

Liệt kê bất kỳ vấn đề nào được tìm thấy và cung cấp mã đã được sửa.

✅ Kiểm tra nhanh: Tại sao phải kiểm tra "không bỏ qua cấp độ tiêu đề"?

Người dùng trình đọc màn hình điều hướng theo cấp độ tiêu đề — nhảy từ h1 sang h2 sang h3 giống như mục lục. Việc bỏ qua từ h1 sang h3 tạo ra một khoảng trống gây nhầm lẫn cho việc điều hướng này. Cấu trúc phân cấp tiêu đề không phải là trang trí trực quan (đó là nhiệm vụ của CSS) — mà là cấu trúc tài liệu mà công nghệ hỗ trợ dựa vào.

Bài tập: Xây dựng cấu trúc trang

1. Chọn loại trang (trang đích, bài đăng blog hoặc portfolio)
2. Sử dụng prompt khung trang để tạo HTML cơ bản
3. Thêm thành phần điều hướng với ít nhất một menu drop-down
4. Thêm phần nội dung phù hợp với loại trang của bạn
5. Chạy danh sách kiểm tra xác minh trên toàn bộ HTML
6. Mở file trong trình duyệt — nó sẽ không hiển thị đúng định dạng, nhưng cấu trúc nội dung phải logic và đầy đủ

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

• HTML ngữ nghĩa (tiêu đề, điều hướng, chính, bài viết, chân trang) truyền đạt ý nghĩa cho trình duyệt, trình đọc màn hình và công cụ tìm kiếm — bố cục dựa trên thẻ div không truyền đạt gì cả
• Tạo HTML riêng biệt với CSS và JavaScript để đảm bảo AI tập trung vào cấu trúc và khả năng truy cập phù hợp
• Các prompt biểu mẫu chi tiết (loại trường, xác thực, nhãn, vị trí lỗi) tạo ra những biểu mẫu sẵn sàng cho sản xuất; Các prompt mơ hồ tạo ra những biểu mẫu tối thiểu
• Mỗi hình ảnh cần có văn bản thay thế (alt text) có ý nghĩa, mỗi ô nhập liệu cần có nhãn, mỗi tiêu đề tuân theo thứ tự phân cấp — hãy xác minh những điều này sau mỗi lần tạo bằng AI
• Các thành phần điều hướng cần có khả năng truy cập bằng bàn phím (phím Enter, Escape, phím mũi tên) và thuộc tính ARIA — hãy yêu cầu rõ ràng những điều này trong lời nhắc của bạn
• Chạy xác minh khả năng truy cập trên tất cả HTML do AI tạo ra trước khi thêm kiểu hoặc hành vi