Menempatkan Konten di main dan Hanya Satu main
Tentukan satu wilayah konten utama.
Menempatkan Konten di main dan Hanya Satu main adalah pelajaran Web Accessibility Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.
main Adalah Pemeran Utama
Setiap halaman memiliki satu bintang: konten uniknya. Elemen main adalah tempat konten tersebut berada, terpisah dari header dan footer.
Satu main, Selalu
Sebuah halaman harus memiliki tepat satu landmark main. Dua main membingungkan pengguna, yang mengharapkan satu tujuan utama.
Apa yang Berada di Dalamnya
Letakkan konten inti halaman di dalam main: artikel, formulir, atau dasbor. Itulah hal yang sebenarnya ingin didatangi pengguna.
<main>
<h1>Your dashboard</h1>
<p>Today's stats...</p>
</main>Apa yang Tetap di Luar
Hal-hal yang berulang seperti logo situs, navigasi global, dan tautan footer berada di luar main, karena tidak unik untuk halaman ini.
Sasaran Tautan Lewati
Tautan lewati mengarah ke main agar pengguna papan ketik dapat langsung menuju konten, melewati header berulang di setiap halaman.
<a href="#main">Skip to content</a>
<main id="main">...</main>Jadikan main Dapat Difokuskan
Tambahkan tabindex -1 ke main agar tautan lewati dapat memindahkan fokus ke dalamnya tanpa menjadikannya dapat dipilih dengan Tab secara mandiri.
<main id="main" tabindex="-1">
...
</main>Dua main, Aturan Tersembunyi
Jika Anda benar-benar memerlukan main kedua, semua kecuali satu harus disembunyikan dari tampilan. Hanya satu main yang terlihat boleh ada pada satu waktu.
Jangan Bersarang main
Elemen main tidak boleh berada di dalam article, aside, nav, header, atau footer. Elemen ini berada di tingkat teratas badan halaman.
Cadangan Peran main
Untuk peramban yang sangat lama, Anda dapat menambahkan role main sebagai cadangan, tetapi elemen main asli adalah pilihan modern yang tepat.
<main role="main">...</main>Mengapa Satu main Membantu
Dengan satu main, pengguna pembaca layar dapat menekan satu tombol dan langsung berada di konten, di setiap halaman, setiap saat. 🎯
Bentuk Halaman yang Rapi
Header, lalu nav, lalu satu main, kemudian footer. Bentuk yang dapat diprediksi ini membuat halaman mudah dipindai dengan pendengaran.
Pemeriksaan Singkat
Berapa banyak landmark main yang terlihat dan seharusnya ditampilkan oleh satu halaman?
Ringkasan: Satu main yang Jelas
Anda telah belajar menempatkan konten unik di dalam satu main, menjaga bagian yang berulang tetap di luar, dan menggunakannya sebagai sasaran tautan lewati. 🙌
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 “Menempatkan Konten di main dan Hanya Satu main” gratis?
Ya — teks lengkap “Menempatkan Konten di main dan Hanya Satu main” 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 “Menempatkan Konten di main dan Hanya Satu main”?
Tentukan satu wilayah konten utama. 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 2 dari 4.
Berapa lama pelajaran “Menempatkan Konten di main dan Hanya Satu main” 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