Tutorial Text HTML Part 11: Cara Menampilkan dan Memasukkan Karakter Khusus ke dalam HTML

147

Yodha.web.id – 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 &lt; 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:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML di Yodha.web.id</title>
</head>
 
<body>
<h3>Saya sedang belajar HTML di &copy; Yodha.web.id &#174; &trade;</h3>
<p>Dalam tutorial kali ini, kita akan belajar untuk menampilkan
karakter-karakter khusus seperti &lt;, &#062;, &hellip;</p>
</body>
 
</html>