Uji Kompetensi Semantic HTML
Cek kesiapan kamu memilih elemen semantic berdasarkan makna struktur halaman.
Yang dicek
- Memilih elemen semantic berdasarkan fungsi konten
- Membedakan penggunaan header, nav, main, section, article, dan footer
- Memperbaiki struktur div-only menjadi semantic HTML sederhana dan menjelaskan alasannya
Isi lesson
6 blok- 1.Apa yang dicek di checkpoint iniBelum selesaiWajib
- 2.QuizBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Writing practiceBelum selesaiWajib
- 5.Baca MDN secara terarahBelum selesaiOpsional
- 6.RingkasanBelum selesaiWajib
Apa yang dicek di checkpoint ini
WajibCheckpoint ini mengecek apakah kamu bisa memilih elemen berdasarkan makna, bukan tampilan. Kamu akan memutuskan kapan memakai header, nav, main, section, article, dan footer, lalu menerapkannya dalam struktur halaman kecil. Bagian ini tidak mengenalkan konsep besar baru; fokusnya adalah membuktikan kamu siap masuk ke form dan accessibility dasar.
Bagian ini memengaruhi progres lesson.
Quiz
WajibUji Kompetensi Semantic HTML
Jawab pertanyaan satu per satu. Kamu bisa ulang quiz jika belum mencapai target lulus.
Target lulus
70/100
Skor terbaik
0/100
Status
Belum dikerjakan
Blok ini wajib untuk menyelesaikan lesson. Progres quiz naik setelah skor mencapai target lulus.
Pertanyaan 1 dari 6
Target lulus: 70
Apa dasar utama memilih semantic HTML?
Coding practice
WajibDibuka di workspace khususMembangun halaman semantic HTML
Checkpoint praktik untuk menyusun halaman kecil memakai elemen semantic.
Tujuan awal: Ganti struktur umum berbasis div menjadi semantic HTML.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Writing practice
WajibLatihan menulis
Tulis alasan singkat untuk dua pilihan semantic element dari latihan kamu. Contoh fokus: - Kenapa area link lebih tepat memakai nav? - Kenapa konten utama lebih tepat memakai main? - Kenapa bagian post lebih cocok memakai article atau section daripada div biasa?
Tulis draft dulu sebelum menandai writing practice selesai.
0/160 karakter
Checklist panduan
Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.
Documentation Bridge
OpsionalBaca MDN secara terarah
Gunakan bagian ini sebagai latihan membaca dokumentasi resmi, bukan tugas menghafal. Kamu tidak perlu membaca semuanya sekarang. Fokus pada bagian yang mendukung keputusan semantic element di checkpoint ini.
MDN Web Docs
Structuring content with HTML
Fokus baca
- struktur konten HTML
- elemen yang dipakai untuk menyusun halaman
- hubungan antara konten dan makna
Abaikan dulu
- semua halaman reference yang belum relevan
MDN Web Docs
Structuring documents
Fokus baca
- header
- nav
- main
- section
- article
- aside
- footer
- heading hierarchy
Abaikan dulu
- ARIA landmarks yang terlalu detail
- schema markup
- SEO advanced
MDN Web Docs
Challenge: Structuring a page of content
Fokus baca
- melihat contoh challenge struktur halaman
- membandingkan semantic structure dengan div-only structure
Abaikan dulu
- menyelesaikan semua challenge MDN sekarang
Aksi setelah membaca
Kembali ke latihan Semantic HTML dan jelaskan satu pilihan elemen: kenapa bagian itu lebih cocok memakai main, header, nav, section, article, atau footer daripada div biasa?
Opsional, tidak menghambat penyelesaian lesson.
Ringkasan
Wajib- Kamu siap jika bisa memilih semantic element berdasarkan fungsi konten.
- Gunakan nav untuk navigasi, main untuk konten utama, dan footer untuk bagian penutup.
- Gunakan section atau article ketika bagian konten punya kelompok atau isi mandiri yang jelas.
- Jika checkpoint belum lulus, review lagi perbedaan header, nav, main, section, article, footer, dan kapan div masih boleh dipakai.
- Berikutnya, kamu akan masuk ke Forms and Basic Accessibility dan mulai membedakan link, button, serta field form dasar.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian wajib checkpoint ini
Lanjutkan blok wajib berikutnya: Apa yang dicek di checkpoint ini.