<section>: The Generic Section element

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Phần tử <section> trong HTML biểu diễn một section độc lập chung chung của một tài liệu, không có phần tử ngữ nghĩa cụ thể hơn để biểu diễn nó. Các section luôn phải có tiêu đề, với rất ít ngoại lệ.

Try it

<h1>Choosing an Apple</h1>
<section>
  <h2>Introduction</h2>
  <p>
    This document provides a guide to help with the important task of choosing
    the correct Apple.
  </p>
</section>

<section>
  <h2>Criteria</h2>
  <p>
    There are many different criteria to be considered when choosing an Apple —
    size, color, firmness, sweetness, tartness...
  </p>
</section>

h1,
h2 {
  margin: 0;
}

Thuộc tính

Phần tử này chỉ bao gồm các thuộc tính toàn cục.

Ghi chú sử dụng

Như đã đề cập ở trên, <section> là phần tử sectioning chung chung, và chỉ nên được sử dụng nếu không có phần tử cụ thể hơn để biểu diễn nó. Ví dụ, menu điều hướng nên được bọc trong phần tử <nav>, nhưng danh sách kết quả tìm kiếm hoặc hiển thị bản đồ và các điều khiển của nó không có phần tử cụ thể, và có thể được đặt bên trong <section>.

Cũng xem xét các trường hợp sau:

Nếu nội dung của phần tử biểu diễn một đơn vị nội dung độc lập, nguyên tử có ý nghĩa khi được tổng hợp như một phần độc lập (ví dụ, một bài blog hoặc bình luận blog, hoặc một bài báo), phần tử <article> sẽ là lựa chọn tốt hơn.
Nếu nội dung biểu diễn thông tin tiếp tuyến hữu ích hoạt động cùng với nội dung chính, nhưng không trực tiếp là một phần của nó (như các liên kết liên quan, hoặc tiểu sử tác giả), hãy sử dụng <aside>.
Nếu nội dung biểu diễn khu vực nội dung chính của tài liệu, hãy sử dụng <main>.
Nếu bạn chỉ sử dụng phần tử như một wrapper kiểu dáng, hãy sử dụng <div> thay thế.

Để nhắc lại, mỗi <section> phải được xác định, thường bằng cách bao gồm tiêu đề (phần tử h1 - h6) làm phần tử con của phần tử <section>, bất cứ khi nào có thể. Xem bên dưới để biết các ví dụ về trường hợp bạn có thể thấy <section> không có tiêu đề.

Ví dụ

Ví dụ sử dụng cơ bản

html

<div>
  <h2>Heading</h2>
  <p>Bunch of awesome content</p>
</div>

Kết quả

html

<section>
  <h2>Heading</h2>
  <p>Bunch of awesome content</p>
</section>

Kết quả

Sử dụng section không có tiêu đề

Các trường hợp mà bạn có thể thấy <section> được sử dụng không có tiêu đề thường được tìm thấy trong các section ứng dụng web/UI thay vì trong các cấu trúc tài liệu truyền thống. Trong một tài liệu, việc có một section nội dung riêng biệt không có tiêu đề để mô tả nội dung của nó thực sự không có ý nghĩa. Các tiêu đề như vậy rất hữu ích cho tất cả người đọc, nhưng đặc biệt hữu ích cho người dùng các công nghệ hỗ trợ như screen reader, và chúng cũng tốt cho SEO.

Tuy nhiên, hãy xem xét một cơ chế điều hướng thứ cấp. Nếu điều hướng toàn cục đã được bọc trong phần tử <nav>, bạn có thể đặt menu trước/sau trong <section>:

html

<section>
  <a href="#">Previous article</a>
  <a href="#">Next article</a>
</section>

Hoặc một thanh nút để điều khiển ứng dụng của bạn thì sao? Điều này có thể không cần tiêu đề, nhưng nó vẫn là một section riêng biệt của tài liệu:

html

<section>
  <button class="reply">Reply</button>
  <button class="reply-all">Reply to all</button>
  <button class="fwd">Forward</button>
  <button class="del">Delete</button>
</section>

Kết quả

Tùy thuộc vào nội dung, việc bao gồm tiêu đề cũng có thể tốt cho SEO, vì vậy đó là một tùy chọn cần xem xét.

Tóm tắt kỹ thuật

Danh mục nội dung	Nội dung flow, nội dung sectioning, nội dung palpable.
Nội dung được phép	Nội dung flow.
Bỏ qua thẻ	Không, cả thẻ mở và thẻ đóng đều bắt buộc.
Phần tử cha được phép	Bất kỳ phần tử nào chấp nhận nội dung flow. Lưu ý rằng phần tử `<section>` không được là phần tử con của phần tử `<address>`.
Vai trò ARIA ngầm định	`region` nếu phần tử có tên có thể truy cập, ngược lại là `generic`
Vai trò ARIA được phép	`alert`, `alertdialog`, `application`, `banner`, `complementary`, `contentinfo`, `dialog`, `document`, `feed`, `log`, `main`, `marquee`, `navigation`, `none`, `note`, `presentation`, `search`, `status`, `tabpanel`
Giao diện DOM	`HTMLElement`