FluentStack

Semantic HTML Review

Mode tersedia: dark, light, paper
MasukDaftar
Advanced · Level 15: AccessibilityAdvanced55 menitBahasa Indonesia

Semantic HTML Review

Menilai struktur halaman dari tugas tiap bagian, bukan dari tampilan visual atau class CSS yang kebetulan dipakai.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Mengaudit landmark, heading, link, dan button pada satu page produk
  • Memilih elemen HTML dari fungsi UI yang sebenarnya
  • Membedakan navigation dari action yang mengubah state
  • Menjelaskan dampak struktur semantic pada keyboard dan assistive technology
Semantic HTMLLandmarksButtonsLinksAccessibility Audit

Isi lesson

6 blok
  1. 1.
    Mulai audit dari tugas user, bukan dari tag yang terlihat serupaBelum selesaiWajib
  2. 2.
    Dari tampilan generik ke struktur course yang dapat ditinjauBelum selesaiWajib
  3. 3.
    Coding practiceBelum selesaiWajib
  4. 4.
    Cek pemahamanBelum selesaiWajib
  5. 5.
    ARIA tidak menggantikan elemen yang tepatBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

Mulai audit dari tugas user, bukan dari tag yang terlihat serupa

Wajib

Pada page produk, CSS dapat membuat div, link, dan button terlihat hampir sama. Namun browser serta assistive technology membaca peran yang berbeda. Landmark seperti header, nav, dan main membantu orang menemukan bagian besar page. Heading memberi peta content. Link membawa user ke tujuan lain, sedangkan button menjalankan action pada konteks saat ini, misalnya membuka filter atau menyimpan bookmark. Review semantic bukan pekerjaan kosmetik setelah feature selesai. Ia membantu keyboard user memperoleh urutan, capability, dan nama control yang masuk akal tanpa kita menulis ulang behavior native dari awal.

Bagian ini memengaruhi progres lesson.

Dari tampilan generik ke struktur course yang dapat ditinjau

Wajib
html
<!-- Sebelum: class menjelaskan style, bukan peran -->
<div class="course-top">
  <div class="brand">FluentStack</div>
  <div class="course-links">...</div>
</div>
<div class="course-content">
  <div class="course-title">React Intermediate</div>
  <div class="bookmark">Simpan course</div>
</div>

<!-- Sesudah: struktur serta action lebih jelas -->
<header>
  <a href="/learn">FluentStack</a>
  <nav aria-label="Navigasi course">...</nav>
</header>
<main>
  <h1>React Intermediate</h1>
  <button type="button">Simpan course</button>
</main>

Class CSS tetap boleh dipakai untuk styling, tetapi elemen native menyatakan fungsi yang tidak dapat diberikan oleh class. Link brand membawa user ke route lain. Button bookmark menjalankan action pada page saat ini. Struktur ini juga membuat tab order dan fokus lebih mudah diaudit pada lesson berikutnya.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Audit course page semantics

Ganti struktur course berbasis div dengan landmark dan native control yang sesuai tugas user.

Tujuan awal: Tinjau setiap bagian dari fungsinya: brand menuju route, navigation berisi destination, dan bookmark adalah action.

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

Tombol selesai aktif setelah semua validasi wajib lolos.

7 cek otomatis5 checklist
Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Control Simpan course membuka atau menutup status bookmark tanpa berpindah route. Elemen mana yang tepat?

Progres lesson naik setelah jawaban benar.

Kesalahan umum

Wajib

ARIA tidak menggantikan elemen yang tepat

Jangan menempel role pada div hanya untuk meniru button atau landmark ketika HTML native tersedia. ARIA dapat memberi informasi tambahan saat dibutuhkan, tetapi tidak otomatis memberi seluruh keyboard behavior native. Pada module ini, mulai dari elemen HTML yang tepat dan audit hasilnya dengan keyboard.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib
  • Semantic review dimulai dari tugas user: navigasi, content utama, atau action.
  • Landmark dan heading memberi peta page yang berguna bagi keyboard serta assistive technology.
  • Link digunakan untuk destination, button untuk action pada konteks saat ini.
  • Native HTML mengurangi behavior keyboard yang harus dibuat dan dipelihara sendiri.
  • Berikutnya, struktur source yang baik dipakai untuk menilai apakah Tab bergerak dalam urutan yang dapat diprediksi.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Mulai audit dari tugas user, bukan dari tag yang terlihat serupa.

Memuat progresReview module