HTML Academy · Pelajaran

Elemen section vs div

Pahami kapan harus menggunakan section dibandingkan div biasa.

Elemen section vs div adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Elemen Bagian

Elemen <section> mengelompokkan konten terkait ke dalam bagian tematik:

<section>
  <h2>Contact Information</h2>
  <p>Email: hello@example.com</p>
  <p>Phone: (555) 555-0100</p>
</section>

Bagian vs Wadah

Pertanyaan kuncinya: apakah kelompok ini memiliki tema atau tujuan yang dapat diberi nama?

<section>—ya; mewakili pengelompokan tematik dan seharusnya memiliki judul
<div>—tidak; hanya merupakan wadah untuk penataan gaya atau skrip

Bagian Memerlukan Judul

Setiap <section> seharusnya memiliki judul (<h2>-<h6>):

<!-- Good: section with heading -->
<section>
  <h2>Our Team</h2>
  <ul>...</ul>
</section>

<!-- Bad: section without heading -->
<section class="hero">  <!-- should be a div -->
  <img src="banner.jpg" alt="">
</section>

Kapan Menggunakan Bagian

Gunakan <section> untuk:

Bab-bab dalam dokumen
Tab atau langkah dalam panduan
Bagian-bagian artikel panjang (Pendahuluan, Metode, Hasil)
Bagian pemasaran di beranda (Fitur, Harga, Testimoni)

Kapan Menggunakan Wadah

Gunakan <div> saat Anda hanya memerlukan wadah untuk CSS atau JavaScript tanpa makna semantik:

<div class="layout">   <!-- just a CSS grid container -->
  <nav>...</nav>
  <main>...</main>
</div>

<div id="modal">       <!-- a JavaScript-controlled modal -->
  ...
</div>

Bagian dalam Artikel Panjang

Gunakan bagian untuk membuat bab-bab dalam artikel:

<article>
  <h1>Complete Guide to HTML5</h1>

  <section>
    <h2>Introduction</h2>
    <p>HTML5 is the fifth version...</p>
  </section>

  <section>
    <h2>Semantic Elements</h2>
    <p>HTML5 introduced many semantic elements...</p>
  </section>

  <section>
    <h2>Forms</h2>
    <p>HTML5 greatly improved form handling...</p>
  </section>
</article>

Bagian Beranda

Beranda terstruktur dengan beberapa bagian:

<main>
  <section id="hero">
    <h2>Build Better Web Apps</h2>
    <p>The platform for modern developers.</p>
  </section>

  <section id="features">
    <h2>Key Features</h2>
    ...
  </section>

  <section id="pricing">
    <h2>Pricing</h2>
    ...
  </section>
</main>

Bagian Membuat Konteks Judul

Bagian membuat konteks judul baru dalam algoritme kerangka dokumen HTML5:

<section>
  <h2>Chapter 1</h2>   <!-- h2 within section context -->
  <section>
    <h3>Section 1.1</h3>
  </section>
</section>
<!-- Note: the HTML5 outline algorithm was never implemented in browsers -->
<!-- In practice, heading order still depends on h1-h6 numbers, not section nesting -->

aria-labelledby untuk Bagian

Hubungkan bagian dengan judulnya untuk pembaca layar:

<section aria-labelledby="features-heading">
  <h2 id="features-heading">Features</h2>
  <ul>...</ul>
</section>
<!-- Screen reader: "Features section" when entering the section -->

Diagram Alur Keputusan

Elemen wadah mana yang harus digunakan?

Navigasi utama? → <nav>
Konten utama halaman? → <main>
Konten mandiri? → <article>
Pengelompokan tematik dengan judul? → <section>
Bilah sisi atau konten terkait? → <aside>
Hanya wadah untuk penataan gaya? → <div>

Bagian Tanpa Judul: Gunakan Wadah

Jika Anda tidak dapat memberikan judul pada suatu bagian, gunakan wadah sebagai gantinya:

<!-- This has no heading — it is just a CSS layout container -->
<!-- Use div, not section: -->
<div class="two-column">
  <div class="column">Left content</div>
  <div class="column">Right content</div>
</div>

Pemeriksaan Singkat

Kapan sebaiknya Anda memilih wadah daripada bagian?

Ringkasan: Bagian vs Wadah

Hal-hal penting tentang bagian vs wadah:

<section>—kelompok tematik yang seharusnya memiliki judul
<div>—wadah netral secara semantik untuk penataan gaya atau skrip
Bagian membuat wilayah bernama yang dapat digunakan untuk navigasi pembaca layar
Tambahkan aria-labelledby untuk menghubungkan bagian dengan judulnya
Saat ragu—gunakan wadah; Anda selalu dapat menyempurnakannya nanti

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Elemen section vs div” gratis?

Ya — teks lengkap “Elemen section vs div” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Elemen section vs div”?

Pahami kapan harus menggunakan section dibandingkan div biasa. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Elemen section vs div” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke HTML Academy