Các sectioning element chia một trang thành các vùng có ý nghĩa. Vài trong số đó ánh xạ sang landmark của ARIA — các vùng có tên mà công nghệ hỗ trợ cho phép người dùng nhảy giữa chúng, giống như một mục lục cho trang.
...
Details
...
...
Người dùng screen reader có thể nhấn một phím để liệt kê các landmark và nhảy thẳng tới <main>, bỏ qua các header và nav lặp lại. Đây là một lợi ích hiệu suất lớn — các tag semantic cung cấp nó tự động, không cần ARIA.
<article> — nội dung có nghĩa tự thân và có thể được phân phối lại: một bài blog, một product card, một bình luận.<section> — một nhóm theo chủ đề trong một tài liệu, thường có heading riêng. Không độc lập.<article>
<h1>Blog post title</h1>
<section><h2>Introduction</h2>...</section>
<section><h2>Conclusion</h2>...</section>
</article>
Nguyên tắc cơ bản: nếu nó có thể đứng độc lập, đó là một <article>; nếu nó chỉ là một mảnh có nhãn của một tổng thể lớn hơn, đó là một <section>. Đừng dùng <section> thuần túy làm wrapper để style — đó là việc của <div>.
Dùng đúng sectioning element cho bạn các landmark miễn phí, vững chắc cho việc điều hướng bằng bàn phím/screen reader và một outline tài liệu rõ ràng — cải thiện accessibility và SEO mà không cần thêm attribute ARIA nào.
Thư viện câu hỏi phỏng vấn IT với đáp án chi tiết — từ Junior đến Senior.
Ủng hộ