Video minh họa bằng chữ, không có lời thoại. Bạn có thể đọc hướng dẫn chi tiết bên dưới.
Bạn sẽ nắm được
Nội dung demo — HTML có ngữ nghĩa
Đây là bài 1 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ữ.
Hiểu vấn đề trước khi dùng công cụ
Chương này tập trung vào một quyết định cụ thể: 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. Đừng bắt đầu bằng cách chép nguyên ví dụ. Hãy chỉ ra thành phần nào là dữ liệu, thành phần nào là quy tắc và đâu là kết quả quan sát được. Một giải pháp đúng với dữ liệu mẫu vẫn có thể sai khi đầu vào rỗng, kích thước lớn hơn hoặc có hai thao tác xảy ra gần nhau.
Ví dụ tối thiể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>Giới hạn cần hiểu
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.
Câu hỏi để tự giải thích
- Bạn sẽ giải thích html có ngữ nghĩa cho người mới bằng ví dụ nào?
- Phần nào của ví dụ là giả định, phần nào cần kiểm tra bằng thực nghiệm?
- Nếu bỏ một điều kiện quan trọng, kết quả sẽ sai ở đâu?
Kết quả cần đạt
- 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
Trước khi chuyển bài, hãy viết một đoạn giải thích bằng lời của bạn và chỉ ra ít nhất một trường hợp không nên áp dụng máy móc ví dụ này.
Không có tài liệu đính kèm cho bài học này.
Hỏi đáp
Đăng nhập để đặt câu hỏi và tham gia thảo luận.