header, nav, main, footer: Empat Besar
Bungkus halaman Anda dalam wilayah yang diharapkan pengguna.
header, nav, main, footer: Empat Besar adalah pelajaran Web Accessibility Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Web Accessibility Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Web Accessibility Academy mencakup 4 pelajaran total.
Peta untuk Halaman Anda
Pengguna yang dapat melihat memindai halaman dalam sekejap. Pengguna pembaca layar memerlukan peta, dan elemen landmark HTML5 membuatnya untuk mereka.
Kenali Empat Besarnya
Empat elemen mencakup sebagian besar halaman: header, nav, main, dan footer. Bersama-sama, elemen tersebut membagi tata letak Anda menjadi wilayah yang dapat dilompati pengguna. 🗺️
header: Pita Atas
header tingkat halaman memuat nama situs, logo, dan konten pengantar Anda. Pembaca layar menampilkannya sebagai wilayah banner.
<header>
<h1>CoddyKit</h1>
</header>nav: Tempat Tautan Berada
Bungkus kumpulan tautan utama Anda dengan nav. Ini memberi tahu teknologi bantu bahwa blok tersebut adalah navigasi, sehingga pengguna dapat menemukannya atau melewatinya dengan cepat.
<nav>
<a href="/">Home</a>
<a href="/docs">Docs</a>
</nav>main: Konten Sebenarnya
Elemen main membungkus konten unik halaman. Inilah tujuan yang paling penting bagi pengguna.
<main>
<h1>Article title</h1>
<p>Body...</p>
</main>footer: Wilayah Bawah
footer tingkat halaman memuat hak cipta, tautan hukum, dan informasi kontak. Pembaca layar mengumumkannya sebagai wilayah contentinfo.
<footer>
<p>© 2026 CoddyKit</p>
</footer>Peran Implisit Secara Otomatis
Tag-tag ini memiliki peran ARIA bawaan, sehingga header menjadi banner dan nav menjadi navigation tanpa atribut tambahan apa pun.
Konteks Mengubah Peran
header di dalam artikel hanyalah header bagian, bukan banner halaman. Hanya header tingkat atas yang dihitung sebagai landmark banner.
Mengapa div Tidak Bisa Melakukannya
div tidak memiliki peran, sehingga pembaca layar tidak melihat apa pun untuk dilompati. Tag landmark mengubah struktur yang tidak terlihat menjadi navigasi nyata.
<div class="nav">...</div>Seluruh Halaman Dipetakan
Susun keempatnya bersama-sama, dan pengguna pembaca layar akan langsung mendengar bentuk halaman Anda sebelum membaca satu kata pun. 🎯
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>Kemampuan Melewati Secara Gratis
Dengan landmark yang tersedia, pengguna dapat melompat melewati header langsung ke main, tanpa mendengarkan tautan berulang di setiap halaman.
Pemeriksaan Singkat
Landmark mana yang membungkus konten unik dan utama sebuah halaman?
Ringkasan: Empat Besar
Anda telah belajar bahwa header, nav, main, dan footer memberi pengguna pembaca layar sebuah peta. Tag asli menyediakan peran landmark secara gratis. 🙌
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Pertanyaan yang Sering Diajukan
Apakah pelajaran “header, nav, main, footer: Empat Besar” gratis?
Ya — teks lengkap “header, nav, main, footer: Empat Besar” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Web Accessibility Academy, upgrade ke CoddyKit PRO. Kursus Web Accessibility Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “header, nav, main, footer: Empat Besar”?
Bungkus halaman Anda dalam wilayah yang diharapkan pengguna. Kamu berlatih Web Accessibility Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Web Accessibility Academy?
Tidak diperlukan pengalaman sebelumnya. Web Accessibility Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “header, nav, main, footer: Empat Besar” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Web Accessibility Academy ini?
Ya. Setiap pelajaran Web Accessibility Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- header, nav, main, footer: Empat Besar
- Menempatkan Konten di main dan Hanya Satu main
- Menamai Beberapa Wilayah dengan aria-label
- Navigasi Landmark: Cara Pengguna Berpindah