Tutorial Text HTML Part 11: 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 &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:

Tabel Karakter Khusus dalam HTMLUntuk 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>

Contoh Penulisan karakter khusus dalam HTML

Salah satu karakter penting untuk diketahui adalah karakter 'non-breaking space', yang ditulis sebagai &nbsp; 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 &nbsp;  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.

10 Comments

  1. dira89
    27 Oct 14
  2. Iswan Riadi
    29 Sep 16
    • Andre
      30 Sep 16
  3. andyka
    21 Aug 17
    • Andre
      25 Aug 17
      • andyka
        27 Aug 17
  4. galih
    10 Sep 17
  5. Wawan
    09 Nov 18
  6. ucup
    05 Jan 19
    • Andre
      05 Jan 19

Add Comment