Semua Ada, Setelah
penulisan Doctype, baris berikutnya dalam halaman HTML digunakan untuk
meta tag. Dalam tutorial belajar HTML5 kali ini kita akan membahas tentang
cara penggunaan meta tag Charset UTF-8 pada HTML5.
Pengertian Meta tag
Meta tag adalah 'data tentang data', dimana tag ini ditujukan bukan
kepada user, tetapi kepada web browser atau kepada 'robot program'
seperti mesin pencari (search engine). Meta tag sudah pernah kita bahas dalam
Tutorial HTML: Pengertian meta tag. Pada tutorial kali ini saya akan membahas
meta tag charset UTF-8 yang sering digunakan dalam halaman HTML5.
Meta tag sepenuhnya bersifat opsional. Halaman HTML yang ditulis tanpa menggunakan
meta tag adalah valid.
Mengenal meta-tag charset UTF-8
Charset
UTF-8 merupakan meta tag yang paling sering digunakan dalam HTML5,
penulisannya adalah sebagai berikut:
<meta charset="UTF-8">
Meta tag diatas memberi instruksi kepada web browser untuk menerjemahkan karakter-karakter
di dalam halaman HTML sebagai UTF-8. Walaupun bersifat opsional, hampir setiap
halaman HTML5 menggunakan meta tag ini. Akan tetapi, apa sebenarnya maksud dari
charset="UTF-8" ini?
Sejarah Charset (Karakter Set) HTML
Instruksi
charset digunakan untuk menerjemahkan bit-bit di dalam halaman HTML
menjadi karakter.
Karakter set paling sederhana dan juga paling awal digunakan adalah karakter
set
ASCII, (dalam HTML ditulis sebagai
charset="us-ascii").
Karakter
set ini terbatas pada huruf latin (a-z, A-Z) dan beberapa karakter lain seperti
angka, spasi, tab, dll dengan total hanya 128 karakter.
Karakter set "us-ascii" kemudian dikembangkan menjadi karakter
ANSI,
atau dikenal juga sebagai
ISO-8859-1 (dalam HTML ditulis sebagai
charset="ISO-8859-1").
Karakter ANSI mendukung 256 karakter, dan umumnya digunakan pada HTML versi 2.0
sampai dengan HTML 4.01.
Pemasalahan pada karakter set
ASCII maupun
ANSI adalah tidak menyertakan karakter
non-latin seperti huruf arab, cina, jepang, dll. Untuk keperluan ini dikembangkan
berbagai karakter set untuk masing-masing bahasa, seperti
big5 untuk karakter
cina,
x-euc-jp untuk karakter jepang,
iso-8859-7 untuk karakter yunani dll.
Sehingga untuk setiap web, penulisan karakter set akan berbeda-beda tergantung
bahasa apa yang digunakan untuk menulis halaman HTML. Tentunya akan lebih praktis
jika seluruh karakter ini disatukan kedalam sebuah karakter set.
Pada awal perkembangan XHTML, diperkenalkan karakter set
UTF-8 (Unicode Transformation
Format-8) yang mendukung hampir seluruh karakter yang ada di dunia. Dalam perkembangan
selanjutnya, HTML5 juga menggunakan
UTF-8 sebagai charset standar. Dengan menggunakan
UTF-8, kita tidak perlu khawatir mengenai karakter atau bahasa apa yang akan
digunakan.
UTF-8 mendukung hingga lebih dari 10.000 karakter.
Cara Penulisan meta tag Charset UTF-8
Dalam HTML 4.01 maupun XHTML, penulisan karakter set lebih panjang, seperti
contoh berikut:
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
Dalam HTML5, penulisannya disederhanakan menjadi:
<meta charset="UTF-8">
Meta tag charset ini ditempatkan pada bagian <head> sebelum tag <title>,
seperti contoh berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar HTML5</title>
</head>
<body>
<h1>HTML5</h1>
<p>Belajar HTML5 di duniailkom</p>
</body>
</html>
Pentingnya Menggunakan Charset
Walaupun sepenuhnya opsional, penulisan meta tag charset sangat dianjurkan. Jika
kita tidak menuliskan charset, web browser akan mencoba 'menebak'
karakter yang digunakan (biasanya web browser modern akan menggunakan utf-8 sebagai
karakter default). Jika halaman web dijalankan dari web server seperti
Apache,
web server juga akan menambahkan
http-header yang berisi karakter set.
Namun perlu menjadi catatan bahwa jika kita tidak menulis meta tag charset,
proses web browser 'menebak' karakter set ini bisa menjadi masalah.
Pada tahun 2005 terdapat sebuah bug pada Internet Explorer yang dinamakan
Google
XSS. Hal ini terjadi karena situs google tidak menuliskan karakter set sehingga
bisa digunakan untuk menyisipkan kode javascript. Oleh karena itu, sebaiknya
kita selalu menambahkan meta tag charset pada setiap halaman HTML.
Dalam tutorial belajar HTML5 berikutnya, kita akan mempelajari tentang
pengertian semantic tag HTML5.