Hari 2: Struktur Dokumen & Semantik HTML5

Kerangka dokumen HTML5 dan elemen semantik — praktik langsung di playground dengan kuis dan checklist.

Pengantar

Di Hari 1 kita punya dokumen sederhana. Hari ini kita rapikan dengan elemen semantik — tag yang menjelaskan makna konten, bukan sekadar kotak kosong.

Kerangka halaman modern

Edit navigasi atau isi artikel — preview langsung mengikuti.

Halaman dengan elemen semantik

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Blog Sederhana</title>
</head>
<body>
  <header>
    <h1>Blog Belajar HTML5</h1>
    <nav>
      <ul>
        <li><a href="#beranda">Beranda</a></li>
        <li><a href="#tentang">Tentang</a></li>
      </ul>
    </nav>
  </header>
 
  <main>
    <article id="beranda">
      <h2>Judul Artikel</h2>
      <p>Isi artikel ada di sini. Coba ubah teks ini.</p>
    </article>
 
    <aside id="tentang">
      <h3>Artikel terkait</h3>
      <p>Tips HTML5 lainnya. Klik menu di atas untuk loncat antar bagian.</p>
    </aside>
  </main>
 
  <footer>
    <p>&copy; 2026 Belajar HTML5</p>
  </footer>
 
</body>
</html>

Preview

Peta elemen semantik

Elemen	Fungsi
`<header>`	Judul / intro bagian
`<nav>`	Navigasi utama
`<main>`	Konten utama (satu per halaman)
`<article>`	Konten mandiri: postingan, berita
`<section>`	Bagian bertema
`<aside>`	Sidebar / catatan samping
`<footer>`	Copyright & tautan sekunder

Coba: susun ulang heading

Snippet di bawah otomatis dibungkus dokumen HTML agar preview tetap jalan. Perbaiki hierarki heading jika perlu.

Hierarki heading

Preview

Kuis hari 2

Elemen mana yang paling tepat untuk konten utama halaman?

Berapa banyak elemen <main> yang disarankan dalam satu halaman?

Checklist

0/4 selesai

Mengerti beda div generik vs elemen semantik
Menyusun header, nav, main, article, footer di playground
Menjaga hierarki heading berurutan
Lulus kedua kuis