FluentStack

Latihan Menerapkan Semantic HTML

Mode tersedia: dark, light, paper
MasukDaftar
Beginner · Level 2: HTML and Accessibility FoundationsBeginner35 menitBahasa Indonesia

Latihan Menerapkan Semantic HTML

Latihan memperbaiki struktur HTML yang terlalu umum menjadi semantic HTML yang lebih jelas.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Mereview keputusan semantic HTML dari contoh yang sudah ada
  • Mengubah struktur berbasis div menjadi semantic HTML yang lebih jelas
  • Memilih elemen berdasarkan fungsi konten, bukan tampilan
HTMLAccessibilityWeb Fundamentals

Isi lesson

6 blok
  1. 1.
    Dari paham konsep ke latihan memilih elemenBelum selesaiWajib
  2. 2.
    Div tidak selalu salahBelum selesaiOpsional
  3. 3.
    Contoh keputusan refactorBelum selesaiWajib
  4. 4.
    Cek pemahamanBelum selesaiWajib
  5. 5.
    Coding practiceBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

Dari paham konsep ke latihan memilih elemen

Wajib

Di lesson sebelumnya, kamu sudah melihat elemen seperti header, nav, main, article, section, dan footer. Sekarang fokusnya bukan mengulang definisi, tetapi melatih keputusan: bagian mana yang sebaiknya tetap div, dan bagian mana yang punya elemen semantic yang lebih tepat.

Bagian ini memengaruhi progres lesson.

Catatan penting

Opsional

Div tidak selalu salah

Div boleh dipakai sebagai wrapper umum. Masalahnya muncul kalau semua bagian penting halaman memakai div, padahal ada elemen HTML yang lebih bermakna untuk navigasi, konten utama, artikel, atau footer.

Opsional, tidak menghambat penyelesaian lesson.

Contoh keputusan refactor

Wajib
html
<div class="menu">
  <a href="/roadmap">Roadmap</a>
</div>

<nav>
  <a href="/roadmap">Roadmap</a>
</nav>

Jika bagian tersebut berisi link navigasi, nav lebih jelas daripada div. Refactor seperti ini membuat fungsi bagian halaman lebih mudah dipahami.

Bagian ini memengaruhi progres lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Elemen mana yang paling tepat untuk membungkus konten utama unik dari sebuah halaman?

Progres lesson naik setelah jawaban benar.

Coding practice

WajibDibuka di workspace khusus

Mengubah struktur div menjadi semantic HTML

Latihan mengganti struktur umum berbasis div menjadi elemen HTML yang lebih bermakna.

Tujuan awal: Gunakan latihan ini sebagai review, bukan materi baru.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

5 cek otomatis5 checklist
Belum selesaiBuka practice

Ringkasan

Wajib
  • Gunakan semantic HTML ketika fungsi bagian halaman sudah jelas.
  • Div masih boleh dipakai untuk wrapper umum, tetapi jangan jadikan div sebagai pengganti semua bagian penting.
  • Jika div hanya dipakai sebagai wrapper besar, cek apakah header, nav, main, article, section, atau footer lebih tepat.
  • Berikutnya, kamu akan mengecek kesiapan Semantic HTML lewat checkpoint module.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Dari paham konsep ke latihan memilih elemen.

Memuat progresReview module