Emphasis dan Importance

Dua kata dalam satu kalimat bisa terlihat mirip di layar, padahal maknanya berbeda bagi browser dan pembaca layar. HTML menyediakan lima elemen teks yang paling sering tertukar untuk keperluan ini: em, strong, i, b, dan mark. Pasangan em/i bahkan sama-sama tampil miring secara bawaan, dan pasangan strong/b sama-sama tebal, sehingga pemilihan yang tepat harus bertolak dari makna, bukan tampilan. Pada Chapter ini kita membedah makna masing-masing elemen lalu menyusun satu paragraf yang memakai semuanya dengan tepat.

em dan strong: Penekanan serta Kepentingan #

Elemen em (emphasis) menandai penekanan intonasi (stress emphasis): kata yang akan dibaca dengan nada lebih kuat. Penempatan em mengubah maksud kalimat. Kalimat “Siti suka kopi Gayo” berarti lain ketika penekanannya jatuh pada “Siti” (bukan orang lain) dibanding pada “Gayo” (bukan kopi lain). Elemen em boleh bersarang; penekanan bertingkat menandai nada yang makin kuat.

Elemen strong menandai kepentingan (importance), kesungguhan, atau urgensinya sebuah bagian teks. Kata peringatan, batas waktu, dan syarat kritis adalah tempat alami bagi strong. Sama seperti em, elemen ini boleh bersarang untuk menaikkan derajat kepentingannya.

i dan b: Tanpa Makna Ekstra #

Elemen i menandai teks yang menyimpang dari prosa normal tanpa penekanan intonasi: istilah asing, istilah teknis, nama kapal, atau pikiran batin. Elemen b menarik perhatian (bring attention) tanpa memberi kepentingan ekstra, misalnya kata kunci pada ringkasan atau nama produk. Keduanya murni penanda tampilan bawaan: i miring, b tebal.

Perbandingan kelima elemen dapat kita rangkum dalam satu tabel:

mark: Sorotan yang Relevan #

Elemen mark menandai teks yang disorot (highlighted) karena relevan dengan konteks saat ini. Contoh paling akrab adalah hasil pencarian: kata yang dicari diberi latar kuning di dalam teks yang ditemukan. Sorotan semacam ini berbeda dari strong, karena teks yang disorot belum tentu penting; teks itu hanya relevan bagi pembaca pada momen tersebut.

Pemilihan elemen menjadi mudah bila kita membiasakan diri dengan empat pertanyaan berikut:

• Apakah intonasi kalimat berubah? Gunakan em.
• Apakah bagian ini penting atau mendesak? Gunakan strong.
• Apakah teksnya menyimpang dari prosa, misalnya istilah asing? Gunakan i.
• Apakah teksnya perlu ditonjolkan tanpa makna ekstra? Gunakan b.

Contoh Paragraf Lengkap #

File berikut memakai kelima elemen pada ulasan kopi. Simpan sebagai contoh-emphasis.html, lalu buka di browser:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ulasan Kopi Warung Siti</title>
</head>
<body>
  <h1>Ulasan Kopi Warung Siti</h1>

  <p>Siti mencatat bahwa kopi <em>Gayo</em> terasa <strong>paling pekat</strong> pada pagi hari.</p>

  <p>Menu andalan berikutnya adalah <i>espresso</i> dan <i>caffe latte</i>.</p>

  <p>Siti menandai tulisan <mark>diskon 30 persen</mark> agar pengunjung menemukan promosi dengan cepat.</p>

  <p>Catatan stok: <b>kopi Toraja</b> berjumlah lima kilogram minggu ini.</p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - "Gayo" miring dan "paling pekat" tebal pada paragraf pertama
  - "espresso" dan "caffe latte" miring pada paragraf kedua
  - "diskon 30 persen" berlatar kuning pada paragraf ketiga
  - "kopi Toraja" tebal pada paragraf keempat

Mari kita telaah alasan pemilihan setiap elemen:

1. Baris 9 (em dan strong): “Gayo” membawa penekanan intonasi, sedangkan “paling pekat” membawa kepentingan; dua makna berbeda dalam satu kalimat.
2. Baris 11 (i): “espresso” dan “caffe latte” adalah istilah asing dari bahasa Italia; teksnya menyimpang dari prosa tanpa penekanan.
3. Baris 13 (mark): promosi disorot karena relevan bagi pengunjung yang membaca ulasan pada momen promosi.
4. Baris 15 (b): nama produk ditebalkan untuk menarik perhatian tanpa klaim kepentingan apa pun.

Semua elemen di atas bekerja pada level teks di dalam paragraf. Kebutuhan lain yang muncul dalam prosa adalah mengutip ucapan orang lain, dan perangkatnya kita pelajari pada Chapter Quotation.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen em
• MDN Web Docs — Elemen strong
• MDN Web Docs — Elemen mark
• WHATWG — HTML Living Standard: Text-level semantics

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ulasan Kopi Warung Siti</title>
</head>
<body>
  <h1>Ulasan Kopi Warung Siti</h1>

  <p>Siti mencatat bahwa kopi <em>Gayo</em> terasa <strong>paling pekat</strong> pada pagi hari.</p>

  <p>Menu andalan berikutnya adalah <i>espresso</i> dan <i>caffe latte</i>.</p>

  <p>Siti menandai tulisan <mark>diskon 30 persen</mark> agar pengunjung menemukan promosi dengan cepat.</p>

  <p>Catatan stok: <b>kopi Toraja</b> berjumlah lima kilogram minggu ini.</p>
</body>
</html>