Dengan header dan footer yang menampung bagian berulang, sisa halaman berisi inti yang membuat pengunjung datang. Elemen main menandai wilayah tersebut sebagai konten dominan dokumen. Chapter ini membahas aturan tunggal main, larangan penempatannya, serta hubungannya dengan skip link yang menolong navigasi keyboard.

Aturan Utama: Satu main per Halaman #

Spesifikasi mendefinisikan main sebagai representasi konten dominan dokumen — bagian yang berisi topik utama halaman atau fungsionalitas utama aplikasi. Aturannya tegas: sebuah dokumen tidak boleh memuat lebih dari satu main yang terlihat. Validator W3C bahkan menuliskan pesan galatnya secara eksplisit: A document must not include more than one visible main element.

Adanya pengecualian justru menegaskan kata “terlihat” di atas. main kedua boleh hadir bila tersembunyi, misalnya melalui atribut hidden, berada di dalam shadow DOM, atau disembunyikan dengan aria-hidden; pola seperti itu dipakai aplikasi web lanjutan. Untuk halaman biasa, cukup pegang patokan sederhana: satu main yang terlihat per halaman.

Isi yang Layak Masuk main #

Isi main seharusnya unik bagi dokumen tersebut. Logo, menu utama, dan footer yang berulang di seluruh halaman situs tidak termasuk, karena konten berulang semacam itu memang ditampung header dan footer di luarnya. Bila kita mengisi main dengan bagian yang berulang, penanda konten inti menjadi tidak berguna bagi mesin pencari maupun screen reader.

Manfaat paling langsung dari main dirasakan pengunjung yang memakai screen reader atau berpindah dengan keyboard. Landmark main memungkinkan mereka menuju konten inti tanpa melewati menu yang sama di setiap halaman. Pola yang menyertainya adalah skip link: tautan pertama di dalam body yang mengarah ke id milik main. Pada contoh kita, skip link ditampilkan sebagai tautan biasa; cara menyembunyikannya sampai disorot membutuhkan CSS yang dibahas pada section HTML dan CSS, sedangkan sisi screen reader-nya menyusul di section Accessibility.

Contoh #

Berkas berikut menata halaman “Tentang” Toko Budi dengan skip link, satu main ber-id, serta header dan footer yang berada di luarnya:

html contoh-main.html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tentang Toko Budi</title>
</head>
<body>
  <a href="#konten-utama">Lompat ke konten utama</a>
  <header>
    <p>Toko Budi</p>
    <nav>
      <a href="index.html">Beranda</a>
      <a href="tentang.html">Tentang</a>
      <a href="kontak.html">Kontak</a>
    </nav>
  </header>
  <main id="konten-utama">
    <h1>Tentang Toko Budi</h1>
    <p>Toko Budi menjual biji kopi pilihan sejak tahun 2019 dan melayani pengiriman ke seluruh Indonesia.</p>
    <h2>Asal Biji Kami</h2>
    <p>Setiap biji berasal dari kebun mitra di dataran tinggi Gayo dan Toraja.</p>
    <h2>Cara Memesan</h2>
    <p>Pilih biji pada halaman produk, lalu isi formulir pemesanan sesuai jumlah kilogram yang diinginkan.</p>
  </main>
  <footer>
    <p>&copy; 2025 Toko Budi</p>
  </footer>
</body>
</html>

Output yang Dihasilkan:

text 
Jendela browser menampilkan:
  - Baris pertama berupa tautan "Lompat ke konten utama"
  - Nama toko dan tiga tautan menu di bawahnya
  - Judul "Tentang Toko Budi" beserta dua sub-bagian ber-heading h2
  - Tulisan "(c) 2025 Toko Budi" di bagian bawah

Mari kita telaah peran setiap baris kunci:

  1. Baris 9 (skip link): tautan pertama di dalam body, mengarah ke #konten-utama dengan pola anchor dari chapter navigasi internal.
  2. Baris 10-17 (header dan nav): identitas situs dan menu berulang berada di luar main, sesuai pembagian tugas di bagian sebelumnya.
  3. Baris 18 (main id="konten-utama"): konten inti memperoleh penanda main sekaligus id yang menjadi target skip link.
  4. Baris 19-24 (isi main): satu h1 dan dua sub-bagian — seluruhnya konten khusus halaman “Tentang”, bukan konten berulang.
  5. Baris 26-28 (footer): penutup halaman tetap di luar main agar konten inti benar-benar murni.

Struktur seperti ini membuat halaman mudah disorot: pembaca keyboard menekan Tab sekali, lalu langsung melompat ke main. Chapter berikutnya melengkapi wilayah yang baru saja kita lewati dengan membahas nav, elemen penampung blok navigasi utama.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

contoh-main.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tentang Toko Budi</title>
</head>
<body>
  <a href="#konten-utama">Lompat ke konten utama</a>
  <header>
    <p>Toko Budi</p>
    <nav>
      <a href="index.html">Beranda</a>
      <a href="tentang.html">Tentang</a>
      <a href="kontak.html">Kontak</a>
    </nav>
  </header>
  <main id="konten-utama">
    <h1>Tentang Toko Budi</h1>
    <p>Toko Budi menjual biji kopi pilihan sejak tahun 2019 dan melayani pengiriman ke seluruh Indonesia.</p>
    <h2>Asal Biji Kami</h2>
    <p>Setiap biji berasal dari kebun mitra di dataran tinggi Gayo dan Toraja.</p>
    <h2>Cara Memesan</h2>
    <p>Pilih biji pada halaman produk, lalu isi formulir pemesanan sesuai jumlah kilogram yang diinginkan.</p>
  </main>
  <footer>
    <p>&copy; 2025 Toko Budi</p>
  </footer>
</body>
</html>