Tanda <main> HTML

Definisi dan penggunaan

<main> Tag <main> menentukan kandungan utama dokumen.

<main> Kandungan dalam elemen untuk dokumen harus unik. Tidak boleh mengandungi kandungan yang terulang dalam beberapa dokumen, seperti papan navigasi, pautan, maklumat hak cipta, logo laman web dan borang carian et cetera.

Perhatian:Dokumen tidak boleh mempunyai beberapa Elemen <main>。Elemen <main> tidak boleh adalah <article>、<aside>、<footer>、<header> atau <nav> Anak elemen dari elemen.

Contoh

Contoh 1

Tetapkan kandungan utama dokumen:

<main>
  <h1>Pelayar web paling populer</h1>
  <p>Chrome, Firefox dan Edge adalah pelayar web yang paling banyak digunakan saat ini.</p>
  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome ialah pelayar web yang diembangkan oleh Google, diterbitkan pada tahun 2008......</p>
  </article>
  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox adalah pelayar web open source yang dibangunkan oleh Mozilla......&</p>
  </article>
  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge adalah pelayar web yang dibangunkan oleh Microsoft, diterbitkan pada tahun 2015......&</p>
  </article>
</main>

Coba Sendiri

Contoh 2

Dengan CSS tetapkan <main> Gaya elemen:

<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>Pelayar web paling populer</h1>
  <p>Chrome, Firefox dan Edge adalah pelayar web yang paling banyak digunakan saat ini.</p>
  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome ialah pelayar web yang diembangkan oleh Google, diterbitkan pada tahun 2008......</p>
  </article>
  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox adalah pelayar web open source yang dibangunkan oleh Mozilla......&</p>
  </article>
  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge adalah pelayar web yang dibangunkan oleh Microsoft, diterbitkan pada tahun 2015......&</p>
  </article>
</main>
</body>
</html>

Coba Sendiri

Sifat Global

<main> Tanda ini juga mendukung Sifat Global HTML.

Sifat Acara

<main> Tanda ini juga mendukung Sifat Acara dalam HTML.

Pendukung Browser

Angka di dalam tabel menunjukkan versi paling awal penggunaan browser yang mendukung tanda ini.

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