Thẻ HTML <main>

Nguyen Le Oanh

Định nghĩa và cách sử dụng thẻ <main>

Thẻ <main> chỉ định nội dung chính của tài liệu. Ví dụ sau nêu nội dung chính của văn bản:

<main>
  <h1>Những trình duyệt phổ biến nhất</h1>
  <p>Chrome, Firefox và Edge là những 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, phát hành năm 2008. Chrome là trình duyệt web phổ biến nhất thế giới hiện nay!</p>
  </article>

  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox là một trình duyệt web mã nguồn mở được phát triển bởi Mozilla. Firefox là trình duyệt web phổ biến thứ hai kể từ tháng 1 năm 2018.</p>
  </article>

  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge là một trình duyệt web được phát triển bởi Microsoft, được phát hành vào năm 2015. Microsoft Edge đã thay thế Internet Explorer.</p>
  </article>
</main>

Nội dung bên trong phần tử <main> phải là duy nhất cho tài liệu. Nó không được chứa bất kỳ nội dung nào lặp lại trên các tài liệu như sidebar, liên kết điều hướng, thông tin bản quyền, logo trang web và biểu mẫu tìm kiếm.

Lưu ý: Không được có nhiều hơn một phần tử <main> trong một tài liệu. Phần tử <main> KHÔNG được là phần tử con của phần tử <article>, <aside>, <footer>, <header> hoặc <nav>.

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử.

Thẻ `<main>`	Google Chrome	MS Edge	Mozilla Firefox	Safari	Opera
Thẻ `<main>`	26.0	12.0	21.0	7.0	16.0

Thuộc tính Global

Thẻ <main> cũng hỗ trợ các thuộc tính Global trong HTML.

Thuộc tính sự kiện

Thẻ <main> cũng hỗ trợ thuộc tính sự kiện trong HTML.

Các ví dụ khác

Sử dụng CSS để tạo kiểu cho phần tử <main>:

<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>Những trình duyệt phổ biến nhất</h1>
  <p>Chrome, Firefox và Edge là những trình duyệt được sử dụng nhiều nhất hiện nay.</p>
  <article class="browser">
    <h2>Google Chrome</h2>
    <p>Google Chrome là trình duyệt web được phát triển bởi Google, phát hành năm 2008. Chrome là trình duyệt web phổ biến nhất thế giới hiện nay!</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox là một trình duyệt web mã nguồn mở được phát triển bởi Mozilla. Firefox là trình duyệt web phổ biến thứ hai kể từ tháng 1 năm 2018.</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge là một trình duyệt web được phát triển bởi Microsoft, được phát hành vào năm 2015. Microsoft Edge đã thay thế Internet Explorer.</p>
  </article>
</main>

</body>
</html>

Chủ Nhật, 19/02/2023 09:00

5 ★ 2 👨 386