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.
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>
Pentingnya Menggunakan Charset
Dulunya meta tag charset ini bersifat opsional, namun sekarang validasi W3C akan menampilkan pesan error jika sebuah dokumen HTML tidak mencantumkannya.
Jika kita tidak menulis 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.
Terimakasih untuk informasinya Mas, sebelumnya Saya agak bingung dengan hal tersebut
ehm, ternyata di HTML5 semuanya banyak yang disederhanakan, jadi lebih mudah hafal akan scriptnya.
gaya bahasa anda memang mudah sekali dicerna, meski baru baca sekali langsung paham maksud dari tulisan anda.
lanjut terus mas untuk tutorialnya
Ma'af mas saya masih belum mengerti atribut charset, kan dikatakan Jika kita tidak memasukkan charset ke dalam meta tag, tampilan halaman seakan tidak berubah, namun akan menjadi masalah jika halaman web kita dibuka oleh browser dari negara yang tidak menggunakan huruf latin seperti jepang, cina dan arab, masalahnya seperti apa yah, maklum masih baru mas. hehehe
Efek dari penggunaan atribut charset ini memang susah di praktekkan mas, soalnya rata2 web browser sudah "pintar" dan bisa menangani perbedaan charset. Selain itu, charset ini juga bisa di setting otomatis oleh web server (tidak hanya dari kode HTML saja).
Jadi kalau g ada efek apa2 kenapa harus pakai charset? karena kalau kodenya di cek di validator W3C, hasilnya akan error jika tidak menulis charset. Ada juga kasus di mana wabsite bisa di bobol gara2 tidak men-set charset.
Thanks Mas Informasinya
oh ternyata utf-8 cara kerjanya gitu toh..makasih mas skrang saya paham
thanks ya atas infonya.. sukses selalu
menarik sekali, thanks penjelasan nya om admin
Makasih mas, nambah wawasan lagi
Saya masih kurang ngerti mas.
Terima kasih buat postingannya, mudah di cerna buat otak ane yang lemot ini.
Terimakasih infonya.
Gan, apabila sudah menggunakan <meta charset="UTF-8"> apakah masih perlu menggunakan <html lang="id"> ?? apa perbedaan jika mengunkan keduanya atau tidak? karena keduanya sama2 digunakan untuk mengolah bahasa yang digunakan
terimakasih
"Charset" digunakan untuk charakter set, sedangkan "lang" untuk bahasa. Sepintas memang mirip tapi keduanya berbeda.
Jika dilihat dari efeknya, g akan ada pengaruh sama sekali. Jika keduanya tidak dipakai pun tampilan web nyaris tidak berubah. Hanya saja validasi dari W3C mengharuskan penulisan <meta charset="UTF-8">.
Web browser modern sudah cukup canggih dan jika <meta charset="UTF-8"> tidak ditulis, akan ditambahkan secara otomatis.
Bagimana dengan kode komputer element pada html? Dan tag kbd, samp, code, var? Bisa dijelaskan? Atau mungkin dasar agar cepat menguasainya. Tq
Silahkan, bisa kesini: https://www.duniailkom.com/tutorial-text-html-tag-html-untuk-penulisan-hal-teknis-tag-samp-kbd-dan-var/
Makasih mas, akhirnya terpecahkan juga masalahnya, selama ini saya menulis dalam versi HTML 4.01 ternyata
terim kasih ilmunya mas in syaa allah bermanfaat