Tìm hiểu cách sử dụng phần tử HTML <section>.
Phần tử HTML <section> được dùng làm phần tử container để đại diện cho các phần nội dung riêng lẻ trong một tài liệu.
Bạn có thể có một trang web có nhiều phần hiển thị thông tin khác nhau về công ty. Ví dụ:
- Phần Hero (đầu trang)
- Phần Dịch vụ
- Phần Đội ngũ
- Phần Nhà tài trợ
- Phần Liên hệ
Mỗi phần sau đó có thể được đóng gói vào các section tự chứa, như sau:
<section> <h2>Phần 1</h2> <p>...</p> <img src="" alt="" /> </section> <section> <h2>Phần 2</h2> <p>...</p> <img src="" alt="" /> </section> <section> <h2>Phần 3</h2> <p>...</p> <img src="" alt="" /> </section>Một trường hợp sử dụng khác cho phần tử <section> là bên trong các phần tử <article>.
Giả sử bạn có một bài viết dài thảo luận nhiều chủ đề. Cho mục đích đó, bạn có thể dùng phần tử <section> để chia bài viết thành các phần chủ đề khác nhau:
<article> <h1>Tiêu đề bài viết chính</h1> <section> <h2>Chủ đề 1</h2> <p>...</p> <img src="" alt="" /> </section> <section> <h2>Chủ đề 2</h2> <p>...</p> <img src="" alt="" /> </section> <section> <h2>Chủ đề 3</h2> <p>...</p> <img src="" alt="" /> </section> </article>Bạn cũng có thể đặt các phần tử <article> bên trong các phần tử <section>.
Giả sử bạn có một phần trên trang chủ hiển thị danh sách các thẻ bài viết (article cards) mỗi thẻ chứa liên kết đến bài đăng riêng lẻ:
<section> <h2>Xem các bài viết blog mới nhất</h2> <article> <a href="/đường-dẫn-bài-viet-1"> <h3>Bài viết 1</h3> </a> </article> <article> <a href="/đường-dẫn-bài-viet-2"> <h3>Bài viết 2</h3> </a> </article> <article> <a href="/đường-dẫn-bài-viet-3"> <h3>Bài viết 3</h3> </a> </article> </section>Thẻ <section> là một trong nhiều thẻ HTML dùng để định nghĩa các phần tử container. Một số phần tử container HTML thường dùng nhất là:
<article> , <main> , <header>, <footer>,<form>, và <div> , (là thẻ chung dùng khi không có thẻ nào khác phù hợp).