Baricode LMS - Main, Section, Article

Main, Section, Article 📄

Tiga elemen semantik ini membentuk kerangka isi utama halaman web — menentukan mana konten pokok, bagaimana konten dikelompokkan, dan mana konten yang bisa berdiri sendiri. Memahami perbedaan ketiganya adalah kunci menulis HTML yang benar secara semantik.

`<main>` — Konten Utama Halaman

<main> menandai konten inti dan unik dari sebuah halaman — konten yang membedakan halaman ini dari halaman lain di website yang sama. Konten yang berulang di setiap halaman seperti header, nav, dan footer tidak boleh berada di dalam <main>.

<body>
  <header>...</header>     <!-- Berulang di setiap halaman -->
  <nav>...</nav>           <!-- Berulang di setiap halaman -->

  <main>
    <!-- Hanya konten unik halaman ini -->
    <h1>Tentang Kami</h1>
    <p>Kami adalah perusahaan teknologi yang berfokus...</p>
  </main>

  <footer>...</footer>     <!-- Berulang di setiap halaman -->
</body>

Aturan Penting `<main>`

✓ Hanya boleh ada SATU <main> per halaman
✓ Tidak boleh bersarang di dalam article, aside, footer, header, nav
✓ Konten di dalamnya harus unik — tidak berulang di halaman lain
✓ Bisa diberi atribut id untuk skip navigation (aksesibilitas)
✗ Jangan masukkan elemen yang muncul di setiap halaman

Skip Navigation — aksesibilitas penting:

<!-- Link untuk melompat langsung ke konten utama -->
<!-- Sangat membantu pengguna screen reader dan keyboard -->
<a href="#konten-utama" class="skip-link">
  Langsung ke Konten Utama
</a>

<header>...</header>
<nav>...</nav>

<main id="konten-utama">
  <h1>Konten Halaman</h1>
  ...
</main>

/* Sembunyikan skip link secara visual tapi tetap bisa diakses */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #4a9eed;
  color: white;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 0 0 8px 0;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;    /* muncul saat difokuskan via keyboard */
}

`<section>` — Pengelompokan Konten Bertema

<section> digunakan untuk mengelompokkan konten yang memiliki tema atau topik yang sama dan biasanya memiliki heading sendiri. Bayangkan seperti bab dalam sebuah buku.

<main>
  <section>
    <h2>Visi Kami</h2>
    <p>Menjadi platform edukasi teknologi terdepan di Asia Tenggara...</p>
  </section>

  <section>
    <h2>Misi Kami</h2>
    <p>Menghadirkan konten berkualitas tinggi yang dapat diakses oleh semua...</p>
  </section>

  <section>
    <h2>Tim Kami</h2>
    <p>Kami terdiri dari 50+ profesional yang berpengalaman...</p>
  </section>
</main>

Kapan Menggunakan `<section>`?

Grup konten dengan heading dan tema sendiri     →  <section>
Bab atau bagian dalam artikel panjang           →  <section>
Tab panel dalam UI                              →  <section>
Zona berbeda di landing page (hero, fitur, dll) →  <section>
Konten tanpa heading / tema jelas               →  <div> (bukan section)
Konten yang bisa berdiri sendiri                →  <article> (bukan section)

⚠️ <section> sebaiknya selalu memiliki heading (<h2>, <h3>, dst) — jika tidak ada heading yang cocok, kemungkinan <div> lebih tepat digunakan.

`<article>` — Konten yang Berdiri Sendiri

<article> digunakan untuk konten yang bisa berdiri sendiri dan bisa didistribusikan secara independen — konten yang masih bermakna meski diangkat keluar dari konteks halaman aslinya.

<main>
  <article>
    <h2>5 Tips Belajar HTML dengan Cepat</h2>
    <p>Belajar HTML tidak harus lama jika dilakukan dengan cara yang tepat...</p>
  </article>
</main>

Kapan Menggunakan `<article>`?

Posting blog / artikel                  →  <article>
Berita dari situs berita                →  <article>
Postingan di forum diskusi              →  <article>
Komentar pengguna                       →  <article>
Card produk di toko online              →  <article>
Widget cuaca atau saham                 →  <article>
Konten yang tidak bisa berdiri sendiri  →  <section> atau <div>

Cara mudah menentukan apakah harus <article>:

Bayangkan konten ini dicopy ke RSS feed, email newsletter, atau halaman lain — apakah masih bermakna tanpa konteks halaman aslinya? Jika ya → <article>.

`<article>` Bersarang

<article> bisa bersarang di dalam <article> lain — misalnya komentar di dalam artikel:

<article>
  <header>
    <h1>Cara Membuat Website Pertama</h1>
    <p>Oleh Budi Santoso — 20 April 2025</p>
  </header>

  <p>Membuat website pertama kali bisa terasa menakutkan, tapi...</p>
  <p>Langkah pertama adalah memahami struktur dasar HTML...</p>

  <!-- Komentar pengguna — article bersarang -->
  <section>
    <h2>Komentar (3)</h2>

    <article>
      <header>
        <strong>Dewi Rahayu</strong>
        <time datetime="2025-04-21">21 April 2025</time>
      </header>
      <p>Artikel yang sangat membantu! Saya berhasil membuat website
         pertama saya setelah membaca panduan ini.</p>
    </article>

    <article>
      <header>
        <strong>Andi Pratama</strong>
        <time datetime="2025-04-22">22 April 2025</time>
      </header>
      <p>Terima kasih! Penjelasannya sangat jelas dan mudah dipahami
         bahkan untuk pemula seperti saya.</p>
    </article>

  </section>

  <footer>
    <a href="#">HTML</a>
    <a href="#">Tutorial</a>
    <a href="#">Pemula</a>
  </footer>
</article>

Perbedaan `<main>`, `<section>`, dan `<article>`

Pertanyaan	`<main>`	`<section>`	`<article>`
Boleh lebih dari satu?	❌ Tidak	✅ Ya	✅ Ya
Butuh heading?	Tidak wajib	✅ Sangat dianjurkan	✅ Ya
Bisa berdiri sendiri?	Ya (unik per halaman)	Tidak	✅ Ya
Boleh bersarang?	Tidak	✅ Di dalam main/article	✅ Di dalam section/article
Analoginya	Isi buku	Bab dalam buku	Artikel majalah

`<section>` vs `<article>` vs `<div>`

Ini yang paling sering membingungkan — berikut panduan praktisnya:

<!-- Gunakan <article> — konten bisa berdiri sendiri -->
<article>
  <h2>Review iPhone 16 Pro</h2>
  <p>iPhone terbaru dari Apple hadir dengan...</p>
</article>

<!-- Gunakan <section> — kelompok konten bertema, tidak berdiri sendiri -->
<section>
  <h2>Spesifikasi Teknis</h2>
  <p>Layar 6.3 inci Super Retina XDR...</p>
</section>

<!-- Gunakan <div> — hanya untuk styling/layout, tanpa makna semantik -->
<div class="wrapper">
  <div class="grid-kolom-dua">...</div>
</div>

Struktur Halaman Lengkap — Landing Page

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebSaya — Belajar Web Development</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: sans-serif;
      color: #1e1e1e;
      line-height: 1.6;
    }

    /* Skip link */
    .skip-link {
      position: absolute;
      top: -40px;
      left: 0;
      background: #4a9eed;
      color: white;
      padding: 8px 16px;
      text-decoration: none;
      z-index: 999;
      border-radius: 0 0 8px 0;
    }
    .skip-link:focus { top: 0; }

    /* Header */
    header {
      background: #1e1e1e;
      color: white;
      padding: 0 40px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .logo {
      font-size: 18px;
      font-weight: 700;
      color: white;
      text-decoration: none;
    }

    nav ul {
      list-style: none;
      display: flex;
      gap: 24px;
    }

    nav a {
      color: #d1d5db;
      text-decoration: none;
      font-size: 14px;
      transition: color 0.2s;
    }

    nav a:hover { color: white; }

    /* Section Hero */
    .hero {
      background: linear-gradient(135deg, #1e3a5f 0%, #4a9eed 100%);
      color: white;
      text-align: center;
      padding: 100px 40px;
    }

    .hero h1 {
      font-size: 42px;
      margin-bottom: 16px;
      line-height: 1.2;
    }

    .hero p {
      font-size: 18px;
      color: rgba(255,255,255,0.85);
      max-width: 560px;
      margin: 0 auto 32px;
    }

    .btn {
      display: inline-block;
      padding: 14px 32px;
      background: white;
      color: #1e3a5f;
      text-decoration: none;
      border-radius: 8px;
      font-weight: 700;
      font-size: 15px;
      transition: transform 0.2s;
    }

    .btn:hover { transform: translateY(-2px); }

    /* Section Fitur */
    .fitur {
      padding: 80px 40px;
      background: #f9fafb;
    }

    .fitur h2 {
      text-align: center;
      font-size: 28px;
      margin-bottom: 48px;
    }

    .fitur-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      max-width: 960px;
      margin: 0 auto;
    }

    /* Article card fitur */
    .fitur-grid article {
      background: white;
      border-radius: 12px;
      padding: 28px;
      border: 1px solid #e5e7eb;
      transition: box-shadow 0.2s;
    }

    .fitur-grid article:hover {
      box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    }

    .fitur-icon {
      font-size: 32px;
      margin-bottom: 16px;
    }

    .fitur-grid article h3 {
      font-size: 17px;
      margin-bottom: 10px;
    }

    .fitur-grid article p {
      font-size: 14px;
      color: #6b7280;
      line-height: 1.7;
    }

    /* Section Kursus */
    .kursus {
      padding: 80px 40px;
    }

    .kursus h2 {
      text-align: center;
      font-size: 28px;
      margin-bottom: 8px;
    }

    .kursus .subtitle {
      text-align: center;
      color: #6b7280;
      margin-bottom: 48px;
    }

    .kursus-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      max-width: 960px;
      margin: 0 auto;
    }

    /* Article card kursus */
    .kursus-grid article {
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      overflow: hidden;
      transition: transform 0.2s, box-shadow 0.2s;
    }

    .kursus-grid article:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 32px rgba(0,0,0,0.1);
    }

    .kursus-thumb {
      width: 100%;
      height: 160px;
      object-fit: cover;
      display: block;
    }

    .kursus-thumb-placeholder {
      width: 100%;
      height: 160px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 48px;
    }

    .kursus-body {
      padding: 20px;
    }

    .kursus-tag {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #4a9eed;
      margin-bottom: 8px;
    }

    .kursus-body h3 {
      font-size: 16px;
      margin-bottom: 8px;
    }

    .kursus-body p {
      font-size: 13px;
      color: #6b7280;
      margin-bottom: 16px;
      line-height: 1.6;
    }

    .kursus-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: #9ca3af;
      border-top: 1px solid #f3f4f6;
      padding-top: 12px;
    }

    .kursus-harga {
      font-size: 15px;
      font-weight: 700;
      color: #22c55e;
    }

    /* Section Testimoni */
    .testimoni {
      background: #f0f7ff;
      padding: 80px 40px;
    }

    .testimoni h2 {
      text-align: center;
      font-size: 28px;
      margin-bottom: 48px;
    }

    .testimoni-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      max-width: 960px;
      margin: 0 auto;
    }

    /* Article card testimoni */
    .testimoni-grid article {
      background: white;
      border-radius: 12px;
      padding: 24px;
      border: 1px solid #dbe4ff;
    }

    .bintang {
      color: #f59e0b;
      font-size: 16px;
      margin-bottom: 12px;
    }

    .testimoni-grid article p {
      font-size: 14px;
      color: #374151;
      line-height: 1.7;
      margin-bottom: 16px;
      font-style: italic;
    }

    .testimoni-grid article footer {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #4a9eed;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 14px;
      flex-shrink: 0;
    }

    .testimoni-nama strong {
      display: block;
      font-size: 14px;
      color: #1e1e1e;
    }

    .testimoni-nama span {
      font-size: 12px;
      color: #9ca3af;
    }

    /* Footer */
    footer.site-footer {
      background: #111827;
      color: #6b7280;
      text-align: center;
      padding: 32px 40px;
      font-size: 14px;
    }

    footer.site-footer a {
      color: #4a9eed;
      text-decoration: none;
    }
  </style>
</head>
<body>

  <!-- Skip Navigation -->
  <a href="#konten-utama" class="skip-link">Langsung ke Konten Utama</a>

  <!-- Header -->
  <header>
    <a href="/" class="logo">WebSaya</a>
    <nav aria-label="Navigasi Utama">
      <ul>
        <li><a href="#fitur">Fitur</a></li>
        <li><a href="#kursus">Kursus</a></li>
        <li><a href="#testimoni">Testimoni</a></li>
        <li><a href="/login">Masuk</a></li>
      </ul>
    </nav>
  </header>

  <!-- Main — Konten Utama -->
  <main id="konten-utama">

    <!-- Section Hero -->
    <section class="hero" aria-label="Hero">
      <h1>Belajar Web Development<br>Mulai dari Nol</h1>
      <p>
        Kuasai HTML, CSS, JavaScript, dan framework modern
        dengan kurikulum terstruktur dalam Bahasa Indonesia.
      </p>
      <a href="/daftar" class="btn">Mulai Belajar Gratis</a>
    </section>

    <!-- Section Fitur -->
    <section class="fitur" id="fitur">
      <h2>Mengapa Belajar di WebSaya?</h2>

      <div class="fitur-grid">

        <article>
          <div class="fitur-icon">📚</div>
          <h3>Kurikulum Terstruktur</h3>
          <p>
            Materi disusun dari nol hingga mahir dengan urutan
            pembelajaran yang logis dan mudah diikuti siapapun.
          </p>
        </article>

        <article>
          <div class="fitur-icon">🎯</div>
          <h3>Proyek Nyata</h3>
          <p>
            Setiap modul dilengkapi proyek praktis yang bisa
            langsung masuk ke portofolio kerja kamu.
          </p>
        </article>

        <article>
          <div class="fitur-icon">👥</div>
          <h3>Komunitas Aktif</h3>
          <p>
            Bergabung dengan 50.000+ pelajar dan mentor berpengalaman
            yang siap membantu perjalanan belajarmu.
          </p>
        </article>

      </div>
    </section>

    <!-- Section Kursus -->
    <section class="kursus" id="kursus">
      <h2>Kursus Pilihan</h2>
      <p class="subtitle">Mulai dari manapun sesuai level kemampuanmu</p>

      <div class="kursus-grid">

        <article>
          <div class="kursus-thumb-placeholder" 
               style="background:#dbe4ff; color:#4a9eed;">
            🌐
          </div>
          <div class="kursus-body">
            <p class="kursus-tag">Pemula</p>
            <h3>HTML & CSS Dasar</h3>
            <p>Fondasi web development — struktur halaman dan styling visual dari nol.</p>
            <div class="kursus-meta">
              <span>32 lesson · 8 jam</span>
              <span class="kursus-harga">Gratis</span>
            </div>
          </div>
        </article>

        <article>
          <div class="kursus-thumb-placeholder" 
               style="background:#d3f9d8; color:#22c55e;">
            ⚡
          </div>
          <div class="kursus-body">
            <p class="kursus-tag">Menengah</p>
            <h3>JavaScript Modern</h3>
            <p>ES6+, DOM manipulation, async/await, dan konsep pemrograman modern.</p>
            <div class="kursus-meta">
              <span>48 lesson · 14 jam</span>
              <span class="kursus-harga">Rp 149.000</span>
            </div>
          </div>
        </article>

        <article>
          <div class="kursus-thumb-placeholder" 
               style="background:#fce7f3; color:#ec4899;">
            ⚛️
          </div>
          <div class="kursus-body">
            <p class="kursus-tag">Lanjutan</p>
            <h3>React.js Fundamentals</h3>
            <p>Bangun aplikasi web interaktif modern dengan library UI terpopuler.</p>
            <div class="kursus-meta">
              <span>56 lesson · 18 jam</span>
              <span class="kursus-harga">Rp 249.000</span>
            </div>
          </div>
        </article>

      </div>
    </section>

    <!-- Section Testimoni -->
    <section class="testimoni" id="testimoni">
      <h2>Kata Mereka yang Sudah Belajar</h2>

      <div class="testimoni-grid">

        <article>
          <div class="bintang">★★★★★</div>
          <p>
            "Setelah ikut kursus HTML & CSS di sini, saya langsung
            bisa bikin landing page untuk bisnis saya sendiri.
            Materinya sangat mudah dipahami!"
          </p>
          <footer>
            <div class="avatar">D</div>
            <div class="testimoni-nama">
              <strong>Dewi Rahayu</strong>
              <span>Pemilik UMKM, Semarang</span>
            </div>
          </footer>
        </article>

        <article>
          <div class="bintang">★★★★★</div>
          <p>
            "Dari nol programming, sekarang saya sudah bisa
            membuat aplikasi web full-stack. WebSaya benar-benar
            mengubah karir saya."
          </p>
          <footer>
            <div class="avatar" style="background:#22c55e;">A</div>
            <div class="testimoni-nama">
              <strong>Andi Firmansyah</strong>
              <span>Junior Developer, Jakarta</span>
            </div>
          </footer>
        </article>

        <article>
          <div class="bintang">★★★★★</div>
          <p>
            "Komunitas yang supportif dan materi yang selalu
            diperbarui membuat pengalaman belajar di sini
            benar-benar menyenangkan dan efektif."
          </p>
          <footer>
            <div class="avatar" style="background:#8b5cf6;">S</div>
            <div class="testimoni-nama">
              <strong>Sinta Maharani</strong>
              <span>UI Designer, Yogyakarta</span>
            </div>
          </footer>
        </article>

      </div>
    </section>

  </main>

  <!-- Footer -->
  <footer class="site-footer">
    <p>
      &copy; 2025 WebSaya — Platform Belajar Web Development Indonesia.
      Dibuat dengan ❤️ oleh <a href="#">Tim WebSaya</a>.
    </p>
  </footer>

</body>
</html>

Cara Cepat Menentukan Elemen yang Tepat

Konten ini unik dan inti dari halaman?
  → Ya  = <main>

Konten ini bisa berdiri sendiri di tempat lain?
  → Ya  = <article>
  → Tidak, tapi punya tema dan heading sendiri = <section>
  → Tidak, hanya butuh pembungkus layout = <div>

Ringkasan

Tag	Jumlah per Halaman	Butuh Heading	Bisa Berdiri Sendiri	Analogi
`<main>`	Hanya 1	Tidak wajib	Ya (unik per halaman)	Isi buku
`<section>`	Banyak	✅ Sangat dianjurkan	Tidak	Bab dalam buku
`<article>`	Banyak	✅ Ya	✅ Ya	Artikel majalah

💡 Tips: Jika ragu antara <section> dan <div> — tanya pada diri sendiri: "Apakah elemen ini punya makna yang perlu disampaikan ke browser dan mesin pencari?" Jika ya, gunakan <section>. Jika hanya untuk styling dan layout semata, gunakan <div>. Semantik yang benar adalah investasi jangka panjang untuk SEO dan aksesibilitas website. 🚀

Main, Section, Article

Main, Section, Article 📄

`<main>` — Konten Utama Halaman

Aturan Penting `<main>`

`<section>` — Pengelompokan Konten Bertema

Kapan Menggunakan `<section>`?

`<article>` — Konten yang Berdiri Sendiri

Kapan Menggunakan `<article>`?

`<article>` Bersarang

Perbedaan `<main>`, `<section>`, dan `<article>`

`<section>` vs `<article>` vs `<div>`

Struktur Halaman Lengkap — Landing Page

Cara Cepat Menentukan Elemen yang Tepat

Ringkasan

Informasi Kursus

Pelajaran dalam Kategori Ini

Main, Section, Article

Main, Section, Article 📄

<main> — Konten Utama Halaman

Aturan Penting <main>

<section> — Pengelompokan Konten Bertema

Kapan Menggunakan <section>?

<article> — Konten yang Berdiri Sendiri

Kapan Menggunakan <article>?

<article> Bersarang

Perbedaan <main>, <section>, dan <article>

<section> vs <article> vs <div>

Struktur Halaman Lengkap — Landing Page

Cara Cepat Menentukan Elemen yang Tepat

Ringkasan

Informasi Kursus

Pelajaran dalam Kategori Ini

`<main>` — Konten Utama Halaman

Aturan Penting `<main>`

`<section>` — Pengelompokan Konten Bertema

Kapan Menggunakan `<section>`?

`<article>` — Konten yang Berdiri Sendiri

Kapan Menggunakan `<article>`?

`<article>` Bersarang

Perbedaan `<main>`, `<section>`, dan `<article>`

`<section>` vs `<article>` vs `<div>`