<main>: The Main 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ử <main> trong HTML biểu diễn nội dung chủ đạo của <body> trong một tài liệu. Vùng nội dung chính bao gồm nội dung liên quan trực tiếp đến hoặc mở rộng từ chủ đề trung tâm của tài liệu, hoặc chức năng trung tâm của ứng dụng.
Try it
<header>Gecko facts</header>
<main>
<p>
Geckos are a group of usually small, usually nocturnal lizards. They are
found on every continent except Antarctica.
</p>
<p>
Many species of gecko have adhesive toe pads which enable them to climb
walls and even windows.
</p>
</main>
header {
font:
bold 7vw "Arial",
sans-serif;
}
Một tài liệu không được có nhiều hơn một phần tử <main> không có thuộc tính hidden.
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
Nội dung của phần tử <main> phải là duy nhất đối với tài liệu. Nội dung được lặp lại trên một tập hợp tài liệu hoặc các section tài liệu như thanh bên, liên kết điều hướng, thông tin bản quyền, logo trang web và form tìm kiếm không nên được bao gồm trừ khi form tìm kiếm là chức năng chính của trang.
<main> không đóng góp vào outline của tài liệu; nghĩa là, không giống như các phần tử như <body>, tiêu đề như h2, và như vậy, <main> không ảnh hưởng đến khái niệm về cấu trúc trang của DOM. Nó chỉ mang tính thông tin.
Khả năng tiếp cận
Landmark
Phần tử <main> hoạt động như một vai trò landmark main. Landmark có thể được công nghệ hỗ trợ sử dụng để nhanh chóng xác định và điều hướng đến các section lớn của tài liệu. Ưu tiên sử dụng phần tử <main> hơn là khai báo role="main", trừ khi có lo ngại về hỗ trợ trình duyệt cũ.
Bỏ qua điều hướng
Bỏ qua điều hướng, còn gọi là "skipnav", là kỹ thuật cho phép người dùng công nghệ hỗ trợ nhanh chóng bỏ qua các phần lớn nội dung lặp lại (điều hướng chính, biểu ngữ thông tin, v.v.). Điều này cho phép người dùng truy cập nội dung chính của trang nhanh hơn.
Việc thêm thuộc tính id vào phần tử <main> cho phép nó trở thành mục tiêu của liên kết bỏ qua điều hướng.
<body>
<a href="#main-content">Skip to main content</a>
<!-- navigation and header content -->
<main id="main-content">
<!-- main page content -->
</main>
</body>
Chế độ đọc
Chức năng chế độ đọc của trình duyệt tìm kiếm sự hiện diện của phần tử <main>, cũng như các phần tử heading và content sectioning khi chuyển đổi nội dung sang view đọc chuyên biệt.
Ví dụ
<!-- other content -->
<main>
<h1>Apples</h1>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<article>
<h2>Red Delicious</h2>
<p>
These bright red apples are the most common found in many supermarkets.
</p>
<p>…</p>
<p>…</p>
</article>
<article>
<h2>Granny Smith</h2>
<p>These juicy, green apples make a great filling for apple pies.</p>
<p>…</p>
<p>…</p>
</article>
</main>
<!-- other content -->
Kết quả
Tóm tắt kỹ thuật
| Danh mục nội dung | Nội dung flow, 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 |
Nơi mà
nội dung flow
được mong đợi, nhưng chỉ khi nó là một
phần tử main đúng về mặt phân cấp.
|
| Vai trò ARIA ngầm định |
main
|
| Vai trò ARIA được phép | Không có role nào được phép |
| Giao diện DOM | HTMLElement |
Thông số kỹ thuật
| Specification |
|---|
| HTML # the-main-element |