Bài đọc

HTML có ngữ nghĩa: thực hành có hướng dẫn

3 phút đọc

Đây là bài 3 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ữ.

Đề bài thực hành

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.

Quy trình từng bước

Xác định đầu vào, đầu ra và trạng thái trước khi bắt đầu. Với html có ngữ nghĩa, hãy ghi lại kết quả bạn mong muốn trước khi chạy ví dụ.
Tạo bản thử nhỏ nhất trong một thư mục hoặc môi trường riêng. Chỉ dùng dữ liệu giả; không sao chép token, tài khoản hoặc dữ liệu cá nhân vào bài tập.
Thực hiện yêu cầu: 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.
Quan sát kết quả và so sánh từng điều kiện chấp nhận. Khi chưa đạt, thay đổi một yếu tố mỗi lần để biết thay đổi nào tạo ra tác động.
Lưu kết quả cùng ghi chú giải thích quyết định. Người khác cần tái hiện được thao tác mà không phải đoán cấu hình hoặc dữ liệu ban đầu.

Điểm khởi đầ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>

Đối chiếu kết quả

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

Nếu kết quả khác dự kiến

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ụp hoặc ghi lại đầu vào và đầu ra trước khi sửa. Xác nhận tệp đã lưu, đúng môi trường đang chạy và dữ liệu thử vẫn giữ nguyên. Sau khi sửa, chạy lại cả trường hợp ban đầu lẫn một trường hợp biên để tránh sửa được một nhánh nhưng làm hỏng nhánh khác.

Sản phẩm cần lưu

Mã nguồn hoặc sơ đồ của bản thử.
Dữ liệu đầu vào có thể dùng lại.
Ba kết quả kiểm tra kèm giải thích.
Một ghi chú về điều bạn sẽ làm khác nếu triển khai cho người dùng thật.