Cara Menampilkan dan Memasukkan Karakter Khusus ke dalam HTML

Selain karakter alfanumerik, kadang kita butuh menulis karakter-karakter khusus ke dalam HTML, misalnya tanda "<". Karakter kurung siku "<" tidak bisa dituliskan begitu saja di dalam HTML, karena karakter kurung siku berfungsi internal dalam HTML sebagai tanda pembuka tag. Di dalam tutorial text HTML kali ini, kita akan mempelajari cara menampilkan dan memasukkan karakter khusus ke dalam HTML.

Cara Memasukkan Karakter Khusus ke dalam HTML

Untuk memasukkan karakter-karakter khusus ke dalam HTML, kita harus men-'escape' karakter tersebut. Istilah escape maksudnya bahwa dari pada menulis sebuah karakter secara langsung, kita bisa menggantinya dengan angka atau referensi yang merujuk kepada karakter tersebut.

Dalam HTML, terdapat 2 cara untuk men-'escape' karakter, yaitu dengan menggunakan penomoran angka (numeric entity), dan menggunakan singkatan untuk karakter (named entity). Kedua cara ini ditulis dengan karakter '&' pada awal penulisan, dan diakhiri dengan karakter ';'.

Sebagai contoh, jika saya ingin menuliskan karakter "<" di dalam konten HTML, maka penulisannya adalah sebagai berikut:

Saya sedang belajar menampilkan karakter &#060; dalam HTML

Cara diatas menggunakan penomoran angka atau numeric entity. Karakter "<" memiliki numeric entity 60, sehingga ditulis menjadi &#060;.

Jika menggunakan singkatan karakter atau named entity, karakter "<"ditulis menjadi < sebagai berikut:

Saya sedang belajar menampilkan karakter &lt; dalam HTML

Tabel Karakter Khusus dalam HTML

Selain karakter "<", HTML menyediakan ratusan karakter khusus yang bisa digunakan. Berikut adalah tabel karakter khusus yang sering digunakan:

Untuk list lengkap karakter-karakter khusus dalam HTML, anda bisa melihatnya di situs Web Standars Project di www.webstandards.org/learn/reference/charts/entities/

Sebagai penutup, berikut adalah contoh kode HTML yang akan menampilkan beberapa karakter khusus dalam HTML:

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Duniailkom</title>
</head>
 
<body>
<h3>Saya sedang belajar HTML di &copy; Duniailkom.com &#174; &trade;</h3>
<p>Dalam tutorial kali ini, kita akan belajar untuk menampilkan
karakter-karakter khusus seperti &lt;, &#062;, &hellip;</p>
</body>
 
</html>

Salah satu karakter penting untuk diketahui adalah karakter 'non-breaking space', yang ditulis sebagai   karakter ini berfungsi untuk memastikan bahwa frase atau kata tidak terpisah.

Jika saya menulis:

Dunia&nbsp;Ilkom

Kata tersebut akan ditampilkan web browser menjadi Dunia Ilkom (karakter   akan ditampilkan sebagai spasi), Namun kedua kata tersebut akan 'dianggap' sebagai satu kesatuan, dan tidak akan terpisah walaupun berada di akhir baris atau ukuran web browser diperkecil.

dira89
27 Oct 14

ok ic.. thx… :D

Iswan Riadi
29 Sep 16

om tanya, cara menampilkan kodenya di browser bijimana? misal ingin menampilkan   bukan sebagai spasi

Andre
30 Sep 16

Karakter khusus "&" bisa diganti dengan name/numeric entity gan, jadi penulisannya seperti ini: &nbsp;

andyka
21 Aug 17

Maaf om,untuk menerapkan tag tag ini di fb gimana om,seperti tilisan tercoret atau tulisan miring dll,itung2 untuk sekedar praktek…
Mohon pencerahannya om

Andre
25 Aug 17

Di FB tidak bisa menggunakan tag HTML, kecuali dulu masa2 di friendster. Facebook menggunakan sistem internal sendiri dengan penggunaan emoji/icon.

andyka
27 Aug 17

Pantesan dicoba g bisa…. heh he
Maklum om nubi… ????

galih
10 Sep 17

Maaf om kalo misalkan tanda numerik atau khusus itu langsung kita ketik emang ga bisa ya om?

Wawan
09 Nov 18

Kan bisa pakai tag <pre> katanya tag itu akan nulis apa adanya termasuk simbolkan?

ucup
05 Jan 19

apakah karakter husus HTML ini harus dihafal semua min?