Beginner · Level 2: HTML and Accessibility FoundationsBeginner36 menitBahasa Indonesia

Struktur Semantic HTML

Gunakan tag dan element HTML yang sudah kamu pelajari untuk menyusun struktur halaman yang lebih bermakna.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Memahami fungsi elemen semantic dalam struktur halaman
Memilih elemen untuk navigasi, konten utama, dan footer
Menyusun kerangka semantic HTML dan melihat hasilnya di preview

HTMLSemantic HTMLAccessibility

Isi lesson

6 blok

1.
Semantic HTML memberi arti pada strukturBelum selesaiWajib
2.
Jangan memilih elemen berdasarkan tampilanBelum selesaiWajib
3.
Kerangka halaman semanticBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
Coding practiceBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

Semantic HTML memberi arti pada struktur

Wajib

Setelah mengenal tag, element, dan attribute, sekarang kamu bisa memilih element berdasarkan makna. Semantic HTML memberi arti pada bagian halaman. Daripada memakai div untuk semua area, kamu memilih element seperti header, nav, main, section, article, dan footer sesuai fungsi kontennya.

Bagian ini memengaruhi progres lesson.

Kesalahan umum

Wajib

Jangan memilih elemen berdasarkan tampilan

HTML menjelaskan struktur dan peran konten. CSS yang mengatur tampilan. Kalau kamu memilih elemen hanya karena terlihat cocok, struktur halaman bisa membingungkan.

Bagian ini memengaruhi progres lesson.

Kerangka halaman semantic

Wajib

html

<header>
  <a href="/">FluentStack</a>
  <nav>
    <a href="/roadmap">Roadmap</a>
    <a href="/learn">Tracks</a>
  </nav>
</header>

<main>
  <section>
    <h1>Belajar Frontend Engineering</h1>
    <p>Mulai dari fondasi web, HTML, CSS, dan JavaScript.</p>
  </section>
</main>

<footer>
  <p>FluentStack</p>
</footer>

header menandai bagian pembuka, nav menandai navigasi, main menandai konten utama, section mengelompokkan area konten, dan footer menandai bagian penutup.

Bagian ini memengaruhi progres lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Elemen mana yang paling tepat untuk membungkus link navigasi utama?

Progres lesson naik setelah jawaban benar.

Coding practice

WajibDibuka di workspace khusus

Membuat struktur halaman semantic HTML

Latihan menyusun bagian halaman dengan elemen semantic.

Tujuan awal: Semantic HTML membahas makna struktur, bukan visual style.

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 otomatis6 checklist

Belum selesaiBuka practice

Ringkasan

Wajib

Gunakan semantic HTML untuk menjelaskan peran setiap bagian halaman.
Pilih elemen berdasarkan fungsi konten, bukan tampilan visual.
Mulai dari struktur dasar: header, nav, main, section, article, dan footer.
Di preview, cek apakah struktur halaman tetap terbaca jelas walau styling masih sederhana.
Berikutnya, kamu akan menerapkan semantic HTML dengan memperbaiki struktur div yang terlalu umum.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Semantic HTML memberi arti pada struktur.

Memuat progres Review module