Sebelumnya kita sudah membahas tag HTML untuk penulisan hal teknis. Sekarang, kita akan bahas cara penggunaan karakter khusus dalam HTML. Silakan simak sampai akhir panduan AneIqbal berikut.
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?
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 < dan ini tanda tutup kurung siku >
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.
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: © adalah salah satu karakter khusus.</p>
</body>
</html>
Seperti ini hasilnya.
Informasi tambahan, karakter khusus ‘non-breaking space’
Karakter ‘non-breaking space’ ditulis sebagai yang berfungsi untuk menggandeng kata-kata yang seharusnya tidak terpisah namun terlihat terpisah.
Misalnya, ada 2 kata seperti yang ditulis seperti ini: Ane Iqbal.
Hasil yang tampil di web browser adalah Ane Iqbal. Tanda 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 ini pada ukuran web browser yang sama.
Seperti itulah cara memasukkan dan menampilkan karakter khusus ke dalam HTML. Selanjutnya, kita akan bahas tag abbr HTML dan cite, dfn, serta tag small.
