Semantic HTML & Struktur Halaman

Memahami dan menerapkan elemen semantik HTML5 untuk struktur halaman yang bermakna, SEO-friendly, dan aksesibel.

Phase

Phase 1 — HTML

Topik

HTML Fundamentals

Durasi

90 Menit

Deadline Tugas

Sebelum Pertemuan Berikutnya — Pukul 23.59 WIB

🎯Tujuan Pembelajaran

01Memahami pentingnya semantic HTML untuk SEO & aksesibilitas
02Menggunakan tag struktural: <header>, <nav>, <main>, <footer>
03Menggunakan tag konten: <section>, <article>, <aside>
04Menggunakan tag lain: <figure>, <figcaption>, <time>, <address>
05Memahami perbedaan <div> vs tag semantic
06Menerapkan meta tags: description, keywords, og:tags

📖Sub-topik & Materi

01Pentingnya semantic HTML untuk SEO & aksesibilitas
02Tag struktural: <header>, <nav>, <main>, <footer>
03Tag konten: <section>, <article>, <aside>
04Tag pendukung: <figure>, <figcaption>, <time>, <address>
05Perbedaan <div> (non-semantic) vs tag semantic
06Meta tags: description, og:title, og:image

💡Penjelasan Konsep

Konsep 1

Mengapa Semantic HTML Penting?

Browser, Google, dan screen reader memahami MAKNA konten dari tag yang digunakan. Jika kamu menggunakan <header> untuk header, Google tahu itu adalah header halaman dan lebih mudah mengindeks situsmu. <div> tidak punya makna — hanya kotak kosong. Tag semantic membuat kode lebih mudah dibaca, SEO lebih baik, dan aksesibel untuk penyandang disabilitas.

Konsep 2

Tag Struktural: header, nav, main, footer

<header> berisi logo, judul, dan navigasi utama. <nav> khusus untuk navigasi/menu. <main> berisi konten utama halaman — hanya boleh ADA SATU per halaman. <footer> berisi info copyright, kontak, link sosial. Semua ini menggantikan penggunaan <div id="header">, <div id="nav">, dst.

html

<body>
  <header>
    <h1>Logo Situs</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>

  <main>
    <!-- konten utama di sini -->
  </main>

  <footer>
    <p>&copy; 2025 Parelabs Academy</p>
  </footer>
</body>

Konsep 3

Tag Konten: article, section, aside

<article> untuk konten yang bisa berdiri sendiri dan masuk akal jika dibaca di luar konteks halaman (artikel blog, produk, komentar). <section> untuk mengelompokkan konten bertema sama dalam satu halaman. <aside> untuk konten sampingan yang berhubungan tapi bukan bagian utama (sidebar, iklan, link terkait).

html

<main>
  <article>
    <h2>Judul Artikel Blog</h2>
    <time datetime="2025-01-15">15 Januari 2025</time>
    <section>
      <h3>Pendahuluan</h3>
      <p>Isi paragraf pertama...</p>
    </section>
    <section>
      <h3>Isi Utama</h3>
      <p>Isi paragraf kedua...</p>
    </section>
  </article>

  <aside>
    <h3>Artikel Terkait</h3>
    <ul>...</ul>
  </aside>
</main>

Konsep 4

Meta Tags untuk SEO

Meta tags di dalam <head> memberi informasi tentang halaman kepada browser dan search engine. description ditampilkan di hasil pencarian Google. og:title dan og:image digunakan saat link dibagikan di media sosial (WhatsApp, Twitter, dll). Selalu sertakan viewport untuk responsivitas.

html

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Belajar HTML di Parelabs Academy, kursus web development terbaik di Pare">
  
  <!-- Open Graph untuk media sosial -->
  <meta property="og:title" content="Parelabs Academy">
  <meta property="og:description" content="Kursus Web Development #1 di Kampung Inggris">
  <meta property="og:image" content="https://parelabs.id/og-image.jpg">
  
  <title>Parelabs Academy</title>
</head>

💻Contoh Kode Lengkap

html

<!-- Struktur Semantic HTML -->
<header>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </nav>
</header>

<main>
  <article>
    <h1>Judul Artikel Utama</h1>
    <time datetime="2025-01-15">15 Januari 2025</time>
    <section>
      <h2>Sub-bagian 1</h2>
      <p>Isi konten artikel...</p>
    </section>
    <figure>
      <img src="foto.jpg" alt="Gambar ilustrasi">
      <figcaption>Keterangan gambar</figcaption>
    </figure>
  </article>
  <aside>
    <h3>Artikel Terkait</h3>
  </aside>
</main>

<footer>
  <address>Jl. Pare, Kediri, Jawa Timur</address>
  <p>Copyright © 2025 Parelabs Academy</p>
</footer>

⚡Latihan Kelas · Restrukturisasi halaman profil (Tugas 1.1) menggunakan tag semantic

Buka kembali file Tugas 1.1 (halaman profil)

Ganti semua <div> dengan elemen semantic yang tepat

Tambahkan <header> untuk nama & navigasi, <main> untuk konten utama

Gunakan <article> untuk bio, <aside> untuk info tambahan

Tambahkan <footer> dengan informasi kontak

Validasi di validator.w3.org — target 0 error

📝 Tugas 1.5 — Blog Post Semantic

⏰ Deadline: Sebelum Pertemuan Berikutnya — Pukul 23.59 WIB

Buat halaman blog post menggunakan semua tag semantic yang tepat. Harus ada: header+nav, main dengan article (min. 2 section) + aside, footer, figure+figcaption, time, dan meta tags (description, og:title).

Kriteria Penilaian	Poin
Semua elemen semantic digunakan dengan tepat	30
Heading hierarchy benar (h1 > h2 > h3)	25
Meta tags hadir (description, viewport)	20
Lulus validasi W3C (0 error)	25
Total	100