Thẻ <main> HTML

Định nghĩa và cách sử dụng

<main> Thẻ xác định nội dung chính của tài liệu.

<main> Nội dung của phần tử nên là duy nhất đối với tài liệu. Không nên chứa nội dung lặp lại trong nhiều tài liệu, chẳng hạn như thanh bên, liên kết hướng dẫn, thông tin bản quyền, biểu tượng trang web và biểu mẫu tìm kiếm.

Lưu ý:Tài liệu không thể có nhiều Phần tử <main>。Phần tử <main> không thể là <article>và<aside>và<footer>và<header> hoặc <nav> Phần tử con của phần tử.

Mô hình

Ví dụ 1

Định nghĩa nội dung chính của tài liệu:

<main>
  <h1>Trình duyệt phổ biến nhất</h1>
  <p>Chrome, Firefox và Edge là các trình duyệt được sử dụng nhiều nhất hiện nay.</p>
  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome là trình duyệt web được phát triển bởi Google, được phát hành vào năm 2008......</p>
  </article>
  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox là trình duyệt web mã nguồn mở được Mozilla phát triển......&</p>
  </article>
  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge là trình duyệt web được Microsoft phát triển, được ra mắt vào năm 2015......&</p>
  </article>
</main>

Thử ngay

Ví dụ 2

Đặt kiểu bằng CSS <main> Kiểu dáng của phần tử:

<html>
<head>
<style>
main {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}
main > h1, p, .browser {
  margin: 10px;
  padding: 5px;
}
.browser {
  background: white;
}
.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
</style>
</head>
<body>
<main>
  <h1>Trình duyệt phổ biến nhất</h1>
  <p>Chrome, Firefox và Edge là các trình duyệt được sử dụng nhiều nhất hiện nay.</p>
  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome là trình duyệt web được phát triển bởi Google, được phát hành vào năm 2008......</p>
  </article>
  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox là trình duyệt web mã nguồn mở được Mozilla phát triển......&</p>
  </article>
  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge là trình duyệt web được Microsoft phát triển, được ra mắt vào năm 2015......&</p>
  </article>
</main>
</body>
</html>

Thử ngay

Thuộc tính toàn cục

<main> Nhãn còn hỗ trợ Thuộc tính toàn cục trong HTML.

Thuộc tính sự kiện

<main> Nhãn còn hỗ trợ Thuộc tính sự kiện trong HTML.

Hỗ trợ trình duyệt

Số trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ nhãn này hoàn toàn.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 12.0 21.0 7.0 16.0