Beranda / Koding

Cara Memasukkan dan Menampilkan Karakter Khusus di HTML

Oleh AneIqbal
Halo gan. Di postingan sebelumnya, kita sudah membahas tag-tag HTML yang digunakan untuk penulisan hal teknis di HTML.

Kita review sedikit. Ada 3 tag yang sudah kita pelajari di postingan sebelumnya, yakni tag <samp>, tag <kbd>, dan tag <var>.

Tag <samp> digunakan untuk menuliskan kode program. Tag <kbd> digunakan untuk menandai teks yang merupakan teks pada keyboard. Sedangkan tag <var>, digunakan untuk menandai teks yang merupakan variabel matematika atau variabel program.

Kali ini, kita akan membahas cara memasukkan dan menampilkan karakter khusus di HTML. Contoh karakter khusus yakni tanda kurung siku, "<" dan ">".

Di HTML tanda tersebut digunakan sebagai tag, artinya setiap kali ada karakter tersebut, akan diterjemahkan oleh web browser sebagai sebuah perintah/tag.

Bagaimana supaya karakter tersebut bisa ditampilkan di web browser?

memasukkan dan menampilkan karakter khusus ke html

Cara memasukkan karakter khusus ke dalam HTML

Supaya karakter khusus tidak terbaca sebagai sebuah perintah/tag, karakter tersebut harus di-'escape' terlebih dahulu. Istilah escape adalah menggantikan karakter khusus dengan angka atau referensi yang merujuk ke karakter khusus tersebut.

Ada 2 cara untuk men-'escape' karakter khusus di HTML, yang pertama dengan menggunakan penomoran angka (numeric entity), dan yang kedua dengan menggunakan singkatan untuk karakter (named entity).

Kedua cara tersebut ditulis dengan karakter '&' di depan penulisan dan ';' di akhir penulisan. Pengganti karakter khusus ini disebut juga sebagai HTML Entity.

Contoh, kita ingin menuliskan karakter "<" dan ">" di dalam konten HTML, maka penulisannya seperti berikut:
Ini tanda buka kurung siku &lt; dan ini tanda tutup kurung siku &gt;

Tabel referensi karakter khusus

Untungnya, ada banyak referensi di internet yang memuat karakter-karakter khusus dalam bentuk tabel lengkap.

Bayangkan kalau seandainya tak ada tabel referensi HTML Entity, waduh, kita harus menghapal satu per satu.

Berikut ini tabel referensi yang diambil dari https://www.w3schools.com/html/html_entities.asp.

memasukkan dan menampilkan karakter khusus di html

Referensi lain yang menampilkan tabel karakter khusus dapat dilihat juga di https://www.webstandards.org/learn/reference/charts/entities/.

Mari kita coba terapkan ke kodingan HTML.
<!DOCTYPE html>
<html>
  <head>
    <title>Memasukkan dan menampilkan karakter khusus di HTML</title>
  </head>
  <body>
    <p>Tanda hak cipta: &copy; adalah salah satu karakter khusus.</p>
  </body>
</html>

Seperti ini hasilnya.

memasukkan dan menampilkan karakter khusus

Informasi tambahan, karakter khusus 'non-breaking space'

Karakter 'non-breaking space' ditulis sebagai &nbsp; yang berfungsi untuk menggandeng kata-kata yang seharusnya tidak terpisah namun terlihat terpisah.

Misalnya, ada 2 kata seperti yang ditulis seperti ini: Ane&nbsp;Iqbal.

Hasil yang tampil di web browser adalah Ane Iqbal. Tanda &nbsp; akan berubah menjadi spasi sehingga kata tersebut terlihat terpisah. Namun, kedua kata tersebut dianggap sebagai satu kesatuan dan tidak akan terpisah walaupun berada di akhir baris atau ukuran web browser diperkecil.

Berikut penampakan fungsi dari karakter khusus &nbsp; ini pada ukuran web browser yang sama.

memasukkan dan menampilkan karakter khusus di html
Menggunakan karakter khusus &nbsp;

memasukkan dan menampilkan karakter khusus di html
Tanpa menggunakan karakter khusus &nbsp;

Seperti itulah cara memasukkan dan menampilkan karakter khusus ke dalam HTML. Selanjutnya, kita akan bahas tag abbr, cite, dfn, dan small untuk struktur teks HTML.