Thẻ section trong HTML: section, article và div

Thẻ section dùng để làm gì

<section> nhóm nội dung cùng một chủ đề, và bắt đầu bằng một tiêu đề gọi tên chủ đề đó. Một trang giới thiệu sản phẩm chia thành "Features", "Pricing" và "FAQ" là ví dụ điển hình:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sections</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    section { border: 2px solid #e5e7eb; border-radius: 8px; padding: 0 14px; margin-bottom: 10px; }
    section h2 { color: #2563eb; }
  </style>
</head>
<body>
  <h1>Acme Notes</h1>
  <section>
    <h2>Features</h2>
    <p>Sync, search and share your notes.</p>
  </section>
  <section>
    <h2>Pricing</h2>
    <p>Free for personal use.</p>
  </section>
  <section>
    <h2>FAQ</h2>
    <p>Answers to common questions.</p>
  </section>
</body>
</html>

Mỗi section là một chương của trang, và mỗi tiêu đề là một dòng trong mục lục của trang. Giống các thẻ ngữ nghĩa khác, <section> không có định dạng mặc định; đường viền là do CSS tạo ra.

section, article và div

Ba thẻ này trông giống nhau trên màn hình. Điểm khác là những gì chúng nói về nội dung:

Bài blog, bình luận trên diễn đàn, bản tin và thẻ sản phẩm là article. "Features", "Chương 2" và "Sản phẩm liên quan" là section. Một hàng flex xếp ba thẻ thẳng hàng là div.

Article bên trong section

Hai thẻ này lồng nhau theo cả hai chiều. Ở đây, section "Latest posts" chứa nhiều article độc lập:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Section of articles</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .grid { display: flex; gap: 10px; }
    article { flex: 1; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 12px; }
    article h3 { margin: 10px 0 4px; font-size: 16px; }
    article p { color: #6b7280; font-size: 14px; }
  </style>
</head>
<body>
  <section>
    <h2>Latest posts</h2>
    <div class="grid">
      <article>
        <h3>Flexbox in 5 minutes</h3>
        <p>Rows, columns and gaps.</p>
      </article>
      <article>
        <h3>CSS Grid basics</h3>
        <p>Two-dimensional layout.</p>
      </article>
      <article>
        <h3>Forms that work</h3>
        <p>Labels and validation.</p>
      </article>
    </div>
  </section>
</body>
</html>

Hãy để ý <div class="grid">: nó chỉ có mặt để xếp các thẻ thành một hàng, nên div là thẻ đúng cho nó. Mỗi thẻ là một article vì mỗi bài viết tự đứng được một mình.

Section bên trong article

Một bài viết dài có thể chia thành các section, giống như các chương trong một cuốn sách. Cấp tiêu đề nối tiếp từ tiêu đề của chính article:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Article with sections</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 2px solid #2563eb; border-radius: 8px; padding: 0 14px; }
    section { border-inline-start: 4px solid #16a34a; padding-inline-start: 10px; margin-bottom: 12px; }
    section h3 { margin: 4px 0; }
  </style>
</head>
<body>
  <article>
    <h2>A beginner's guide to bread</h2>
    <section>
      <h3>Ingredients</h3>
      <p>Flour, water, salt, yeast.</p>
    </section>
    <section>
      <h3>Method</h3>
      <p>Mix, knead, rise, bake.</p>
    </section>
  </article>
</body>
</html>

Khung màu xanh dương là article (toàn bộ bài hướng dẫn), các thanh màu xanh lá là các section của nó. Cho section cấp tiêu đề riêng: một article dùng h2 sẽ chứa các section dùng h3.

Section có tên trở thành landmark

Trình đọc màn hình liệt kê một số phần tử là landmark để người dùng nhảy qua lại. Một <section> chỉ trở thành landmark region khi có tên truy cập (accessible name). Hãy trỏ aria-labelledby tới tiêu đề của nó:

<section aria-labelledby="pricing-title">
  <h2 id="pricing-title">Pricing</h2>
  ...
</section>

Chỉ làm vậy với vài section mà người dùng muốn nhảy thẳng tới, không phải với mọi section: một trang có hai mươi landmark cũng khó lướt như một trang không có landmark nào. Section không có tên vẫn có ích, vì tiêu đề của chúng xuất hiện trong danh sách tiêu đề của trình đọc màn hình.

Section cũng là đích tốt cho liên kết trong trang. Đặt cho section một id, và liên kết có href="#id" sẽ nhảy tới đó:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Jump links</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    section { min-height: 420px; border-top: 2px solid #e5e7eb; }
  </style>
</head>
<body>
  <p><a href="#faq">Jump to the FAQ</a></p>
  <section id="features" aria-labelledby="features-title">
    <h2 id="features-title">Features</h2>
  </section>
  <section id="faq" aria-labelledby="faq-title">
    <h2 id="faq-title">FAQ</h2>
    <p><a href="#features">Back to features</a></p>
  </section>
</body>
</html>

Lỗi thường gặp

• Dùng <section> làm lớp bọc để định dạng. Nếu không có tiêu đề và không có chủ đề, hãy dùng <div>. Trang HTML ngữ nghĩa cho thấy mỗi thẻ bố cục hợp với chỗ nào.
• Bọc một bài blog đơn lẻ trong <section>. Một bài viết tự đứng được một mình là <article>.
• Section không có tiêu đề. Hãy thêm tiêu đề, kể cả tiêu đề bị ẩn về mặt hiển thị, hoặc xem lại liệu đó có thật là section không.
• Thay <main> bằng <section>. Nội dung chính của trang nằm trong <main>; các section nằm bên trong nó.
• Đặt tên cho mọi section. Chỉ thêm aria-labelledby cho những section quan trọng, để danh sách landmark luôn ngắn gọn.