Karakter Khusus HTML

Tanda lebih kecil dan ampersand adalah komponen utama sintaks HTML: keduanya membuka tag maupun character reference. Ketika karakter tersebut ingin ditampilkan sebagai teks biasa, menuliskannya mentah-mentah membuat parser membacanya sebagai markup. Solusi resminya adalah character reference, kode pendek yang diawali ampersand dan diakhiri titik koma. Pada Chapter ini kita mengenal entitas bernama dan numerik, simbol copyright, non-breaking space, hingga aturan ampersand pada URL.

Masalahnya: Karakter yang Terpakai Sintaks #

Bila Siti menampilkan tulisan “Sintaks paragraf: teks” apa adanya, browser justru membentuk elemen p sungguhan dan tulisannya tidak muncul. Parser memperlakukan < yang diikuti huruf sebagai awal tag, sedangkan & sebagai awal character reference. Karena itu karakter <, >, dan & membutuhkan cara penulisan khusus.

Syntax Character Reference: Bernama dan Numerik #

Character reference selalu diawali & dan diakhiri ;. Menurut standar ada tiga bentuk: entitas bernama yang memakai nama seperti ©, entitas numerik desimal seperti ©, dan entitas numerik heksadesimal seperti ©. Ketiganya menghasilkan karakter yang sama persis; entitas bernama paling mudah dibaca, sedangkan bentuk numerik berguna saat kita mengetahui code point karakternya.

<p>&copy; 2025 Warung Siti</p>
<p>&#169; 2025 Warung Siti</p>

Kedua baris di atas menampilkan hasil yang identik: simbol © diikuti tahun.

Tabel Entitas yang Paling Sering Dipakai #

Dua entitas yang paling sering wajib ditulis adalah < dan &: yang pertama mencegah < dibaca sebagai awal tag, yang kedua mencegah & dibaca sebagai awal entitas. Sementara itu, " dan ' tidak wajib di teks biasa; keduanya berguna saat kutipan muncul dalam nilai atribut yang memakai kutip jenis sama.

Non-Breaking Space:   #

Entitas   menampilkan spasi non-breaking (U+00A0): browser memperlakukannya seperti huruf, bukan titik potong baris. Karakter ini menyatukan pasangan yang tidak boleh terpisah baris, misalnya angka dan satuannya: 10 km atau No. 10. Saat jendela menyempit, pasangan tersebut pindah baris bersama-sama.

<p>Warung Siti berjarak 10&nbsp;km dari alun-alun.</p>

Ampersand dalam Nilai Atribut URL #

URL dengan query string memakai & sebagai pemisah parameter, misalnya www.example.com/cari?kata=soto&halaman=2. Ketika URL seperti itu ditulis sebagai nilai atribut href pada elemen a (dibahas pada section Links dan Navigasi), ampersand sebaiknya ditulis &. Alasannya teknis: standar melarang nilai atribut memuat ambiguous ampersand, yaitu ampersand yang diikuti rangkaian pembentuk entitas; validator dapat menandai galat pada nilai yang tidak ditulis ulang.

<a href="www.example.com/cari?kata=soto&amp;halaman=2">Cari soto</a>

Contoh Lengkap dalam Satu File #

File berikut memamerkan karakter khusus yang paling sering dipakai dalam satu halaman latihan. Simpan sebagai karakter-khusus.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>Karakter Khusus HTML</title>
</head>
<body>
  <h1>Catatan pelajaran Siti</h1>
  <p>Sintaks paragraf: &lt;p&gt;teks&lt;/p&gt;</p>
  <p>Tulis <code>a &amp; b</code> dengan hati-hati.</p>
  <p>Warung Siti &copy; 2025 &mdash; Jl. Melati No.&nbsp;10.</p>
  <p>Bentuk numerik: &#169; dan &#xA9; menampilkan simbol yang sama.</p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Teks "Sintaks paragraf: <p>teks</p>" muncul sebagai teks biasa
  - Baris "Tulis a & b dengan hati-hati."
  - Baris "Warung Siti © 2025 — Jl. Melati No. 10."
  - Baris "Bentuk numerik: © dan © menampilkan simbol yang sama."

Mari kita telaah penulisan karakter khususnya:

1. Baris 10 (<p>teks</p>): tanda kurung sudut tampil sebagai teks alih-alih dibentuk menjadi elemen.
2. Baris 11 (a & b): ampersand tampil apa adanya tanpa dibaca sebagai awal entitas.
3. Baris 12 (©, —,  ): simbol copyright, em dash, lalu spasi non-breaking menyatukan “No.” dengan “10”.
4. Baris 13 (© dan ©): bentuk numerik desimal dan heksadesimal menampilkan simbol yang sama dengan ©.

Dengan character reference, teks apa pun kini dapat tampil tanpa menabrak sintaks HTML. Section Elemen dan Atribut resmi selesai: kita telah menguasai elemen, atribut, global attributes, nesting, void elements, dan karakter khusus. Section berikutnya, Teks dan Formatting, memperdalam elemen penata teks sehari-hari seperti heading, paragraf, dan penekanan kata.

Referensi resmi untuk pendalaman:

• WHATWG — Named character references
• WHATWG — HTML Living Standard: Character references
• MDN Web Docs — Entity (glosarium)

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Karakter Khusus HTML</title>
</head>
<body>
  <h1>Catatan pelajaran Siti</h1>
  <p>Sintaks paragraf: &lt;p&gt;teks&lt;/p&gt;</p>
  <p>Tulis <code>a &amp; b</code> dengan hati-hati.</p>
  <p>Warung Siti &copy; 2025 &mdash; Jl. Melati No.&nbsp;10.</p>
  <p>Bentuk numerik: &#169; dan &#xA9; menampilkan simbol yang sama.</p>
</body>
</html>