HTML: tạo cấu trúc cho một trang hữu ích

HTML mô tả ý nghĩa và cấu trúc: heading tạo outline, landmark chia vùng, link dùng để điều hướng, button thực hiện action và label nối control với hướng dẫn. Semantic markup cung cấp thông tin hữu ích cho browser và assistive technology trước cả CSS.

Nhìn nhanh

Câu hỏi	Câu trả lời thực tế
Dùng khi nào?	Trang tutorial dùng header, nav, main, article, ordered step, code và footer thay vì dùng div vô danh cho mọi thứ.
Cần làm gì?	Tạo guide một trang bằng semantic element, heading hierarchy đúng thứ tự, một form field và một data table.
Biết là đúng bằng cách nào?	Trang vẫn hiểu được khi tắt CSS, keyboard đi tới mọi control và accessibility tree hiển thị role cùng name có nghĩa.
Lỗi hay gặp?	Không chọn heading level chỉ vì kích thước chữ và không dùng clickable div thay cho button hoặc link native.

flowchart LR
  A[Câu hỏi] --> B[HTML: tạo cấu trúc cho một trang hữu ích]
  B --> C[Ví dụ nhỏ]
  C --> D[Bằng chứng]

Điểm quan trọng của sơ đồ là không dừng ở định nghĩa: hãy nối khái niệm với một ví dụ nhỏ và bằng chứng có thể quan sát.

Ví dụ đã phân tích

Trang tutorial dùng header, nav, main, article, ordered step, code và footer thay vì dùng div vô danh cho mọi thứ.

Trước khi làm, hãy viết dấu hiệu thành công. Sau đó chỉ thay đổi một yếu tố, quan sát kết quả và ghi lại assumption. Với HTML: tạo cấu trúc cho một trang hữu ích, cách này giúp tách điều bạn biết khỏi điều bạn chỉ đang đoán.

Thực hành trong 20–30 phút

Mục tiêu: Tạo guide một trang bằng semantic element, heading hierarchy đúng thứ tự, một form field và một data table.

1. Ghi lại trạng thái ban đầu và điều bạn dự đoán.
2. Thực hiện phiên bản nhỏ nhất, không thêm công cụ chưa cần thiết.
3. Thay đổi đúng một input hoặc constraint rồi chạy lại.
4. Lưu command, screenshot, output hoặc checklist làm bằng chứng.

Kết quả mong đợi: Trang vẫn hiểu được khi tắt CSS, keyboard đi tới mọi control và accessibility tree hiển thị role cùng name có nghĩa.

Sai ở đâu và sửa thế nào

Không chọn heading level chỉ vì kích thước chữ và không dùng clickable div thay cho button hoặc link native.

Khi kết quả khác dự đoán, đừng đổi nhiều thứ cùng lúc. Kiểm tra input, version, environment, quyền truy cập và log trước; sau đó lặp lại từ ví dụ nhỏ nhất.

Định nghĩa hoàn thành

• Tôi giải thích được khái niệm bằng ngôn ngữ của mình.
• Tôi đã hoàn thành ví dụ nhỏ và giữ bằng chứng.
• Tôi biết một failure mode và cách kiểm tra nó.
• Người khác có thể làm lại mà không phải đoán bước còn thiếu.

Đi sâu hơn

Mở resource hoặc repository đi kèm ở cuối trang khi bạn cần implementation đầy đủ. Hãy kiểm tra version hiện hành trước khi dùng command trong dự án thật.