Semantik di Sekitar Media

Banyak konten halaman berdiri di luar alur teks biasa, misalnya gambar beserta keterangannya, tanggal jadwal, angka pengukuran, dan informasi kontak. Topik ini membahas elemen yang memberi label pada konten semacam itu, yaitu figure dengan figcaption, time, data, dan address. Setiap elemen dipadukan dengan bentuk mesin terbaca, sehingga browser, mesin pencari, dan skrip dapat menafsirkan konten tersebut tanpa menebak dari teksnya.

Memasangkan konten dengan keterangan#

Elemen figure membungkus konten mandiri yang dirujuk sebagai satu unit, sedangkan figcaption memberi keterangan pada unit itu. Keduanya dibuat berpasangan, yaitu figcaption wajib menjadi anak langsung figure, dan posisinya boleh sebagai anak pertama maupun anak terakhir. Keterangan pada figcaption tampil sebagai teks biasa yang mengikuti konten. Hal ini berbeda dengan teks alt pada gambar, yang tidak tampil ketika gambar berhasil dimuat dan memang ditujukan bagi alat bantu.

<figure>
  <img src="grafik-suhu.svg" alt="Grafik suhu ruang server selama 24 jam" width="640" height="360">
  <figcaption>Suhu ruang server 24 jam terakhir, diukur setiap 15 menit.</figcaption>
</figure>

Posisi anak pertama berguna ketika keterangan berfungsi sebagai label, misalnya nomor gambar atau nomor kode pada dokumen teknis. Contoh berikut memakai pola itu untuk daftar kode.

<figure>
  <figcaption>Kode 1: fungsi penghitung kata</figcaption>
  <pre><code>function hitungKata(teks) {
  return teks.split(/\s+/).filter(Boolean).length;
}</code></pre>
</figure>

Satu figure tidak dibatasi satu gambar. Beberapa gambar yang dibaca sebagai satu unit, misalnya serangkaian tangkapan layar langkah pemasangan, dapat ditumpuk di dalam satu figure dengan satu figcaption yang menjelaskan keseluruhan unitnya.

Menandai waktu dengan time#

Elemen time membungkus tanggal, jam, atau durasi, dan atribut datetime menyediakan bentuk mesin terbaca dari isi itu. Tanpa atribut, isi elemen tetap harus berupa teks tanggal atau waktu yang valid. Bentuk yang dikenali meliputi tanggal saja seperti 2026-11-02, tanggal dan jam dengan zona waktu seperti 2026-11-02T08:00:00+07:00, serta durasi seperti PT1H yang berarti satu jam.

<p>Jadwal berikutnya:
<time datetime="2026-11-02T08:00:00+07:00">Senin, 2 November 2026 pukul 08.00</time>.</p>
<p>Durasi pencatatan: <time datetime="PT1H">satu jam</time>.</p>

Nilai mesin terbaca membuat waktu dapat dihitung program. Kode berikut menafsirkan nilai datetime dengan objek Date milik JavaScript, lalu menghitung selisihnya. Skrip JavaScript murni ini dapat dijalankan dengan Node.js.

// menafsirkan nilai datetime yang mesin terbaca
const mulai = new Date("2026-11-02T08:00:00+07:00");
const ukur  = new Date("2026-11-02T10:30:00+07:00");
const selisihMenit = (ukur - mulai) / 60000;

console.log(mulai.toISOString());
console.log(`Selisih: ${selisihMenit} menit`);

2026-11-02T01:00:00.000Z
Selisih: 150 menit

Baris pertama keluaran menunjukkan konversi zona waktu secara otomatis. Jam 08.00 dengan offset +07:00 tersimpan sebagai 01.00 UTC, sehingga perbandingan antarzona menjadi aman. Baris kedua adalah hasil perhitungan selisih, yang tidak mungkin dilakukan bila waktu hanya berupa teks bebas seperti “Senin pagi”.

Angka terbaca mesin dengan data#

Elemen data menghubungkan isi teks dengan bentuk mesin terbaca pada atribut value. Atribut ini wajib ada, dan isinya harus merupakan representasi yang setara dengan isi elemen. Pola pemakaiannya cocok untuk angka pengukuran, kode referensi, dan identitas lain yang ditulis manusia dengan format tertentu tetapi disimpan program dalam bentuk lain.

<ul>
  <li>Suhu pukul 08.00: <data value="24.5">24,5</data> °C</li>
  <li>Suhu pukul 09.00: <data value="25.1">25,1</data> °C</li>
</ul>

Spesifikasi menyarankan pemakaian time bila nilai yang diberi label berhubungan dengan tanggal atau waktu, sehingga data diperuntukkan bagi nilai lainnya.

Informasi kontak dengan address#

Elemen address menandai informasi kontak untuk leluhur terdekatnya, yaitu article atau body. Apabila leluhurnya body, kontak itu berlaku untuk seluruh dokumen, misalnya kontak redaksi pada halaman situs. Isinya lazim berupa tautan mailto: atau alamat surel, dan browser menampilkannya dengan gaya miring secara bawaan.

Satu batasan penting membuat elemen ini sering salah pakai. Elemen address tidak diperuntukkan bagi alamat pos apa pun yang muncul di halaman, misalnya alamat pengiriman pada formulir pesanan. Alamat itu hanya boleh masuk address bila memang merupakan informasi kontak yang relevan, misalnya alamat kantor penerbit di bagian kolofon artikel. Untuk alamat lain, elemen p biasa sudah cukup.

<address>
  Pertanyaan tentang pengukuran ini dikirim ke
  <a href="mailto:[email protected]">[email protected]</a>.
</address>

Berkas utuh dan pembacaan terprogram#

Berkas berikut merangkum keempat elemen pada satu halaman log sensor. Sebuah figure membungkus tabel pembacaan dengan figcaption sebagai anak pertama. Seluruh waktu ditandai time, angka suhu ditandai data, dan kontak ditandai address di dalam footer.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Log Sensor Suhu Ruang Server</title>
  <style>
    body { font-family: sans-serif; margin: 0 auto; max-width: 40rem; padding: 0 1rem; }
    figure { border: 1px solid #bbb; border-radius: 4px; margin: 1rem 0; padding: 0.25rem 0.75rem; }
    figcaption { color: #555555; font-size: 0.9rem; }
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #cccccc; padding: 0.25rem 0.5rem; text-align: left; }
    address { font-style: normal; }
  </style>
</head>
<body>
  <main>
    <h1>Log Sensor Suhu Ruang Server</h1>

    <figure>
      <figcaption>Pembacaan suhu pada
        <time datetime="2026-11-02">Senin, 2 November 2026</time>.
      </figcaption>
      <table>
        <thead>
          <tr><th scope="col">Waktu</th><th scope="col">Suhu</th></tr>
        </thead>
        <tbody>
          <tr>
            <td><time datetime="2026-11-02T08:00:00+07:00">08.00</time></td>
            <td><data value="24.5">24,5</data> °C</td>
          </tr>
          <tr>
            <td><time datetime="2026-11-02T09:00:00+07:00">09.00</time></td>
            <td><data value="25.1">25,1</data> °C</td>
          </tr>
          <tr>
            <td><time datetime="2026-11-02T10:00:00+07:00">10.00</time></td>
            <td><data value="24.8">24,8</data> °C</td>
          </tr>
        </tbody>
      </table>
    </figure>

    <p>Pencatatan berikutnya berlangsung selama
    <time datetime="PT1H">satu jam</time> mulai
    <time datetime="2026-11-02T11:00:00+07:00">pukul 11.00</time>.</p>
  </main>

  <footer>
    <address>
      Pertanyaan tentang log ini dikirim ke
      <a href="mailto:[email protected]">[email protected]</a>.
    </address>
  </footer>
</body>
</html>

Nilai mesin terbaca pada berkas itu dapat dipanen oleh skrip lain, dan itulah dividen praktis dari pelabelan ini. Kode berikut menarik semua atribut datetime dan value dari media.html menggunakan ekspresi reguler, mirip cara alat pengumpul data membaca halaman. Skrip JavaScript murni ini dapat dijalankan dengan Node.js dari folder berkasnya.

// membaca nilai mesin terbaca dari berkas media.html
const fs = require("fs");
const html = fs.readFileSync("media.html", "utf8");

console.log("nilai datetime:");
for (const m of html.matchAll(/<time[^>]*\bdatetime="([^"]+)"/g)) {
  console.log(`  ${m[1]}`);
}

console.log("nilai value:");
for (const m of html.matchAll(/<data[^>]*\bvalue="([^"]+)"/g)) {
  console.log(`  ${m[1]}`);
}

nilai datetime:
  2026-11-02
  2026-11-02T08:00:00+07:00
  2026-11-02T09:00:00+07:00
  2026-11-02T10:00:00+07:00
  PT1H
  2026-11-02T11:00:00+07:00
nilai value:
  24.5
  25.1
  24.8

Keluaran memperlihatkan enam nilai waktu dan tiga nilai suhu yang berhasil diambil tanpa mengurai teks tampilannya. Tabel berisi angka berformat lokal tetap terbaca program, karena program membaca atribut dan bukan isi selnya.

Kesalahan umum#

• time berisi teks bebas tanpa datetime. Penulisan seperti “Senin lusa” tidak dikenali mesin, sedangkan spesifikasi menuntut isi yang valid atau atribut datetime yang menampung bentuk mesinnya. Bila waktunya tidak dapat diformat, gunakan span.
• Atribut value pada data tidak setara dengan isinya. Nilai 24.5 untuk teks 24,5 km tidak konsisten karena satuannya hilang, sehingga program menerima angka yang berbeda makna dari yang tampil.
• address dipakai untuk alamat pos pelanggan. Elemen ini khusus informasi kontak dokumen atau artikel, dan alamat pengiriman biasa cukup ditulis pada p.
• Setiap gambar dibungkus figure. Gambar yang cukup dengan img ber-teks alt tidak perlu pembungkus tambahan, karena figure diperuntukkan bagi unit yang dirujuk bersama keterangannya.

Ringkasan#

• figure membungkus konten mandiri beserta keterangannya, dan figcaption boleh menjadi anak pertama maupun terakhir.
• time memberi bentuk mesin terbaca untuk tanggal, jam, dan durasi melalui atribut datetime.
• data menghubungkan teks tampilan dengan nilai mesin melalui atribut value yang wajib ada.
• address menandai kontak leluhur article atau body terdekat, bukan alamat pos sembarangan.

Referensi#

• Text-level semantics — HTML Living Standard — WHATWG — Spesifikasi elemen time dan data.
• Grouping content — HTML Living Standard — WHATWG — Spesifikasi elemen figure dan figcaption.
• Element: figure — MDN — Dokumentasi elemen figure beserta aturan posisi figcaption.
• Element: time — MDN — Dokumentasi elemen time dan bentuk nilai datetime.