Các phần tử mốc HTML5 được dùng để cải thiện khả năng điều hướng

Các phần tử HTML5 như main, nav và aside đóng vai trò là điểm mốc, hoặc các khu vực đặc biệt trên trang trình đọc màn hình và các công nghệ hỗ trợ khác có thể chuyển đổi. Bằng cách sử dụng các phần tử mốc, bạn có thể cải thiện đáng kể trải nghiệm điều hướng trên trang web của mình đối với người dùng công nghệ hỗ trợ. Tìm hiểu thêm trong chương trình Mốc HTML 5 và ARIA.

Cách kiểm tra điểm mốc theo cách thủ công

Sử dụng danh sách các phần tử mốc của W3C để kiểm tra xem từng phần chính trên trang của bạn có nằm trong phần tử điểm mốc hay không. Ví dụ:

<header>
  <p>Put product name and logo here</p>
</header>
<nav>
  <ul>
    <li>Put navigation here</li>
  </ul>
</nav>
<main>
  <p>Put main content here</p>
</main>
<footer>
  <p>Put copyright info, supplemental links, etc. here</p>
</footer>

Bạn cũng có thể sử dụng các công cụ như Phần mở rộng về Thông tin chi tiết về khả năng hỗ trợ tiếp cận để hình ảnh hóa cấu trúc trang của bạn và nắm bắt các phần không có trong điểm mốc:

Ảnh chụp màn hình trang web.dev, trong đó các địa danh được tiện ích Thông tin chi tiết về khả năng tiếp cận làm nổi bật

Cách sử dụng địa danh hiệu quả

  • Dùng phần tử mốc để xác định các phần chính trên trang thay vì dựa vào các phần tử chung chung như <div> hoặc <span>.
  • Dùng điểm mốc để thể hiện cấu trúc của trang. Ví dụ: phần tử <main> phải bao gồm tất cả nội dung liên quan trực tiếp với ý tưởng chính của trang, do đó chỉ nên có một mã trên mỗi trang. Xem bản tóm tắt của MDN về các phần tử phân phần nội dung để tìm hiểu cách sử dụng từng mốc.
  • Sử dụng điểm mốc một cách thận trọng. Có quá nhiều điểm mốc thực sự có thể khiến người dùng công nghệ hỗ trợ khó điều hướng hơn vì ngăn không cho họ dễ dàng chuyển sang phần nội dung mong muốn.

Xem bài đăng Tiêu đề và địa danh để biết thêm thông tin.

Tài nguyên