TUTORIAL HTML 5 - BAGIAN 2 ~ infoku.net

Pengertian DOCTYPE (DTD)

DOCTYPE atau document type declaration (DTD) adalah sebuah keterangan yang ditulis untuk memberitahu web browser tentang aturan penulisan dari dokumen yang sedang ditampilkan. doctype ditulis pada baris pertama halaman HTML.
Keharusan penulisan doctype berasal dari bahasa yang dinamakan SMGL dan XML. Keduanya adalah bahasa markup dimana HTML dan XHTML dikembangkan. Mari kita lihat bagaimana doctype ditulis untuk HTML versi 4.01:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

Penulisan DOCTYPE diatas adalah untuk HTML 4.01 strict. Perhatikan bahwa penulisan doctipe mencantumkan versi HTML yang akan kita tulis (HTML 4.01//EN), kemudian diikuti dengan alamat dimana aturan DOCTYPE tersebut berada (dalam contoh diatas adalah: http://www.w3.org/TR/html4/strict.dtd).

Untuk versi XHTML, penulisan doctype yang panjang ini juga tidak jauh berbeda, mari kita lihat contoh penulisan untuk XHTML 1.0:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Struktur dasar penulisan doctype tersebut hampir sama dengan versi HTML 4.01 pada contoh kita sebelumnya. Jadi, bagaimana cara penulisan doctype pada HTML5?

Cara Penulisan DOCTYPE pada HTML5

Penulisan doctype pada HTML5 jauh lebih sederhana. Berikut adalah cara penulisan doctype untuk HTM5:

<!DOCTYPE html>

Sangat singkat dan lebih mudah diingat. Hal ini karena HTML5 tidak lagi bagian dari bahasa SMGL yang mengharuskan penulisan doctype berserta alamat DTD-nya (sebagaimana versi HTML sebelumnya). Malah sebenarnya HTML5 tidak membutuhkan penulisan doctype sama sekali (opsional).

Akan tetapi, jika web browser menampilkan sebuah dokumen HTML yang ditulis tanpa doctype, web browser akan masuk kedalam tampilan yang dinamakan “quirk mode”. Quirk mode adalah sebuah fitur dalam web browser dimana halaman web ditampilkan secara berbeda. Sebuah halaman tanpa doctype dianggap halaman HTML ‘usang‘ dan perlu perlakuan khusus untuk menampilkannya.
Fitur “quirk mode” memiliki banyak bug, sehingga mau tidak mau HTML5 tetap menggunakan doctype, tetapi dengan versi sesederhana mungkin agar web browser tidak masuk ke dalam mode ini dan menampilkannya secara normal (standard mode).

Doctype dalam HTML5 bersifat case-insensitive, yang tidak membedakan penulisan dengan huruf besar maupun huruf kecil. Penulisan <!DOCTYPE html> dianggap sama dengan <!doctype html>. Akan tetapi karena faktor kebiasaan, anda akan menemukan penulisan dengan huruf besar lebih sering digunakan.

Sebagai penutup, berikut adalah struktur dasar HTML menggunakan doctype HTML5:

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>Belajar HTML5</title>

</head>

<body>

  <h1>HTML5</h1>

  <p>Belajar HTML5 di infoku.net</p>

</body>

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 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 infoku.net</p>

</body>

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 bahasi di Tutorial HTML5 bagian 3.

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.