Memanfaatkan Elemen

dan

Sebelum HTML5, pengembang sering kali mengandalkan elemen <div> atau <p> untuk membungkus gambar dan keterangannya. Pendekatan ini secara visual mungkin berfungsi, tetapi dari sudut pandang semantik, hal itu lemah. Mesin pencari dan teknologi pembaca layar (screen readers) tidak memiliki cara yang jelas untuk mengetahui bahwa teks di bawah gambar tersebut sebenarnya adalah keterangan dari gambar itu.

Elemen <figure> secara inheren menandakan konten yang mandiri—yaitu, konten yang memiliki makna sendiri dan, jika dipindahkan ke lokasi lain dalam dokumen, tidak akan mengganggu alur utama teks. Konten mandiri ini bisa berupa gambar, kode, video, kutipan, atau bahkan grup gambar.

Elemen <figcaption> adalah anak opsional dari <figure> yang menyediakan keterangan, deskripsi, atau legenda untuk konten di dalamnya. Ini adalah label semantik yang secara eksplisit menghubungkan teks deskriptif dengan konten visual (atau lainnya) yang dibungkus oleh <figure>.

Keuntungan Struktural dan Aksesibilitas

Penggunaan <figure> dan <figcaption> menawarkan manfaat signifikan di luar sekadar kebersihan kode:

1. Peningkatan Aksesibilitas (Accessibility)

Bagi pengguna yang mengandalkan teknologi pembaca layar, elemen <figcaption> memastikan bahwa keterangan gambar dibaca dengan cara yang jelas dan terstruktur, memberitahu pengguna bahwa teks tersebut secara langsung berkaitan dengan gambar di dalam <figure>. Ini jauh lebih baik daripada membaca paragraf yang tampaknya tidak berhubungan setelah sebuah gambar.

2. Struktur Dokumen yang Lebih Baik

Mesin pencari, alat pengindeksan, dan kerangka kerja penguraian (parsing frameworks) dapat memahami hubungan antara gambar dan keterangannya. Ini membantu dalam memahami konteks konten visual Anda, yang berpotensi meningkatkan relevansi dalam hasil pencarian.

3. Fleksibilitas Penempatan

Karena <figure> bersifat mandiri, browser atau sistem manajemen konten (CMS) memiliki fleksibilitas lebih besar dalam menata letaknya, misalnya dalam tata letak multi-kolom atau responsif. Elemen ini dapat dipindahkan ke margin, ke bagian atas atau bawah artikel, atau ke kolom samping tanpa kehilangan maknanya, karena keterangannya akan selalu tetap bersamanya.

Sintaksis Dasar dan Penggunaan Praktis

Struktur dasar dari elemen ini sangat sederhana:

<figure>
  <img src="diagram-proses.png" alt="Diagram Alur Proses Bisnis" width="600" height="400">
  <figcaption>
    Gambar 1: Alur Kerja Pengiriman Data dalam Tiga Tahap Utama.
  </figcaption>
</figure>

Penggunaan dengan Gambar

Contoh di atas adalah penggunaan yang paling umum. Penting untuk dicatat bahwa atribut alt pada tag <img> tetap wajib. alt memberikan deskripsi singkat gambar untuk dibaca oleh mesin dan pembaca layar ketika gambar tidak dapat dimuat atau bagi pengguna tunanetra, sementara <figcaption> memberikan konteks atau keterangan yang lebih panjang yang terlihat oleh semua pengguna.

Mengelompokkan Beberapa Gambar

<figure> juga dapat digunakan untuk mengelompokkan beberapa item yang saling berhubungan. Ini sangat berguna untuk galeri kecil atau serangkaian foto yang terkait dengan satu keterangan.

<figure>
  <img src="foto-a.jpg" alt="Pemandangan kota di pagi hari">
  <img src="foto-b.jpg" alt="Pemandangan pedesaan">
  <figcaption>
    Dua ilustrasi yang menunjukkan kontras antara kehidupan perkotaan dan pedesaan.
  </figcaption>
</figure>

Menggunakan <figure> untuk Kode

Selain gambar, blok kode yang panjang sering kali disajikan sebagai konten mandiri. Menggunakan <figure> memberikan cara yang semantik untuk melampirkan judul atau deskripsi singkat pada blok kode tersebut.

<figure>
  <figcaption>
    Listing 1. Snippet JavaScript untuk Perulangan Dasar.
  </figcaption>
  <pre>
    <code>
      for (let i = 0; i < 10; i++) {
          console.log(i);
      }
    </code>
  </pre>
</figure>

Di sini, elemen <pre> dan <code> digunakan untuk memformat kode, dan <figcaption> memberikan judul untuk referensi.

Gaya (Styling) dengan CSS

Karena <figure> adalah elemen blok, kita dapat dengan mudah menatanya menggunakan CSS. Ini sering kali melibatkan penataan batas, margin, dan lebar untuk membedakannya dari konten teks utama.

figure {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 20px 0;
  background-color: #f9f9f9;
  text-align: center; /* Untuk menengahkan gambar dan keterangan */
}

figcaption {
  font-style: italic;
  padding-top: 5px;
  font-size: 0.9em;
  color: #555;
}

Penggunaan penataan ini memungkinkan Anda membuat visual konten Anda menonjol dan lebih terpisah dari paragraf utama artikel, memperkuat sifatnya yang “mandiri.”

Kesimpulan

Elemen <figure> dan <figcaption> adalah contoh utama dari kekuatan HTML semantik. Daripada hanya menggunakan tag yang bersifat presentasional, elemen ini memberikan makna struktural dan kontekstual yang jelas. Dengan secara eksplisit mengelompokkan gambar, diagram, atau kode dengan deskripsinya, kita tidak hanya membuat kode kita lebih bersih tetapi juga secara signifikan meningkatkan aksesibilitas dan keterbacaan dokumen kita oleh mesin dan manusia.

Mengadopsi praktik ini adalah langkah kecil namun penting menuju pembuatan web yang lebih terstruktur, inklusif, dan efisien. Selalu ingat: kode yang baik tidak hanya berfungsi, tetapi juga bermakna.

Baca juga : Mengatur Tipografi Global dengan CSS @font-face dan Google Fonts