0Pricing
HTML Academy · Pelajaran

figure dan figcaption Ditinjau Kembali

Terapkan figure bukan hanya pada gambar, tetapi juga pada kode, diagram, dan kutipan.

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

Figur, Bukan Hanya Gambar

Elemen <figure> bukan hanya untuk gambar—elemen ini menandai konten mandiri apa pun yang dirujuk dari teks utama:

  • Contoh kode
  • Persamaan matematika
  • Bagan dan diagram
  • Kutipan
  • Audio dan video dengan keterangan

Daftar Kode dalam Figur

Beri label pada contoh kode sebagai figur:

<figure id="code-1">
  <figcaption>Listing 1: A simple JavaScript greeting function.</figcaption>
  <pre><code>function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet('World'));</code></pre>
</figure>

<p>As shown in <a href="#code-1">Listing 1</a>, the function...</p>

Audio dalam Figur

Audio dengan keterangan deskriptif:

<figure>
  <audio controls src="podcast-episode-42.mp3">
    Your browser does not support audio.
  </audio>
  <figcaption>Episode 42: HTML5 Deep Dive — 48 minutes.</figcaption>
</figure>

Video dalam Figur

Video dengan keterangan yang menjelaskan isinya:

<figure>
  <video controls width="800" height="450">
    <source src="tutorial.mp4" type="video/mp4">
    <source src="tutorial.webm" type="video/webm">
  </video>
  <figcaption>Tutorial: Building a responsive navigation menu in 10 minutes.</figcaption>
</figure>

Bagan dalam Figur

Gambar bagan dengan sumber data sebagai keterangan:

<figure>
  <img
    src="revenue-chart.png"
    alt="Line chart showing revenue growth from $2M in 2020 to $8M in 2024"
    width="800"
    height="400"
  >
  <figcaption>
    Figure 3: Annual revenue growth 2020-2024.
    Source: Finance Department Annual Report.
  </figcaption>
</figure>

Diagram SVG dalam Figur

Diagram SVG dengan keterangan:

<figure>
  <svg role="img" aria-labelledby="diagram-title" width="400" height="300">
    <title id="diagram-title">Three-tier architecture diagram</title>
    <!-- SVG content -->
  </svg>
  <figcaption>Figure 4: Client-server-database three-tier architecture.</figcaption>
</figure>

Kutipan dalam Figur

Kutipan panjang sebagai figur:

<figure>
  <blockquote cite="https://www.w3.org/TR/html52/">
    <p>The main element represents the main content of the body of a document
       or application.</p>
  </blockquote>
  <figcaption>— W3C HTML5.2 Specification</figcaption>
</figure>

Teks Alternatif vs Keterangan Figur, Ditinjau Kembali

Memperjelas perbedaannya sekali lagi:

  • teks alternatif—tidak terlihat; menggantikan gambar untuk pembaca layar; menjelaskan apa yang ditampilkan gambar
  • keterangan figur—terlihat; memberikan konteks, atribusi, atau penomoran; menjelaskan makna figur
<figure>
  <img src="volcano.jpg" alt="Ash plume rising 2km above Mount St. Helens">
  <figcaption>Figure 7: The 1980 eruption. Source: USGS.</figcaption>
</figure>

Penempatan Keterangan Figur

Keterangan figur dapat menjadi anak pertama atau terakhir dari figur:

<!-- Caption above the content (common for code listings) -->
<figure>
  <figcaption>Listing 1: Hello World</figcaption>
  <pre>...</pre>
</figure>

<!-- Caption below the content (common for images) -->
<figure>
  <img src="photo.jpg" alt="...">
  <figcaption>Caption below the image</figcaption>
</figure>

Penomoran Figur dengan Penghitung CSS

Nomori figur secara otomatis dengan penghitung CSS:

/* In CSS: */
main {
  counter-reset: figure-counter;
}
figure {
  counter-increment: figure-counter;
}
figcaption::before {
  content: 'Figure ' counter(figure-counter) ': ';
  font-weight: bold;
}

Kapan Tidak Menggunakan Figur

Jangan membungkus setiap gambar dengan figur:

  • Gambar dekoratif (alt kosong) → cukup gunakan <img alt="">
  • Gambar yang hanya digunakan untuk tampilan → gunakan background-image CSS
  • Foto profil dalam daftar pengguna → cukup gunakan <img>
  • Logo di bagian kepala → cukup gunakan <img>

Pemeriksaan Singkat

Anak figur mana yang menyediakan keterangan terlihat yang ditampilkan kepada semua pengguna?

Ringkasan: Figur Ditinjau Kembali

Hal-hal penting tentang figur, ditinjau kembali:

  • <figure>—konten mandiri yang dirujuk (gambar, kode, bagan, audio, kutipan)
  • <figcaption>—keterangan terlihat, sebagai anak pertama atau terakhir
  • Teks alternatif = deskripsi tak terlihat; keterangan figur = konteks yang terlihat
  • Nomori secara otomatis dengan penghitung CSS
  • Tidak setiap gambar memerlukan figur

Pertanyaan yang Sering Diajukan

Apakah pelajaran “figure dan figcaption Ditinjau Kembali” gratis?

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

Terapkan figure bukan hanya pada gambar, tetapi juga pada kode, diagram, dan kutipan. 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 2 dari 4.

Berapa lama pelajaran “figure dan figcaption Ditinjau Kembali” 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. aside untuk Konten Pelengkap
  2. figure dan figcaption Ditinjau Kembali
  3. details dan summary untuk Widget Pengungkapan
  4. Elemen progress dan meter
← Kembali ke HTML Academy