Tanda <main> HTML

Definisi dan penggunaan

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

<main> Isi elemen untuk dokumen harus unik. Tidak boleh mengandung konten yang terulang di beberapa dokumen, seperti sidebar, tautan navigasi, informasi hak cipta, logo situs, dan formulir pencari.

Perhatian:Dokumen tidak boleh memiliki banyak Elemen <main>。Elemen <main> tidak boleh adalah <article>dan<aside>dan<footer>dan<header> atau <nav> Element turunan dari element.

Contoh

Contoh 1

Tentukan konten utama dokumen:

<main>
  <h1>Peramban yang Paling Populer</h1>
  <p>Chrome, Firefox, dan Edge adalah peramban yang paling sering digunakan saat ini.</p>
  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome adalah peramban internet yang dikembangkan oleh Google, dirilis pada tahun 2008......</p>
  </article>
  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox adalah peramban internet open-source yang dikembangkan oleh Mozilla......&</p>
  </article>
  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge adalah peramban internet yang dikembangkan oleh Microsoft, dirilis pada tahun 2015......&</p>
  </article>
</main>

Coba Sendiri

Contoh 2

Dengan CSS setting <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>Peramban yang Paling Populer</h1>
  <p>Chrome, Firefox, dan Edge adalah peramban yang paling sering digunakan saat ini.</p>
  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome adalah peramban internet yang dikembangkan oleh Google, dirilis pada tahun 2008......</p>
  </article>
  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox adalah peramban internet open-source yang dikembangkan oleh Mozilla......&</p>
  </article>
  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge adalah peramban internet yang dikembangkan oleh Microsoft, dirilis pada tahun 2015......&</p>
  </article>
</main>
</body>
</html>

Coba Sendiri

Atribut Global

<main> Tanda ini juga mendukung Atribut Global di HTML.

Atribut Acara

<main> Tanda ini juga mendukung Atribut Acara di HTML.

Dukungan Browser

Angka di tabel menunjukkan versi browser pertama yang mendukung tanda ini.

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