Tag HTML Semantik untuk Konten: figure, figcaption, blockquote, cite, time, dan mark
Daftar Isi
Setelah memahami article, section, dan aside, langkah berikutnya adalah memberi makna yang lebih tepat pada isi di dalam struktur tersebut. HTML semantik bukan sekadar memilih tag yang menghasilkan tampilan tertentu. Elemen seperti figure, figcaption, blockquote, cite, time, dan mark membawa makna tentang peran konten. figure menandai unit konten mandiri yang dirujuk dari alur utama, figcaption memberi caption pada unit tersebut, sedangkan blockquote menunjukkan bahwa sebuah bagian merupakan kutipan panjang dari sumber lain. Di sisi lain, cite digunakan untuk merepresentasikan judul suatu karya, bukan secara umum untuk membungkus nama orang. time dapat membawa representasi waktu yang dapat dibaca mesin melalui atribut datetime, sementara mark menunjukkan teks yang ditandai karena relevan dalam konteks tertentu. Memahami perbedaan fungsi ini membantu menghasilkan dokumen yang maknanya lebih eksplisit tanpa harus bergantung pada nama class atau bentuk visual CSS.
Tutorial ini menggunakan satu file index.html dan fitur native HTML, sehingga tidak memerlukan framework, package manager, JavaScript, atau server aplikasi. Browser modern cukup untuk praktik, dan file dapat dibuka langsung dari sistem berkas. Contoh akan dibangun bertahap menjadi artikel singkat tentang observasi langit. Fokusnya bukan desain visual, tetapi pemilihan elemen berdasarkan arti konten dan hubungan antarelemen. Anda akan mempraktikkan gambar dengan caption, kutipan beserta sumbernya, tanggal publikasi yang memiliki nilai datetime, serta penandaan bagian teks yang relevan. Contoh kode pada setiap tahap sengaja berukuran kecil agar hubungan semantiknya mudah diperiksa. Untuk verifikasi, Anda dapat membuka halaman di browser dan memeriksa DOM melalui DevTools. Perlu diingat bahwa semantik tidak selalu menyebabkan perubahan visual besar: sebagian elemen memiliki gaya bawaan browser, tetapi arti elemen tidak ditentukan oleh tampilannya. Karena itu, verifikasi utama adalah memastikan elemen dan atribut sesuai dengan arti konten, bukan sekadar memastikan halaman terlihat berbeda.
Landasan Sains dan Prinsip Kerja Metode
HTML menyediakan struktur semantik agar informasi dalam dokumen dapat direpresentasikan menurut perannya. Browser membangun DOM dari markup, dan nama elemen menjadi salah satu sumber makna yang dapat dimanfaatkan browser serta teknologi bantu. Semantik juga membuat kode lebih mudah dipahami manusia karena hubungan konten dapat diketahui tanpa membaca class khusus proyek. Namun, penting untuk tidak menganggap setiap elemen semantik otomatis meningkatkan aksesibilitas atau SEO dengan hasil tertentu. Struktur yang masuk akal tetap harus didukung konten yang jelas, teks alternatif gambar yang tepat ketika diperlukan, hierarki heading yang baik, dan praktik aksesibilitas lainnya. Prinsip pemilihannya sederhana: tanyakan apa arti bagian konten tersebut, bukan bagaimana Anda ingin bagian itu terlihat. Kutipan panjang dari sumber lain cocok untuk blockquote; teks yang hanya ingin dibuat menjorok tidak cocok, karena indentasi adalah urusan CSS. Demikian pula, mark tidak boleh dipilih hanya karena browser biasanya memberi latar berwarna. Jika yang dibutuhkan semata-mata dekorasi, CSS pada elemen yang sesuai merupakan solusi yang lebih tepat.
figure merepresentasikan konten mandiri, biasanya sebagai satu unit yang dirujuk dari alur utama dan dapat dipindahkan tanpa merusak alur dokumen secara fundamental. Gambar adalah penggunaan umum, tetapi figure tidak terbatas pada gambar; diagram, potongan kode, ilustrasi, atau materi sejenis juga dapat menjadi figure ketika relasinya memang sesuai. Caption opsionalnya menggunakan figcaption. Di dalam satu figure, figcaption harus menjadi anak pertama atau anak terakhir. Perbedaan penting lainnya adalah antara caption dan teks alternatif. Atribut alt pada img menyediakan alternatif tekstual bagi gambar sesuai konteks, sedangkan figcaption memberi caption bagi keseluruhan figure. Keduanya dapat muncul bersamaan dan tidak harus mengulang informasi yang sama. Jika caption sudah menyampaikan konteks tertentu, tulis alt secara ringkas berdasarkan informasi visual yang masih diperlukan. Jangan menghapus alt hanya karena figcaption tersedia; setiap img tetap memerlukan keputusan yang tepat mengenai alternatif tekstualnya.
Tiga elemen lainnya mengatasi jenis makna yang berbeda. cite merepresentasikan judul karya kreatif, misalnya buku, artikel, laporan, film, atau karya lain; spesifikasi HTML tidak mendefinisikannya sebagai elemen umum untuk nama penulis. Untuk kutipan, atribusi sumber biasanya ditempatkan di luar blockquote, sedangkan atribut cite pada blockquote dapat membawa URL sumber kutipan. Atribut tersebut tidak menggantikan atribusi yang terlihat oleh pembaca. time merepresentasikan waktu atau tanggal tertentu dan dapat menggunakan datetime dalam format yang dapat dibaca mesin. Ini berguna ketika teks yang dilihat manusia, seperti “24 September 2026”, berbeda dari representasi mesin 2026-09-24. Terakhir, mark menandai rentang teks yang relevan atau penting dalam konteks saat ini, seperti istilah yang cocok dengan pencarian. Untuk penekanan karena pentingnya isi secara intrinsik, strong dapat lebih tepat; untuk stress emphasis, gunakan em. Pemilihan elemen mengikuti makna, bukan warna atau ketebalan huruf.
Formula, Komposisi Bahan, atau Spesifikasi Parameter
Tidak ada “formula” numerik untuk HTML semantik, tetapi terdapat parameter penggunaan yang dapat diperiksa. Tabel berikut merangkum enam elemen utama beserta atribut atau elemen pendukung yang relevan. Empat baris tambahan membedakan konsep yang sering tertukar: teks alternatif, atribut sumber kutipan, penekanan kuat, dan emphasis. Gunakan tabel ini sebagai peta keputusan sebelum menulis markup. Spesifikasi menyatakan kondisi semantik, bukan aturan styling; tampilan bawaan browser dapat berbeda dan dapat diubah dengan CSS tanpa mengubah arti elemen.
| Komponen | Spesifikasi/Rasio | Fungsi Teknis |
|---|---|---|
figure | Elemen mandiri; caption bersifat opsional | Mengelompokkan konten mandiri yang berhubungan dengan alur utama |
figcaption | Anak pertama atau terakhir dari figure | Memberi caption pada keseluruhan figure |
blockquote | Untuk kutipan tingkat blok dari sumber lain | Menyatakan bahwa bagian konten merupakan kutipan |
cite | Berisi judul karya | Merepresentasikan referensi berupa judul karya kreatif |
time | datetime dapat menyimpan representasi mesin | Merepresentasikan tanggal, waktu, atau periode yang sesuai |
mark | Dipakai karena relevansi dalam konteks tertentu | Menandai bagian teks yang relevan terhadap konteks saat ini |
img alt | Nilai disesuaikan dengan fungsi dan konteks gambar | Menyediakan alternatif tekstual gambar |
blockquote cite | Jika digunakan, nilainya berupa URL sumber | Menyediakan metadata alamat sumber kutipan |
strong | Untuk kepentingan, keseriusan, atau urgensi | Memberi strong importance pada isi |
em | Untuk stress emphasis | Mengubah penekanan makna dalam kalimat |
blockquote bukan alat indentasi, mark bukan sekadar highlighter dekoratif, dan cite bukan tag generik untuk nama orang. Selain itu, figcaption tidak otomatis menggantikan kebutuhan untuk menentukan alt yang sesuai pada elemen img.Panduan Langkah Kerja Bertahap
Siapkan Dokumen HTML Mandiri
Buat folder latihan lalu buat file index.html. Karena praktik hanya menggunakan HTML native, tidak ada dependency yang perlu dipasang dan tidak ada perintah build. Dokumen awal memakai article yang sudah familier bagi Anda, sebuah heading, paragraf pengantar, dan time untuk tanggal publikasi. Teks tanggal sengaja ditulis dalam format natural bahasa Indonesia, sementara datetime="2026-09-24" menyimpan representasi tanggal yang tidak ambigu untuk pemrosesan mesin. Atribut lang="id" menyatakan bahasa utama dokumen. Isi file dengan kode lengkap berikut.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Catatan Observasi Langit</title>
</head>
<body>
<article>
<h1>Catatan Observasi Langit</h1>
<p>Dipublikasikan <time datetime="2026-09-24">24 September 2026</time>.</p>
<p>Artikel ini mencatat hasil pengamatan langit malam dari lokasi dengan polusi cahaya rendah.</p>
</article>
</body>
</html>Simpan file lalu buka index.html di browser melalui file manager atau menu Open File. Hasil yang diharapkan adalah heading, tanggal publikasi, dan paragraf artikel. Jangan mengharapkan time selalu terlihat berbeda secara visual karena tujuan utamanya adalah makna. Untuk verifikasi, buka DevTools, gunakan panel Elements atau Inspector, lalu cari elemen time. Pastikan teks yang tampil adalah “24 September 2026” dan nilai atributnya tetap 2026-09-24. Jika tanggal yang ditampilkan membutuhkan jam atau zona waktu, format datetime perlu disesuaikan dengan nilai yang benar; jangan menambahkan bagian waktu yang tidak diketahui hanya agar nilainya tampak lebih lengkap.
Tambahkan Figure dan Caption yang Memiliki Hubungan Jelas
Selanjutnya tambahkan sebuah ilustrasi sebagai unit mandiri. Agar praktik dapat dilakukan tanpa mengunduh gambar eksternal atau bergantung pada jaringan, contoh menggunakan SVG inline di dalam figure. SVG tersebut hanyalah ilustrasi sederhana langit malam, sedangkan figcaption menjelaskan peran ilustrasi dalam artikel. Ganti isi body pada file index.html dengan kode berikut. Contoh ini tetap menggunakan article yang sama dan menempatkan figcaption sebagai anak terakhir figure. Penggunaan SVG di sini juga menghindari masalah path file gambar saat latihan awal.
<body>
<article>
<h1>Catatan Observasi Langit</h1>
<p>Dipublikasikan <time datetime="2026-09-24">24 September 2026</time>.</p>
<p>Artikel ini mencatat hasil pengamatan langit malam dari lokasi dengan polusi cahaya rendah.</p>
<figure>
<svg viewBox="0 0 320 120" width="320" height="120" role="img" aria-label="Ilustrasi bulan sabit dan bintang di langit malam">
<rect width="320" height="120" fill="midnightblue"></rect>
<circle cx="75" cy="55" r="28" fill="white"></circle>
<circle cx="88" cy="47" r="28" fill="midnightblue"></circle>
<circle cx="210" cy="35" r="3" fill="white"></circle>
<circle cx="255" cy="70" r="3" fill="white"></circle>
</svg>
<figcaption>Ilustrasi 1. Kondisi langit yang mendukung pengamatan bulan dan bintang.</figcaption>
</figure>
</article>
</body>Simpan dan muat ulang halaman. Hasil yang diharapkan adalah ilustrasi bulan dan dua bintang, diikuti caption. SVG diberi role="img" dan nama melalui aria-label karena pada contoh ini ia membawa informasi sebagai ilustrasi; ini bukan aturan bahwa setiap SVG harus menggunakan pola yang sama, sebab penanganan aksesibilitas bergantung pada fungsi grafik. Verifikasi struktur di DevTools: figure harus membungkus SVG dan satu figcaption, dan caption harus menjadi anak terakhir. Perhatikan bahwa figure bukan sinonim “gambar dengan border”. Jika materi tidak bersifat unit mandiri yang sesuai untuk figure, jangan menggunakan elemen ini hanya untuk mendapatkan struktur CSS yang nyaman.
Representasikan Kutipan dengan Blockquote dan Atribusi
Sekarang praktikkan perbedaan antara isi kutipan, URL sumber, judul karya, dan nama pembuat. Tambahkan kutipan setelah figure. Karena tutorial sebaiknya tidak mengarang kutipan faktual dari karya nyata, contoh memakai karya fiktif dan domain example.org, yang memang disediakan untuk dokumentasi. Atribut cite pada blockquote menyimpan URL sumber contoh. Atribusi yang terlihat diletakkan setelah blockquote. Judul karya fiktif dibungkus dengan cite, sedangkan nama “Raka Pradana” tetap berupa teks biasa karena cite bukan elemen generik untuk nama seseorang.
<blockquote cite="https://example.org/panduan-observasi">
<p>Pengamatan yang baik dimulai dengan catatan kondisi langit yang konsisten.</p>
</blockquote>
<p>Sumber contoh: Raka Pradana, <cite>Panduan Observasi Langit untuk Pemula</cite>.</p>Sisipkan snippet tersebut tepat setelah penutup figure di index.html, simpan, lalu muat ulang. Ini adalah snippet, bukan dokumen mandiri; ia membutuhkan struktur dokumen yang dibuat pada langkah sebelumnya. Hasil yang diharapkan ialah kutipan yang secara default mungkin tampak menjorok, kemudian atribusi sumber. Tampilan menjorok tersebut bukan alasan semantik untuk memakai blockquote. Verifikasi melalui DevTools bahwa paragraf kutipan benar-benar berada di dalam blockquote, sementara atribusi terlihat berada sesudahnya. Pastikan pula cite hanya membungkus “Panduan Observasi Langit untuk Pemula”, bukan nama penulis. URL example.org di sini merupakan contoh dokumentasi dan tidak dimaksudkan sebagai referensi faktual terhadap karya tersebut. Pada proyek nyata, ganti kutipan, atribusi, dan URL dengan sumber yang benar serta patuhi ketentuan penggunaan materi yang dikutip.
Gunakan Time untuk Tanggal dan Waktu yang Dapat Diproses Mesin
Elemen time menjadi lebih berguna ketika tampilan untuk pembaca tidak sama dengan nilai mesin. Tambahkan paragraf jadwal setelah atribusi kutipan. Kali ini nilai menyertakan tanggal, jam, dan offset zona waktu. Teks “pukul 19.30 WIB” mudah dibaca manusia, sedangkan 2026-09-26T19:30:00+07:00 menyatakan waktu tersebut beserta offset UTC+07:00. Nilai ini cocok untuk waktu 19.30 pada offset tersebut. HTML sendiri tidak melakukan konversi zona waktu atau membuat pengingat kalender hanya karena datetime tersedia; elemen menyediakan semantik dan representasi nilai, sementara perilaku aplikasi memerlukan mekanisme lain jika dibutuhkan.
<p>Observasi berikutnya dijadwalkan pada
<time datetime="2026-09-26T19:30:00+07:00">26 September 2026 pukul 19.30 WIB</time>.
</p>Tempatkan snippet sesudah paragraf atribusi dari langkah sebelumnya. Simpan dan muat ulang index.html. Hasil visual yang diharapkan hanyalah kalimat jadwal biasa; browser tidak diwajibkan memberi ikon kalender atau tampilan khusus. Verifikasi melalui panel Elements bahwa nilai datetime sama persis dengan waktu yang dimaksud. Pemeriksaan hubungan antara teks dan nilai penting: jangan menulis teks 20.30 tetapi mempertahankan nilai mesin 19.30. Untuk tanggal sederhana, pola seperti 2026-09-24 cukup; untuk waktu yang benar-benar diketahui beserta offset, bentuk tanggal dan waktu dapat digunakan seperti contoh. Ketepatan nilai semantik lebih penting daripada memasukkan detail yang sebenarnya tidak diketahui.
Tandai Relevansi Kontekstual dengan Mark
Gunakan mark ketika suatu bagian teks menjadi relevan dalam konteks tertentu. Contoh umum adalah halaman hasil pencarian yang menyorot istilah yang dicari. Dalam artikel latihan, anggap pembaca sedang melihat informasi yang difilter untuk istilah “polusi cahaya”. Tambahkan paragraf berikut setelah jadwal. Frasa yang ditandai memang relevan terhadap konteks pencarian tersebut. Jika Anda hanya ingin membuat kata berwarna kuning demi dekorasi, jangan menggunakan mark; gunakan CSS terhadap elemen atau class yang semantically netral dan sesuai konteks. Demikian pula, jangan mengganti strong dengan mark jika maksud sebenarnya adalah menyatakan kepentingan atau urgensi.
<p>Dalam hasil pencarian untuk “polusi cahaya”, catatan utama menyebut bahwa
<mark>polusi cahaya rendah</mark> membantu objek langit redup terlihat lebih jelas.
</p>Sisipkan snippet ke dalam article, simpan file, kemudian muat ulang browser. Banyak browser memberikan latar penanda pada mark, tetapi warna dan detail presentasinya bukan kontrak semantik HTML dan dapat dipengaruhi stylesheet. Hasil yang harus diverifikasi adalah struktur: hanya frasa relevan yang dibungkus mark. Periksa DOM di DevTools dan pastikan tanda kutip pencarian serta bagian kalimat lainnya berada di luar elemen tersebut. Sebagai tes keputusan semantik, bayangkan konteks pencarian “polusi cahaya” dihilangkan. Jika alasan penandaan juga hilang, mark masuk akal sebagai penanda relevansi kontekstual. Jika frasa tetap perlu ditekankan karena penting secara intrinsik, pertimbangkan elemen yang sesuai dengan makna tersebut alih-alih mempertahankan mark.
Gabungkan dan Audit Dokumen Akhir
Terakhir, gabungkan semua konsep menjadi satu file mandiri. Ganti seluruh isi index.html dengan dokumen berikut agar tidak ada fragmen lama yang terduplikasi. Tidak ada stylesheet yang diperlukan untuk memahami semantiknya, sehingga tampilan berasal dari default browser dan atribut SVG. Dokumen ini juga menunjukkan bahwa keenam elemen dapat hidup bersama di dalam article tanpa JavaScript. Pada proyek nyata, Anda bebas menambahkan CSS selama styling tidak dijadikan pengganti struktur semantik.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>Catatan Observasi Langit</title>
</head>
<body>
<article>
<h1>Catatan Observasi Langit</h1>
<p>Dipublikasikan <time datetime="2026-09-24">24 September 2026</time>.</p>
<p>Artikel ini mencatat hasil pengamatan langit malam dari lokasi dengan polusi cahaya rendah.</p>
<figure>
<svg viewBox="0 0 320 120" width="320" height="120" role="img" aria-label="Ilustrasi bulan sabit dan bintang di langit malam">
<rect width="320" height="120" fill="midnightblue"></rect>
<circle cx="75" cy="55" r="28" fill="white"></circle>
<circle cx="88" cy="47" r="28" fill="midnightblue"></circle>
<circle cx="210" cy="35" r="3" fill="white"></circle>
<circle cx="255" cy="70" r="3" fill="white"></circle>
</svg>
<figcaption>Ilustrasi 1. Kondisi langit yang mendukung pengamatan bulan dan bintang.</figcaption>
</figure>
<blockquote cite="https://example.org/panduan-observasi">
<p>Pengamatan yang baik dimulai dengan catatan kondisi langit yang konsisten.</p>
</blockquote>
<p>Sumber contoh: Raka Pradana, <cite>Panduan Observasi Langit untuk Pemula</cite>.</p>
<p>Observasi berikutnya dijadwalkan pada
<time datetime="2026-09-26T19:30:00+07:00">26 September 2026 pukul 19.30 WIB</time>.
</p>
<p>Dalam hasil pencarian untuk “polusi cahaya”, catatan utama menyebut bahwa
<mark>polusi cahaya rendah</mark> membantu objek langit redup terlihat lebih jelas.
</p>
</article>
</body>
</html>Simpan lalu buka atau muat ulang file. Expected result adalah satu artikel dengan tanggal publikasi, ilustrasi beserta caption, kutipan dan atribusi, jadwal observasi, serta teks bertanda. Verifikasi bukan hanya secara visual: inspeksi DOM dan cari satu figure dengan figcaption, satu blockquote dengan URL pada atribut cite, elemen cite yang hanya memuat judul karya, dua elemen time dengan nilai konsisten terhadap teks, serta satu mark. Karena contoh kutipan dan karyanya fiktif, jangan menafsirkan URL contoh sebagai sumber nyata. Jika semua relasi tersebut benar, latihan telah memenuhi target struktural tanpa bergantung pada efek presentasi browser.
Verifikasi Akhir dan Parameter Kelayakan
Audit semantik sebaiknya dilakukan dengan membaca konten seolah-olah styling tidak tersedia. Untuk setiap elemen, tanyakan apakah maknanya masih tepat setelah warna, margin, dan font dihilangkan. DevTools dapat membantu memeriksa DOM aktual setelah browser mem-parsing file. Tabel berikut membandingkan kondisi markup yang masih generik atau berpotensi ambigu dengan target setelah struktur semantik diterapkan. Target tidak berarti setiap artikel harus memiliki semua elemen ini; gunakan elemen hanya ketika jenis kontennya memang ada.
| Parameter | Sebelum Menerapkan Metode | Sesudah Menerapkan Metode (Target) |
|---|---|---|
| Ilustrasi dan caption | Konten dan keterangannya tidak memiliki hubungan struktural yang eksplisit | figure mengelompokkan konten dan satu figcaption menjadi unit yang tepat |
| Kutipan blok | Kutipan hanya dibedakan lewat teks atau tampilan | Isi kutipan dari sumber lain berada di blockquote |
| Judul karya | Judul sumber ditulis tanpa semantik khusus | Judul karya sumber dibungkus cite, bukan nama penulis |
| Tanggal dan waktu | Tanggal hanya berupa teks manusia | time memiliki datetime yang konsisten dengan nilai yang ditampilkan |
| Relevansi kontekstual | Highlight hanya dibentuk sebagai dekorasi | mark digunakan hanya ketika penandaan bermakna dalam konteks saat ini |
Solusi Masalah di Lapangan (FAQ Teknis)
1. Mengapa figure dan figcaption saya tidak membuat layout terlihat khusus?
Semantik HTML dan presentasi CSS adalah dua lapisan berbeda. Browser mungkin memberi beberapa gaya default, tetapi figure tidak menjanjikan layout galeri, border, posisi gambar, atau tipografi caption tertentu. Penyebab masalah biasanya adalah ekspektasi bahwa tag semantik juga merupakan komponen desain. Pastikan dahulu DOM menunjukkan figcaption sebagai anak pertama atau terakhir dari figure dan bahwa kontennya memang sesuai untuk sebuah figure. Jika struktur sudah benar tetapi desain belum sesuai, tambahkan CSS secara terpisah. Verifikasi semantik melalui Elements/Inspector, kemudian verifikasi presentasi melalui aturan CSS; jangan mengganti elemen yang benar hanya karena default styling tidak sesuai desain.
2. Apakah figcaption dapat menggantikan atribut alt pada img?
Tidak sebagai aturan umum. Keduanya memiliki peran berbeda. figcaption adalah caption untuk keseluruhan figure, sedangkan alt merupakan alternatif tekstual pada elemen img. Nilai alt yang tepat bergantung pada fungsi gambar dan konteksnya; gambar dekoratif memiliki perlakuan berbeda dari gambar informatif. Hindari menyalin caption panjang secara otomatis ke alt, karena hasilnya dapat menjadi redundan. Ketika memakai img, periksa atribut alt secara sengaja dan evaluasi informasi apa yang dibutuhkan ketika gambar tidak tersedia. Verifikasi juga caption dan alternatif gambar sebagai dua keputusan editorial yang berbeda, bukan sebagai dua kolom yang harus selalu berisi kalimat identik.
3. Mengapa nama penulis tidak sebaiknya selalu dibungkus dengan cite?
Dalam HTML, elemen cite merepresentasikan judul karya, bukan mekanisme generik untuk menandai nama orang. Kebingungan sering muncul karena kata “citation” dalam penggunaan sehari-hari dapat mencakup penulis, judul, penerbit, dan informasi lain, sedangkan semantik elemen HTML lebih spesifik. Untuk pola tutorial ini, tulis nama penulis sebagai teks biasa dan bungkus hanya judul karya dengan cite. Jika kutipan memiliki sumber daring, atribut cite pada blockquote dapat berisi URL sumber, tetapi metadata itu tidak menggantikan atribusi yang terlihat bagi pembaca. Periksa DOM dan pastikan batas elemen cite tepat pada judul karya yang ingin direpresentasikan.
4. Kapan saya harus memilih mark, strong, atau em?
Pilih berdasarkan arti. Gunakan mark ketika bagian teks ditandai karena relevansinya terhadap konteks saat ini, misalnya kecocokan istilah pencarian atau bagian dokumen yang sedang dibahas. Gunakan strong ketika konten memiliki kepentingan, keseriusan, atau urgensi yang kuat. Gunakan em untuk stress emphasis yang dapat memengaruhi nuansa kalimat. Warna kuning, huruf tebal, atau huruf miring bukan kriteria pemilihan karena CSS dapat mengubah semua presentasi tersebut. Untuk memverifikasi keputusan, baca kalimat tanpa styling dan jelaskan dengan satu kalimat mengapa rentang itu diberi semantik. Jika alasannya hanya “supaya kelihatan”, kebutuhan Anda kemungkinan bersifat presentasional dan sebaiknya ditangani dengan CSS.
Kesimpulan dan Rencana Aksi
Enam elemen yang dibahas mengisi lapisan semantik di dalam struktur dokumen yang sudah Anda kenal. figure mengelompokkan materi mandiri dan figcaption memberi caption terhadap unit tersebut. blockquote merepresentasikan kutipan blok dari sumber lain, sementara cite cocok untuk judul karya dan tidak seharusnya diperlakukan sebagai tag generik bagi nama penulis. time memungkinkan teks tanggal atau waktu yang nyaman dibaca manusia disertai representasi datetime yang sesuai, sedangkan mark menyatakan relevansi kontekstual alih-alih sekadar efek highlight. Rencana aksi yang praktis adalah menyimpan index.html akhir, menginspeksi DOM, lalu mengambil satu halaman HTML milik Anda sendiri dan mengaudit kontennya. Cari gambar atau ilustrasi yang benar-benar layak menjadi figure, kutipan yang saat ini hanya dibedakan dengan CSS, tanggal yang memiliki nilai terstruktur, judul karya yang membutuhkan cite, dan highlight yang perlu dibedakan antara makna dan dekorasi. Terapkan elemen hanya ketika artinya cocok. Dengan kebiasaan tersebut, semantik menjadi keputusan pemodelan konten yang konsisten, bukan daftar tag yang digunakan sebanyak mungkin.
Ditulis dan diedit oleh Ahmad Ismail Al Malik