Page Landmarks

Setelah lesson ini, kamu dapat mengganti pembungkus generik dengan header, nav, main, dan footer yang sesuai.

MULAI DARI SEBUAH PERTANYAAN

Pemahaman berawal dari pertanyaan.

Masuk ke gedung tanpa tanda pintu masuk, ruang utama, atau pintu keluar menyulitkan orientasi. Landmark membantu pembaca mengenali bagian besar sebuah halaman.

Mengganti pembungkus generik dengan header, nav, main, dan footer yang sesuai.

PAHAMI KONSEPNYA

Empat peran yang sering ditemukan

Header berisi pengantar seperti identitas situs. Nav menandai kelompok navigasi utama. Main berisi konten utama yang khas untuk halaman itu. Footer berisi informasi penutup seperti keterangan situs. Elemen ini menyatakan peran; bentuk visualnya tetap dapat diatur terpisah.

Main membantu menemukan isi

Untuk halaman sederhana ini gunakan satu main yang terlihat. Navigasi situs dan identitas yang berulang ditempatkan di luar main. Pengguna teknologi bantu dapat memakai struktur ini untuk menuju bagian utama lebih cepat.

Makna bergantung pada konteks

Header dan footer juga dapat muncul di dalam article sebagai pengantar atau penutup artikel tersebut. Tidak semua daftar link perlu nav: sekumpulan link referensi dalam paragraf tidak otomatis merupakan navigasi utama.

CONTOH / KONTEKS

Contoh memperjelas konsep.

CONTOH HTML

<header>
  <p>Taman Baca</p>
  <nav><a href="#koleksi">Koleksi</a></nav>
</header>
<main>
  <h1>Selamat Datang</h1>
  <h2 id="koleksi">Koleksi Pilihan</h2>
  <p>Buku untuk menemani soremu.</p>
</main>
<footer><p>Catatan komunitas belajar.</p></footer>

HASIL DI BROWSER

Pengantar dan navigasi berada sebelum main; footer menutup halaman. H1 tetap menamai isi utama.

KESALAHAN YANG SERING TERJADI

<main>Menu situs</main>
<main>Artikel utama</main>

Jangan membuat beberapa main yang terlihat untuk kelompok konten berbeda. Gunakan nav untuk menu dan satu main untuk isi utama.

COBA BERSAMA

Praktik memperjelas pemahaman.

Lengkapi landmark untuk isi utama halaman.

<>
  <h1>Koleksi Buku</h1>
</main>

Lihat petunjuk

Bukan header atau footer; ini tempat inti isi.

Boleh mencoba berkali-kali. Tugas mandiri berikutnya menjadi bukti penyelesaian lesson.

TULIS · LIHAT · PAHAMI

Beri nama pada ruang halaman

Ubah pembungkus div menjadi header, nav, main, dan footer sesuai isi. Pastikan navigasi berisi tautan ke #kegiatan dan isi utama memiliki h1 serta bagian kegiatan.

<div>
  <p>Kebun Bersama</p>
  <div><a href="#kegiatan">Kegiatan</a></div>
</div>
<div>
  <h1>Mari Menanam</h1>
  <h2 id="kegiatan">Kegiatan Pekanan</h2>
  <p>Merawat bibit bersama.</p>
</div>
<div><p>Catatan komunitas kebun.</p></div>

index.htmlHTMLLn 1, Col 110 baris2 spasi

Pintasan & bantuan editor

Ctrl + Space: Tampilkan saran · ↑ ↓ memilih · Enter menerima · Esc menutup
Shift + Alt + F: Rapikan kode
Ctrl/⌘ + F: Cari dan ganti teks
Ctrl/⌘ + [ / ]: Kurangi / tambah indentasi
Tab: Pindah fokus; dalam snippet, pindah ke isian berikutnya. Esc lalu Tab untuk keluar.
Ctrl/⌘ + Z: Batalkan perubahan, termasuk format

Saran berasal dari bahasa, snippet, dan konteks lokal kode. Format berjalan di browser.

Preview dokumen

Ctrl/⌘ + Enter menjalankan preview. Preview memakai gaya bantu baca. Script dan pengiriman form dinonaktifkan. Ilustrasi contoh: assets/observatory.svg.

BAWA PEMAHAMAN INI BERSAMAMU

Praktik memberi dasar.

Landmark memberi peran pada bagian besar halaman.
Gunakan satu main yang terlihat.
Nav diperuntukkan kelompok navigasi penting.

Struktur semantikAksesibilitas

Lesson tuntas setelah tugas mandiri memenuhi tujuan. Kamu bebas membaca kembali kapan saja.

Hubungkan dengan konsep lain

Landmark °Semantic HTML °Accessibility °

Library: Tiga bahasa di balik satu halaman ↗

Ke lesson berikutnya →