Mengenal Meta tag Charset UTF-8 pada HTML5

belajar HTML dan CSS untuk pemula

Sesudah penulisan Doctype, baris selanjutnya dalam halaman HTML dipakai untuk meta tag. Dalam tutorial belajar HTML5 saat ini kita akan membicarakan mengenai cara pemakaian meta tag Charset UTF-8 pada HTML5.

Pengertian Meta tag

Meta tag ialah ‘data tentang data‘, dimana tag ini ditujukan bukan kepada user, namun kepada web browser atau kepada ‘robot program‘ seperti mesin pencari (search engine). Meta tag telah pernah kita bahas dalam Tutorial HTML: Pengertian meta tag. Pada tutorial saat ini saya akan mengulas meta tag charset UTF-8 yang biasa dipakai dalam halaman HTML5.

Meta tag sepenuhnya bersifat opsional. Halaman HTML yang ditulis tanpa memakai meta tag ialah valid.

Mengenal meta-tag charset UTF-8

Charset UTF-8 merupakan meta tag yang amat biasa dipakai dalam HTML5, penulisannya yaitu sebagai berikut:

<meta charset="UTF-8">

Meta tag diatas memberi arahan kepada web browser untuk menerjemahkan karakter-karakter di dalam halaman HTML sebagai UTF-8. Meskipun bersifat opsional, hampir setiap halaman HTML5 memakai meta tag ini. Namun, apa sebetulnya maksud dari charset=”UTF-8″ ini?

Sejarah Charset (Karakter Set) HTML

Arahan charset dipakai untuk menerjemahkan bit-bit di dalam halaman HTML jadi karakter.

Karakter set paling sederhana dan juga paling awal dipakai ialah 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 cuma 128 karakter.

Karakter set “us-ascii” kemudian dikembangkan jadi karakter ANSI, atau dikenal pula sebagai ISO-8859-1 (dalam HTML ditulis sebagai charset=”ISO-8859-1”). Karakter ANSI mendukung 256 karakter, dan umumnya dipakai pada HTML versi 2.0 hingga HTML 4.01.

Pemasalahan pada karakter set ASCII ataupun ANSI ialah tidak menyertakan karakter non-latin seperti huruf arab, cina, jepang, dll. Untuk kebutuhan ini dikembangkan berbagai karakter set untuk setiap bahasa, seperti big5 untuk karakter cina, x-euc-jp untuk karakter jepang, iso-8859-7 untuk karakter yunani dll. Sehingga untuk tiap web, penulisan karakter set akan berbeda bergantung bahasa apa yang dipakai untuk menulis halaman HTML. Pastinya bakal lebih praktis bila semua karakter ini disatukan kedalam sebuah karakter set.

Di awal perkembangan XHTML, dikenalkan karakter set UTF-8 (Unicode Transformation Format-8) yang mendukung hampir semua karakter yang terdapat di dunia. Dalam perkembangan berikutnya, HTML5 juga memakai UTF-8 sebagai charset standar. Dengan memakai UTF-8, kita tak mesti cemas terkait karakter atau bahasa apa yang akan dipakai. UTF-8 mendukung sampai lebih dari 10.000 karakter.

Cara Penulisan meta tag Charset UTF-8

Dalam HTML 4.01 ataupun XHTML, penulisan karakter set lebih panjang, seperti contoh berikut:

<meta http-equiv="content-type" content="text/html;charset=UTF-8" />

Dalam HTML5, penulisannya disederhanakan jadi:

<meta charset="UTF-8">

Meta tag charset ini ditempatkan di 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 infanthree</p>
</body>

Pentingnya Memakai Charset

Meskipun sepenuhnya opsional, penulisan meta tag charset sangat disarankan. Bila kita tidak menuliskan charset, web browser akan mencoba ‘menebak‘ karakter yang dipakai (pada umumnya web browser modern akan memakai utf-8 sebagai karakter default). Bila halaman web dijalankan dari web server seperti Apache, web server juga akan menambahkan http-header yang berisi karakter set.

Tetapi perlu jadi catatan bahwa bila kita tidak menulis meta tag charset, proses web browser ‘menebak‘ karakter set ini dapat jadi masalah. Di tahun 2005 ada sebuah bug pada Internet Explorer yang dinamakan Google XSS. Hal ini terjadi sebab situs google tidak menuliskan karakter set sehingga dapat dipakai untuk menyisipkan kode javascript. Oleh sebab itu, disarankan kita sering menambahkan meta tag charset pada setiap halaman HTML.


Butuh Web Developer Makassar atau Jasa SEO di Makassar yang bergaransi? Jangan ragu dengan infanthree.com. Kami juga penyedia Jasa Pembuatan Aplikasi Android di Makassar yang terkemuka. Selain itu ada layanan SEM, SMM, Internet Marketing Agency Makassar dan Social Media, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik, hingga pelatihan komputer dan internet marketing.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *