Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

Cách thêm section (phần/đoạn) vào tài liệu HTML

Thẻ <section> đại diện cho một phần nội dung độc lập, thường có tiêu đề (<h1>-<h6>), dùng để cấu trúc tài liệu ngữ nghĩa (semantic).

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <title>HTML Section Tag</title>
</head>
<body>
  <section>
    <h1>Java</h1>
    <h3>Kế thừa (Inheritance)</h3>
    <p>Kế thừa định nghĩa mối quan hệ giữa superclass và subclass.</p>
  </section>
  
  <section>
    <h1>JavaScript</h1>
    <h3>Closure</h3>
    <p>Closure là hàm ghi nhớ biến từ scope bên ngoài.</p>
  </section>
</body>
</html>

Section vs Div vs Article

Quy tắc lồng section

  • Có thể lồng <section> trong <section> (chương → mục → tiểu mục).
  • Mỗi section nên có heading (<h1>-<h6>) – quan trọng cho SEO và accessibility (outline algorithm).
  • Không dùng <section> chỉ để style – hãy dùng <div>.
ThẻÝ nghĩaKhi nào dùng
<section>Phần nội dung theo chủ đề, có headingChương, mục, tab panel, accordion panel
<article>Nội dung độc lập, tự chứa, có thể syndicateBài blog, bài báo, comment, widget
<div>Container vô nghĩa, chỉ để style/layoutWrapper, grid cell, không có ngữ nghĩa