Phần và bài viết
Thuộc phần Kiến thức cơ bản trong hành trình HTML của Coddy. Bài học 28 trên 60.
Trong HTML, các thẻ <section> và <article> được dùng để sắp xếp nội dung thành các phần hợp lý.
Thẻ <section> xác định một phần trong tài liệu, chẳng hạn như một chương hoặc một phần khác của tài liệu về một chủ đề, thường có tiêu đề riêng. Đây là cách nhóm các nội dung liên quan lại với nhau. Ví dụ, bạn có thể dùng <section> để chia một trang thành phần giới thiệu, nội dung và thông tin liên hệ.
Đây là cách bạn có thể dùng thẻ <section>:
<section>
<h2>Section Heading</h2>
<p>Section content goes here.</p>
</section>Thẻ <article> xác định nội dung độc lập, hoàn chỉnh. Nội dung này cần có ý nghĩa khi đứng riêng và có thể được đọc tách biệt với phần còn lại của trang web. Một số ví dụ về nơi có thể dùng phần tử <article>: bài đăng trên diễn đàn, bài viết trên blog, tin tức hoặc bình luận.
Dưới đây là cách bạn có thể dùng thẻ <article>:
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>Thử thách
DễTạo tài liệu HTML sử dụng các thẻ <section> và <article> để cấu trúc trang web. Bao gồm các phần sau:
- Một phần
<main>để chứa nội dung chính của trang. - Bên trong
<main>, tạo một<section>có tiêu đề (<h2>) ghi "Upcoming Events". - Bên trong
<section>, tạo hai phần tử<article>. - Mỗi
<article>cần có một tiêu đề (<h3>) và một đoạn văn (<p>) chứa văn bản mẫu. Dùng "Event 1" và "Event 2" làm tiêu đề, và "Event 1 details..." cùng "Event 2 details..." làm nội dung các đoạn văn.
Tự làm thử
<!DOCTYPE html>
<html>
<body>
<!-- Viết code ở đây -->
</body>
</html>Bài học này có một bài trắc nghiệm ngắn. Bắt đầu bài học để trả lời và theo dõi tiến độ.
Tất cả bài học trong Kiến thức cơ bản
1Kiến thức cơ bản về HTML
HTML là gì?Cấu trúc cơ bản của HTMLThẻ và phần tửThẻ lồng nhau và thẻ đóngChú thích trong HTML2Văn bản và định dạng
Tiêu đềĐoạn vănNgắt dòngChữ đậm và chữ nghiêngLại chữ đậm và chữ nghiêngÔn tập: định dạng8Biểu mẫu và đầu vào phần 1
Kiến thức cơ bản về biểu mẫuÔ nhập văn bảnThuộc tính của ô nhậpTrường mật khẩuNhãn cho ô nhậpÔn tập: biểu mẫu cơ bản11Trang đăng ký sự kiện
Tổng quan dự ánPhần đầu trang3Làm việc với danh sách
Danh sách không có thứ tựDanh sách có thứ tựDanh sách lồng nhauÔn tập: danh sách9Biểu mẫu và đầu vào phần 2
Nút radioHộp kiểmDanh sách thả xuốngNútNút trong biểu mẫuÔn tập: biểu mẫu #1Ôn tập: biểu mẫu #2Tự luyện tập: Playground Web