Semantik Inline

Elemen semantik inline memberi makna pada kata dan frasa di dalam alur teks, mulai dari penekanan, kepentingan, potongan kode, penanda relevansi, singkatan, sampai pemenggalan baris dan pergantian tema. Topik ini membahas pemilihan elemen berdasarkan maknanya, bukan berdasarkan tampilan bawaan yang diberikan browser. Setelah membacanya, teks yang dianotasi menjadi lebih informatif bagi browser, mesin pencari, dan pembaca layar.

strong dan em untuk penekanan#

Elemen em (emphasis) menyatakan penekanan ucap (stress emphasis) pada sebuah kata, dan penekanan itu dapat mengubah makna kalimat. Kalimat pertama pada contoh berikut menyangkal kemungkinan pengiriman ulang, sedangkan kalimat yang sama tanpa em akan terbaca sebagai pernyataan netral. Elemen strong menyatakan kepentingan, urgensi, atau tingkat bahaya, sehingga cocok untuk peringatan dan bagian yang harus dibaca lebih dulu.

<p>Sistem <em>tidak</em> mengirim ulang data yang sudah terverifikasi.</p>
<p><strong>Peringatan:</strong> berkas yang dihapus dari arsip tidak dapat dikembalikan.</p>

Pasangan yang sering tertukar adalah b (bring attention to) dan i (idiomatic text). Keduanya membedakan sebagian teks tanpa menambah kepentingan atau penekanan, misalnya kata kunci pembuka artikel untuk b dan istilah asing untuk i. Tabel berikut merangkum perbedaan keempatnya.

Gaya cetak tebal atau miring pada contoh-contoh tersebut hanyalah gaya bawaan browser. Apabila suatu halaman perlu menampilkan strong tanpa efek tebal, gayanya diubah melalui CSS, sedangkan maknanya tetap terbaca oleh alat bantu. Pemisahan antara makna dan gaya inilah alasan elemen ini dipilih menurut makna, bukan menurut tampilan yang diinginkan.

code, kbd, dan samp untuk konten teknis#

Elemen code menandai potongan kode, baik nama fungsi sebaris maupun isi berkas program, dan browser menampilkannya dengan huruf monospace secara bawaan. Elemen kbd (keyboard input) menandai masukan papan ketik, sedangkan samp (sample output) menandai keluaran program. Ketiganya sering bekerja berurutan dalam dokumentasi teknis, yaitu pembaca menekan tombol, perintah berjalan, lalu keluaran tampil. Urutan semacam ini membuat dokumentasi teknis dapat dibaca sebagai satu skenario utuh.

<p>Fungsi <code>hitungLuas()</code> menerima satu argumen berupa bilangan.</p>
<p>Simpan berkas dengan <kbd>Ctrl</kbd>+<kbd>S</kbd>, lalu terminal menampilkan <samp>2 berkas tersalin</samp>.</p>

Untuk blok kode yang lebih dari satu baris, code dipadukan dengan pre, yaitu elemen yang mempertahankan spasi dan pemenggalan baris dari sumbernya. Susunannya pre berada di luar dan code berada di dalamnya, sehingga makna kode tetap tersimpan pada elemen yang tepat. Elemen kbd juga boleh ditulis berurutan untuk kombinasi tombol, misalnya tiga kbd berjajar untuk Ctrl+Alt+Delete, sehingga setiap tombol tetap dikenali sebagai satu masukan tersendiri. Ketiga elemen ini hanya menandai peran teks yang dibungkus, sehingga isinya tetap ditulis apa adanya, termasuk spasi dan tanda bacanya.

mark untuk penandaan relevansi#

Elemen mark menandai teks yang relevan dengan konteks pembacaan saat itu, serupa goresan stabilo pada buku. Penggunaan yang khas adalah menyorot potongan kutipan yang sedang dibahas dan menyorot kata yang cocok dengan kata pencarian. Karena sasarannya konteks, satu kutipan yang sama dapat menampilkan sorotan berbeda pada dua halaman yang pembacanya berbeda. mark bukan elemen penekanan, sehingga kalimat yang maknanya berubah menurut kata yang ditonjolkan tetap menjadi ranah em, sedangkan kebutuhan sorotan dekoratif dikerjakan CSS.

<p>Petunjuk instalasi menyebut <mark>versi Node.js 20 atau lebih baru</mark> sebagai syarat.</p>

Perhatikan perbedaan tujuannya dengan strong. Penanda strong pada kalimat yang sama menyatakan bahwa bagian itu penting untuk semua pembaca, sedangkan mark menyatakan bahwa bagian itu relevan bagi pembaca tertentu pada saat tertentu. Pola yang sama diikuti hasil pencarian di dalam situs, yaitu kata yang cocok dengan kata pencarian diberi mark. Sorotan semacam ini dihasilkan saat halaman tampil, sehingga elemen di dalam markup tetap mark. Kutipan yang sama pun dapat tersorot pada bagian yang berbeda di halaman yang pembacanya berbeda.

abbr untuk singkatan#

Elemen abbr menandai singkatan atau akronim, dan atribut title di dalamnya menyimpan bentuk lengkapnya. Browser menampilkan bentuk lengkap itu sebagai tooltip apabila penunjuk tetap berada di atas singkatannya, sedangkan pembaca layar dapat membaca bentuk lengkap itu sesuai pengaturannya. Pola yang lazim adalah menuliskan bentuk lengkap pada penyebutan pertama, lalu menggunakan abbr dengan title pada penyebutan berikutnya. Singkatan yang dilafalkan sebagai satu kata disebut akronim, sedangkan yang dibaca huruf demi huruf disebut inisialisme, dan keduanya sama-sama ditandai abbr. Atribut title pada elemen lain memiliki tujuan yang berbeda, sehingga perluasan singkatan tetap menjadi ranah abbr.

<p>Seluruh halaman ditulis dalam <abbr title="Hypertext Markup Language">HTML</abbr> yang mengikuti Living Standard.</p>

Atribut title bersifat tersembunyi bagi pembacaan cepat, sehingga jangan menjadikannya satu-satunya tempat informasi yang penting. Bentuk lengkap yang memang krusial sebaiknya juga hadir sebagai teks biasa pada penyebutan pertama. Nilai title yang panjang tidak menjadi masalah karena atribut itu hanya tampil saat penunjuk berada di atas singkatannya. Untuk istilah yang didefinisikan secara formal, elemen dfn dapat melengkapi pola ini, tetapi pembahasannya termasuk ranah semantik di sekitar konten dan tidak diperluas di sini.

br dan hr: pemenggalan yang beralasan#

Elemen br memaksakan pemenggalan baris di dalam teks yang mengalir, dan elemen ini kosong, yaitu tanpa isi dan tanpa tag penutup. br hanya tepat apabila pemenggalan baris bagian dari isi, misalnya baris puisi atau baris alamat. Elemen hr (thematic break) menandai pergantian tema di tingkat prosa, misalnya transisi ke pembahasan baru yang tidak diekspresikan lewat judul. Sama seperti br, elemen hr juga kosong sehingga tidak memiliki tag penutup.

<p>Perpustakaan kota dibuka di alamat berikut:<br>
Jalan Kenanga Nomor 5<br>
Yogyakarta</p>
<hr>
<p>Bagian berikutnya membahas prosedur arsip cadangan.</p>

Dua elemen ini paling sering disalahgunakan sebagai alat tata letak. Jarak antarparagraf bukan pekerjaan br, melainkan pekerjaan margin CSS pada elemen p, dan garis pemisah dekoratif bukan pekerjaan hr, melainkan pekerjaan properti border pada elemen yang diinginkan. Bila isi halaman dirombak menjadi beberapa layar, br yang digunakan untuk jarak akan menumpuk di tempat yang tidak terduga, sedangkan markup yang bersih tinggal disesuaikan lewat gayanya.

Menyatukan contoh dalam satu berkas#

Berkas berikut merangkum seluruh elemen topik ini dalam satu dokumen catatan praktik. Setiap paragraf memperlihatkan satu keputusan: em dan strong untuk penekanan dan kepentingan, b dan i untuk pembedaan tanpa makna tambahan, serta code, kbd, dan samp untuk konten teknis. Sorotan relevansi ditandai mark, singkatan ditandai abbr, dan pemenggalan yang beralasan menggunakan br dan hr. Di bagian akhir, small menandai catatan samping berukuran kecil.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contoh semantik inline</title>
</head>
<body>
  <h1>Catatan praktik dokumentasi</h1>

  <h2>Penekanan dan kepentingan</h2>
  <p>Sistem <em>tidak</em> mengirim ulang data yang sudah terverifikasi.</p>
  <p><strong>Peringatan:</strong> berkas yang dihapus dari arsip tidak dapat dikembalikan.</p>
  <p>Bagian pembuka artikel sering menaruh kata kunci dalam <b>cetak tebal</b> tanpa menambah makna.</p>
  <p>Istilah <i>whitespace</i> ditulis miring pada penyebutan pertamanya.</p>

  <h2>Konten teknis</h2>
  <p>Fungsi <code>hitungLuas()</code> menerima satu argumen berupa bilangan.</p>
  <p>Simpan berkas dengan <kbd>Ctrl</kbd>+<kbd>S</kbd>, lalu terminal menampilkan <samp>2 berkas tersalin</samp>.</p>

  <h2>Penanda relevansi</h2>
  <p>Petunjuk instalasi menyebut <mark>versi Node.js 20 atau lebih baru</mark> sebagai syarat.</p>

  <h2>Singkatan</h2>
  <p>Seluruh halaman ditulis dengan <abbr title="Hypertext Markup Language">HTML</abbr> yang mengikuti Living Standard.</p>

  <h2>Pemenggalan dan pergantian tema</h2>
  <p>Surat resmi dikirim ke alamat berikut:<br>
  Jalan Kenanga Nomor 5<br>
  Yogyakarta</p>
  <hr>
  <p>Bagian berikutnya membahas prosedur arsip cadangan.</p>

  <p><small>Catatan kecil ini hanya berlaku untuk arsip internal.</small></p>
</body>
</html>

Buka berkasnya di browser dan arahkan penunjuk ke singkatan HTML untuk melihat tooltip bentuk lengkapnya. Perhatikan pula bahwa tampilan tebal dan miring di halaman itu berasal dari gaya bawaan browser, bukan dari CSS apa pun, sehingga gaya dan makna mudah dibedakan. Salin berkasnya, hapus satu elemen, muat ulang, lalu amati bagian mana yang kehilangan maknanya ketika digantikan teks polos.

Demo berikut menampilkan elemen yang sama dalam paragraf-paragraf pendek berdampingan dengan kodenya. Bandingkan setiap baris kode dengan tampilannya, lalu arahkan penunjuk ke singkatan HTML pada baris terakhir untuk melihat tooltip-nya.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Demo semantik inline</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 16px; color: #1e293b; line-height: 1.6; }
    p { border-bottom: 1px dashed #e2e8f0; padding-bottom: 8px; }
  </style>
</head>
<body>
  <p>Gerbang <strong>utama</strong> ditutup <em>sementara</em> saat latihan.</p>
  <p>Istilah <i>screen reader</i> muncul pada penyebutan pertama.</p>
  <p>Panggil <code>hitungTotal()</code> sebelum menyimpan.</p>
  <p>Tekan <kbd>Esc</kbd> bila <samp>proses dibatalkan</samp> tampil.</p>
  <p>Syaratnya: <mark>Node.js 20 atau lebih baru</mark>.</p>
  <p>Standar ditulis dalam <abbr title="Hypertext Markup Language">HTML</abbr>.</p>
  <p>Alamat perpustakaan:<br>Jalan Kenanga Nomor 5<br>Yogyakarta</p>
</body>
</html>

Kesalahan umum#

Empat kesalahan berikut muncul karena tampilan elemen dianggap sama dengan maknanya. Setiap butir menyertakan penyebab dan perbaikannya.

• Menulis br sebagai pengganti paragraf. Jarak antarbagian lalu bergantung pada jumlah br yang ditebak, dan pembaca layar tidak menemukan batas paragraf apa pun. Gantikan dengan p yang jaraknya diatur CSS.
• Menulis mark untuk dekorasi warna. Sorotan semacam itu tidak menyatakan relevansi apa pun, dan properti background CSS pada span lebih jujur untuk kebutuhan tampilan. Warna sorotan buatan CSS juga dapat disesuaikan dengan tema halaman. Simpan mark untuk bagian yang relevan dengan konteks pembacaan.
• Memilih b atau i padahal yang dimaksud adalah penekanan. Maknanya hilang bagi pembaca layar (screen reader) dan mesin pencari karena keduanya tidak menyatakan apa pun. Gunakan em untuk penekanan ucap dan strong untuk kepentingan.
• Menulis abbr tanpa title. Singkatannya tetap tampil, tetapi bentuk lengkapnya tidak pernah tersedia bagi siapa pun. Isi title pada setiap abbr, atau tuliskan bentuk lengkapnya sebagai teks biasa pada penyebutan pertama.

Ringkasan#

• em menyatakan penekanan ucap dan strong menyatakan kepentingan, sedangkan b dan i hanya membedakan tampilan teks.
• code, kbd, dan samp menandai kode, masukan papan ketik, dan keluaran program.
• mark menandai relevansi bagi konteks pembacaan, dan abbr dengan title menyimpan bentuk lengkap sebuah singkatan.
• br hanya untuk pemenggalan yang bagian dari isi, sedangkan hr menandai pergantian tema, dan keduanya bukan alat jarak.

Referensi#

• Dokumentasi elemen strong — MDN — Perbedaan strong dengan b beserta contohnya.
• Dokumentasi elemen em — MDN — Perbedaan em dengan i beserta catatan penekanan ucap.
• Dokumentasi elemen mark — MDN — Tujuan penandaan relevansi dan contohnya.
• Text-level semantics — HTML Living Standard (WHATWG) — Spesifikasi resmi seluruh elemen semantik sebaris.