Tìm hiểu cách sử dụng HTML <section> phần tử.
HTML <section> phần tử được sử dụng làm phần tử vùng chứa để đại diện cho các phần nội dung riêng lẻ trong 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 của bạn. Ví dụ:
- Phần anh hùng
- Phần dịch vụ
- Phần đội
- Phần nhà tài trợ
- Phần liên hệ với chúng tôi
Sau đó, mỗi phần có thể được đóng gói thành các phần riêng biệt, như sau:
<section>
<h2>A section 1</h2>
<p>...</p>
<img src="" alt="" />
</section>
<section>
<h2>A section 2</h2>
<p>...</p>
<img src="" alt="" />
</section>
<section>
<h2>A section 3</h2>
<p>...</p>
<img src="" alt="" />
</section>
Một trường hợp sử dụng khác cho <section> phần tử bên trong <article> các phần tử.
Giả sử bạn có một bài viết dài thảo luận về nhiều chủ đề. Vì mục đích đó, bạn có thể sử dụng <section> yếu tố để chia bài viết của bạn thành các phần chủ đề khác nhau:
<article>
<h1>Main post title</h1>
<section>
<h2>Topic 1</h2>
<p>...</p>
<img src="" alt="" />
</section>
<section>
<h2>Topic 2</h2>
<p>...</p>
<img src="" alt="" />
</section>
<section>
<h2>Topic 3</h2>
<p>...</p>
<img src="" alt="" />
</section>
</article>
Bạn cũng có thể đặt <article> các phần tử bên trong <section> các phần tử.
Giả sử bạn có phần trên trang đầu của mình, nơi bạn hiển thị danh sách các thẻ bài viết mà mỗi thẻ chứa liên kết đến các bài đăng riêng lẻ:
<section>
<h2>Check out our latest blog posts</h2>
<article>
<a href="/path-to-blog-post-1">
<h3>Blog post 1</h3>
</a>
</article>
<article>
<a href="/path-to-blog-post-2">
<h3>Blog post 2</h3>
</a>
</article>
<article>
<a href="/path-to-blog-post-3">
<h3>Blog post 3</h3>
</a>
</article>
</section>
<section> thẻ là một trong nhiều thẻ HTML được sử dụng để xác định các phần tử vùng chứa. Một số phần tử vùng chứa HTML được sử dụng phổ biến nhất là:
<article> , <main> , <header> , <footer> , <form> và <div> , (là thẻ chung mà chúng tôi sử dụng nếu không có thẻ nào khác áp dụng).