0Pricing
HTML Academy · Pelajaran

figure dan figcaption

Bungkus gambar dalam kontainer figure semantik dengan keterangan.

figure dan figcaption adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.

Apa Itu figure?

Elemen <figure> menandai konten mandiri yang dirujuk dari teks utama:

  • Gambar with keterangan
  • Daftar kode
  • Diagram, bagan, dan ilustrasi
  • Kutipan

Karakteristik utamanya: jika dihapus dari alur utama, teks di sekitarnya tetap masuk akal.

figure with figcaption

<figcaption> memberikan keterangan untuk figure:

<figure>
  <img src="chart.png" alt="Bar chart showing Q1-Q4 revenue">
  <figcaption>Figure 1: Quarterly revenue growth, 2024.</figcaption>
</figure>
<!-- figcaption can be first or last child of figure -->
<!-- It is visible text that supplements the alt text -->

Posisi figcaption

<figcaption> dapat ditempatkan sebelum atau sesudah konten utama:

<figure>
  <figcaption>Listing 1: Hello World in HTML</figcaption>
  <pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;body&gt;Hello, World!&lt;/body&gt;
&lt;/html&gt;</code></pre>
</figure>

Aksesibilitas: alt vs figcaption

Pahami perbedaannya:

  • alt — menjelaskan isi gambar untuk pembaca layar dan gambar yang gagal dimuat
  • figcaption — keterangan yang terlihat, yang memberikan konteks, sumber, atau penjelasan

Keduanya memiliki tujuan berbeda dan tidak seharusnya saling menduplikasi.

<figure>
  <img src="chart.png" alt="Line chart showing 45% growth from January to December">
  <figcaption>Source: 2024 Annual Report, Finance Department.</figcaption>
</figure>

Daftar Kode dalam figure

Gunakan <figure> untuk contoh kode berlabel:

<figure>
  <pre><code>function greet(name) {
  return `Hello, ${name}!`;
}</code></pre>
  <figcaption>Example 1: A simple greeting function in JavaScript.</figcaption>
</figure>

Kutipan dalam figure

<figure> sangat cocok digunakan with <blockquote>:

<figure>
  <blockquote>
    <p>The web is for everyone.</p>
  </blockquote>
  <figcaption>— Tim Berners-Lee, inventor of the World Wide Web</figcaption>
</figure>

Beberapa Gambar dalam figure

Sebuah figure dapat berisi beberapa gambar yang saling berkaitan:

<figure>
  <img src="before.jpg" alt="Garden before renovation">
  <img src="after.jpg" alt="Garden after renovation">
  <figcaption>Before and after the 2024 renovation project.</figcaption>
</figure>

figure vs div

Kapan menggunakan <figure> dibandingkan <div>:

  • Gunakan <figure> jika konten dapat dipindahkan ke lampiran
  • Gunakan <figure> jika Anda memerlukan keterangan yang terlihat
  • Gunakan <div> untuk wadah tata letak atau kelompok gambar yang tidak mandiri

Menautkan figure dalam Teks

Rujuk figure dari teks utama:

<p>The growth trend is illustrated in <a href="#fig1">Figure 1</a>.</p>

<figure id="fig1">
  <img src="growth.png" alt="Revenue growth chart 2020-2024">
  <figcaption>Figure 1: Annual revenue growth 2020-2024.</figcaption>
</figure>

figure Tidak Wajib untuk Gambar

Anda tidak perlu membungkus setiap gambar dengan <figure>:

<!-- Decorative or simple content image: just img -->
<img src="avatar.jpg" alt="Profile photo of Jane Doe" class="avatar">

<!-- Image with a caption OR self-contained reference: use figure -->
<figure>
  <img src="diagram.svg" alt="System architecture diagram">
  <figcaption>Figure 3: The three-tier architecture.</figcaption>
</figure>

Menata figure dan figcaption

CSS umum untuk figure:

figure {
  margin: 2rem auto;
  max-width: 100%;
  text-align: center;
}

figcaption {
  font-size: 0.875rem;
  color: #666;
  margin-top: 0.5rem;
  font-style: italic;
}

Pemeriksaan Singkat

Apa perbedaan utama antara teks alt dan figcaption?

Ringkasan: figure dan figcaption

Hal-hal penting tentang figure:

  • <figure> — konten mandiri yang dirujuk dari teks utama
  • <figcaption> — keterangan yang terlihat, sebagai anak pertama atau terakhir dari figure
  • alt — deskripsi yang tidak terlihat untuk pembaca layar
  • figcaption — konteks yang terlihat untuk semua pengguna
  • Dapat digunakan untuk gambar, kode, kutipan, dan bagan

Pertanyaan yang Sering Diajukan

Apakah pelajaran “figure dan figcaption” gratis?

Ya — teks lengkap “figure dan figcaption” 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 “figure dan figcaption”?

Bungkus gambar dalam kontainer figure semantik dengan keterangan. 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 4 dari 4.

Berapa lama pelajaran “figure dan figcaption” 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

  1. Elemen img src alt width height
  2. Gambar Responsif dengan srcset dan sizes
  3. Elemen picture untuk Art Direction
  4. figure dan figcaption
← Kembali ke HTML Academy