Elemen Landmark

Elemen landmark adalah sekumpulan elemen struktur yang menjadikan daerah-daerah halaman dapat dilompati pembaca layar dan dapat dienali alat bantu lain tanpa membaca seluruh konten. Topik ini membahas tujuh elemen utamanya, yaitu header, nav, main, footer, section, article, dan aside, beserta aturan pakai dan peran landmark yang diumumkan masing-masing. Materi ditutup dengan halaman utuh, diagram tata letak, dan skrip penghitung landmark.

Peran landmark di balik elemen#

Setiap elemen dalam topik ini tergolong landmark, yaitu daerah halaman yang diberi label peran bawaan untuk navigasi alat bantu. Ketika halaman dibuka, pembaca layar dapat menampilkan daftar daerah yang tersedia, lalu pengguna memilih daerah tujuan tanpa menggulir halaman. Peran tersebut tidak ditulis dengan atribut, melainkan diturunkan browser dari elemen yang dipakai. Karena itu, satu-satunya pekerjaan penulis adalah memilih elemen yang tepat.

Tabel berikut merangkum elemen dan perannya. Dua peran di dalam tabel hanya berlaku dengan syarat tertentu, sedangkan sisanya melekat pada elemen setiap kali elemen itu dipakai.

Halaman utuh dengan tujuh landmark#

Berkas berikut menyatukan ketujuh elemen pada satu halaman buletin kelas. Setiap daerah diberi bingkai dengan CSS sederhana agar batas antar-landmark terlihat jelas ketika berkas dibuka di browser. Perhatikan bahwa main membungkus article, section, dan aside, sedangkan header, nav, dan footer berada di luar main sebagai kerangka halaman. Di dalam footer, elemen address menandai kontak buletin, dan meski bukan landmark, elemen ini sering menemani footer halaman.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Buletin Statistik Kelas</title>
  <style>
    body { font-family: sans-serif; margin: 0 auto; max-width: 40rem; padding: 0 1rem; }
    header, nav, main, article, section, aside, footer {
      border: 1px solid #bbb; border-radius: 4px;
      margin: 0.5rem 0; padding: 0.25rem 0.75rem;
    }
    aside { background: #f4f4f4; }
    nav a { margin-right: 1rem; }
  </style>
</head>
<body>
  <header>
    <h1>Buletin Statistik Kelas</h1>
    <p>Ringkasan kegiatan belajar mingguan</p>
  </header>

  <nav aria-label="Navigasi utama">
    <a href="#rekap">Rekap</a>
    <a href="#jadwal">Jadwal</a>
    <a href="#kontak">Kontak</a>
  </nav>

  <main>
    <article id="rekap">
      <h2>Rekap nilai ujian</h2>
      <p>Rata-rata kelas naik dari 72 menjadi 78 setelah latihan mingguan.</p>
    </article>

    <section id="jadwal">
      <h2>Jadwal piket</h2>
      <p>Senin: Ali, Selasa: Budi, Rabu: Citra.</p>
    </section>

    <aside>
      <h2>Angka minggu ini</h2>
      <p>Kehadiran tertinggi dicapai hari Kamis dengan 30 dari 31 murid.</p>
    </aside>
  </main>

  <footer id="kontak">
    <p>Buletin disusun oleh wali kelas.</p>
    <address>
      Pertanyaan: <a href="mailto:[email protected]">[email protected]</a>
    </address>
  </footer>
</body>
</html>

Diagram berikut memperlihatkan pembagian yang sama dari sudut pandang peran, dengan label elemen dan peran landmark yang diumumkannya.

Bagian main menjadi inti dokumen, sedangkan kerangka di sekitarnya menjelaskan tempat konten itu berada. Tata letak visual boleh diatur bebas dengan CSS, tetapi banyak panduan menyarankan main ditempatkan sedekat mungkin dengan awal halaman setelah header dan nav, karena konten utama lebih cepat dijangkau.

Aturan pakai header, nav, main, dan footer#

header dan footer mengikuti leluhur terdekat#

Elemen header dan footer tidak selalu berarti kepala dan kaki halaman. Keduanya mengikat ke leluhur pembagian terdekat, yaitu body atau elemen pembagian seperti article. Elemen header di dalam article menjadi kepala tulisan itu, bukan kepala halaman. Peran banner hanya diberikan kepada header yang bukan turunan elemen pembagian seperti article, section, nav, aside, atau main. Aturan yang sama berlaku pada footer dengan peran contentinfo. Browser menampilkan keduanya sebagai blok biasa, sehingga perbedaan perannya hanya terasa pada alat bantu.

main ditulis satu per halaman#

Elemen main mewakili isi utama dokumen, yaitu konten yang langsung berkaitan dengan topik atau fungsi utama halaman. Spesifikasi menetapkan bahwa sebuah dokumen tidak boleh memiliki lebih dari satu elemen main tanpa atribut hidden. Aturan ini menutup kebiasaan lama membungkus konten utama dengan div class="content", sekaligus mencegah dua daerah sama-sama mengaku sebagai inti halaman. Apabila aplikasi menyimpan beberapa templat yang masing-masing memuat main, templat yang tidak aktif wajib diberi atribut hidden.

nav untuk kelompok navigasi yang penting#

Elemen nav mengelompokkan tautan navigasi yang penting, baik menuju bagian halaman yang sama maupun menuju halaman lain. Tidak setiap daftar tautan menjadi nav, karena daftar tautan di dalam footer umumnya cukup ditulis polos dan pembaca layar sudah menandai footer itu sendiri. Aturan kasar yang sering dipakai adalah memberi nav hanya pada kelompok tautan yang memang layak dicantumkan dalam daftar landmark.

Memilih antara section, article, dan aside#

Ketiga elemen ini paling sering tertukar karena sama-sama membungkus konten. Ujiannya adalah kemandirian konten. Elemen article dipakai bila isinya tetap bermakna ketika dipindah sendirian, misalnya diumpankan ke pembaca berita atau dikutip terpisah. Sebuah komentar forum, entri blog, dan kartu berita memenuhi ujian itu. Elemen section dipakai bila isinya adalah bagian tematik dari konten yang lebih besar dan bagian itu punya judul sendiri, misalnya bagian “Jadwal” dan “Rekap” di dalam satu buletin. Apabila pengelompokan hanya diperlukan untuk gaya dan tidak punya makna tematik, elemen div tetap pilihannya.

Elemen aside berdiri terpisah dari keduanya. Isinya berkaitan secara tidak langsung dengan konten sekitar, misalnya kotak angka pendukung, glosarium kecil, atau catatan yang boleh dilepas tanpa merusak alur utama. Menempatkan aside di dalam main sah dilakukan bila informasi samping itu bagian dari konten utama, seperti kotak penjelasan di dalam artikel.

Menghitung landmark dengan skrip#

Daftar landmark sebuah halaman dapat diaudit dengan skrip sederhana. Kode berikut membaca berkas landmark.html, lalu menghitung kemunculan setiap tag landmark. Yang dihitung adalah tag pembuka, sehingga tag penutup tidak ikut terhitung. Skrip ini murni JavaScript dan dapat dijalankan dengan Node.js dari folder tempat berkas itu berada.

// menghitung landmark pada berkas landmark.html
const fs = require("fs");
const html = fs.readFileSync("landmark.html", "utf8");

for (const tag of ["header", "nav", "main", "article", "section", "aside", "footer"]) {
  const n = (html.match(new RegExp(`<${tag}[\\s>]`, "g")) || []).length;
  console.log(`${tag.padEnd(8)}: ${n}`);
}

header  : 1
nav     : 1
main    : 1
article : 1
section : 1
aside   : 1
footer  : 1

Keluaran menunjukkan setiap landmark muncul tepat satu kali, termasuk main yang memang dilarang berlipat. Untuk halaman yang lebih besar, jumlah yang wajar biasanya juga kecil, yaitu satu main, satu header, dan beberapa nav bila navigasinya memang beraneka. Audit seperti ini berguna sebelum halaman dirilis, karena pergeseran struktur sering terjadi tanpa sengaja saat halaman disunting.

Kesalahan umum#

• main dipakai lebih dari satu tanpa atribut hidden. Browser tetap merendernya, tetapi alat bantu menerima dua daerah inti yang saling bertentangan. Satu main ditetapkan sebagai inti, dan salinan lain diberi atribut hidden.
• section ditulis tanpa judul. Tanpa judul, elemen ini tidak memperoleh nama sehingga tidak menjadi landmark bagi pembaca layar. Bila isinya tidak punya judul, gunakan div atau tambahkan judulnya.
• Setiap daftar tautan dibungkus nav. Kelompok tautan kecil di dalam footer biasanya cukup polos, sehingga daftar landmark tidak penuh entri navigasi yang redundan.

Ringkasan#

• header, nav, main, footer, section, article, dan aside membangun kerangka halaman yang dapat dienali alat bantu tanpa atribut peran tambahan.
• header dan footer hanya berperan banner dan contentinfo bila bukan turunan elemen pembagian seperti article atau section.
• main ditulis satu per halaman, dan salinan lainnya wajib beratribut hidden.
• article untuk konten mandiri, section untuk bagian tematik yang berjudul, dan aside untuk konten samping yang berdiri terpisah.

Referensi#

• Sections — HTML Living Standard — WHATWG — Spesifikasi elemen header, nav, main, footer, section, article, aside, dan address.
• Element: main — MDN — Dokumentasi elemen main beserta aturan satu elemen per dokumen.
• Landmark Regions — W3C WAI — Panduan praktik landmark dari ARIA Authoring Practices Guide.
• Learn HTML — web.dev — Kursus resmi web.dev tentang struktur dokumen HTML.