Tutorial Belajar HTML5 Part 4: Pengertian Meta tag Charset UTF-8 pada HTML5

Posted on

Setelah penulisan Doctype, baris berikutnya pada halaman HTML digunakan bagi meta tag. Pada panduan belajar HTML5 kali ini kita akan membahas mengenai cara penggunaan meta tag Charset UTF-8 pada HTML5.


Pengertian Meta tag

Meta tag ialah ‘data mengenai data‘, dimana tag ini diperuntukkan bukan kepada user, tetapi kepada web browser atau kepada ‘robot program‘ seperti mesin pencari (search engine). Meta tag telah pernah kita bahas pada Tutorial HTML: Pengertian meta tag. Di panduan kali ini saya akan membahas meta tag charset UTF-8 yang sering digunakan pada halaman HTML5.

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

Mengenal meta-tag charset UTF-8

Charset UTF-8 adalah meta tag yang sangat sering digunakan pada HTML5, penulisannya ialah selaku berikut:

Meta tag diatas memberi instruksi kepada web browser bagi menerjemahkan karakter-karakter di pada halaman HTML selaku UTF-8. Walaupun bersifat opsional, hampir setiap halaman HTML5 menggunakan meta tag ini. Akan tetapi, apa hakekatnya maksud dari charset=”UTF-8″ ini?


Sejarah Charset (Karakter Set) HTML

Instruksi charset digunakan bagi menerjemahkan bit-bit di pada halaman HTML menjadi karakter.

Karakter set sangat sederhana dan pun sangat awal digunakan ialah karakter set ASCII, (pada HTML ditulis selaku charset=”us-ascii”). Karakter set ini terbatas di 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 pun selaku ISO-8859-1 (pada HTML ditulis selaku charset=”ISO-8859-1”). Karakter ANSI mendukung 256 karakter, dan umumnya digunakan di HTML versi 2.0 hingga dengan HTML 4.01.

Pemasalahan di karakter set ASCII maupun ANSI ialah tak menyertakan karakter non-latin seperti huruf arab, cina, jepang, dll. Bagi kebutuhan ini dikembangkan beragam karakter set bagi masing-masing bahasa, seperti big5 bagi karakter cina, x-euc-jp bagi karakter jepang, iso-8859-7 bagi karakter yunani dll. Sehingga bagi setiap web, penulisan karakter set akan berbeda-beda tergantung bahasa apa yang digunakan bagi menulis halaman HTML. Pastinya akan lebih mudah sekiranya seluruh karakter ini disatukan kedalam sebuah karakter set.

Di awal perkembangan XHTML, diperkenalkan karakter set UTF-8 (Unicode Transformation Format-8) yang mendukung hampir seluruh karakter yang terdapat di dunia. Pada perkembangan berikutnya, HTML5 pun menggunakan UTF-8 selaku charset standar. Dengan menggunakan UTF-8, kita tak 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

Pada HTML 4.01 maupun XHTML, penulisan karakter set lebih panjang, seperti contoh berikut:

Pada HTML5, penulisannya disederhanakan menjadi:

Meta tag charset ini ditempatkan di bagian <head> sebelum tag <title>, seperti contoh berikut:


Pentingnya Menggunakan Charset

Walaupun sepenuhnya opsional, penulisan meta tag charset betul-betul dianjurkan. Kalau kita tak menuliskan charset, web browser akan mencoba ‘menebak‘ karakter yang digunakan (biasanya web browser modern akan menggunakan utf-8 selaku karakter default). Kalau halaman web dijalankan dari web server seperti Apache, web server pun akan menambahkan http-header yang berisi karakter set.

Namun perlu menjadi catatan bahwa sekiranya kita tak menulis meta tag charset, proses web browser ‘menebak‘ karakter set ini dapat menjadi masalah. Di tahun 2005 terdapat sebuah bug di Internet Explorer yang dinamakan Google XSS. Hal ini terjadi karena situs google tak menuliskan karakter set sehingga dapat digunakan bagi menyisipkan kode javascript. Oleh karena itu, sebaiknya kita selalu menambahkan meta tag charset di setiap halaman HTML.

Pada panduan belajar HTML5 berikutnya, kita akan mempelajari mengenai pengertian semantic tag HTML5.


eBook HTML Uncover Duniailkom

Sahabat serius ingin menguasai HTML? Duniailkom telah menyusun eBook HTML Uncover. eBook ini membahas HTML dengan lebih detail dan lebih komplit hingga fitur terbaru HTML5. Penjelasan lebih lanjut dapat ke: eBook HTML Uncover Duniailkom.


Sumber https://www.duniailkom.com/