SERIES HTML5 - CHAPTER 2 : TAG DOCTYPE HTML

Dayat Miftahul Jannah
11:01:51 PM



Melanjutkan tutorial Seri HTML5 yang kemarin, di tutorial HTML kali ini saya akan coba menjelaskan cara menggunakan elemen HTML yang disebut tag <!DOCTYPE> dengan sintaks beserta contoh.

Doctypes adalah kependekan dari 'document type', tag ini membantu browser memahami versi HTML dari dokumen yang ditulis untuk interpretasi yang lebih baik. Deklarasi doctype bukan tag HTML dan berada di bagian paling atas dokumen. di ostingan ini juga akan menjelaskan struktur dan deklarasi berbagai doctypes dalam HTML. Deklarasi <!DOCTYPE> sendiri harus selalu disertakan di bagian atas dokumen HTML, sebelum tag <html>.

HTML5 tidak didasarkan pada SGML (Standard Generalized Markup Language), dan oleh karena itu tidak memerlukan referensi ke DTD (Document Type Definition).

Sesuai dengan Spesifikasi DOCTYPE HTML5 dari W3.org:
 
DOCTYPE harus terdiri dari komponen berikut, dalam urutan ini:
 
String yang cocok dengan ASCII case-insensitive untuk string "<!DOCTYPE".
 
oleh karena itu DOCTYPE berikut juga valid:
  • <!doctype html>
  • <!dOCtyPe html>
  • <!DocTYpe html>
Artikel SO berikut ini membahas topik secara ekstensif: Doctype harus menggunakan huruf besar atau huruf kecil?

Syntax

Sintaks untuk tag <!DOCTYPE> bervariasi antara versi HTML atau XHTML yang kalian gunakan. Mari kita lihat penggunaan yang paling umum dibawah ini.

Syntax dalam HTML5 adalah:
 <!doctype html>
Syntax dalam HTML 4.01 Transitional adalah:
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Syntax di XHTML 1.0 Transitional adalah:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Syntax dalam XHTML 1.0 Strict adalah:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Syntax dalam XHTML 1.1 adalah:
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Browser yang Support :

Tag <!DOCTYPE> memiliki dukungan dasar dengan browser berikut:
 
  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Seluler (Gecko)
  • Internet Explorer (IE)
  • Edge Mobile
  • Opera
  • Opera Seluler
  • Safari (WebKit)
  • Safari Mobile

Contoh

Kita akan membahas tag <html> di bawah ini, mengeksplorasi contoh cara menggunakan tag <html> di HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, dan XHTML 1.1.

1. Dokumen HTML5

Jika kalian membuat halaman web baru di HTML5, tag <!DOCTYPE> kalian mungkin terlihat seperti ini:
1:  <!doctype html>  
2:  <html>  
3:  <head>  
4:  <meta charset="UTF-8">  
5:  <title>HTML5 Example by matapanda-crew.blogspot.com</title>  
6:  </head>  
7:  <body>  
8:  <h1>Heading</h1>  
9:  <p>This is the content.</p>  
10:  </body>  
11:  </html>
Dalam contoh Dokumen HTML5 di atas tag <!DOCTYPE> berada pada baris pertama yang tidak terdapat di dalam tag <html>.

2. Dokumen HTML 4.01 Transitional

Jika kalian membuat halaman web baru dalam Transisi HTML 4.01, tag <!DOCTYPE> kalian mungkin terlihat seperti ini:
1:  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
2:  <html>  
3:  <head>  
4:  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
5:  <title>HTML 4.01 Transitional Example by matapanda-crew.blogspot.com</title>  
6:  </head>  
7:  <body>  
8:  <h1>Heading</h1>  
9:  <p>This is the content.</p>  
10:  </body>  
11:  </html>
Dalam contoh Dokumen Transisi HTML 4.01 diatas, tag <!DOCTYPE> ada di baris pertama yang tidak ada di dalam tag <html>.

3.Dokumen XHTML 1.0 Transitional

Jika Andakalian membuat halaman web baru di Transisi XHTML 1.0, tag <!DOCTYPE> kalian mungkin terlihat seperti ini:
1:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
2:  <html xmlns="http://www.w3.org/1999/xhtml">  
3:  <head>  
4:  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
5:  <title>XHTML 1.0 Transitional Example</title>  
6:  </head>  
7:  <body>  
8:  <h1>Heading</h1>  
9:  <p>This is the content.</p>  
10:  </body>  
11:  </html>
 Dalam contoh Dokumen Transisi XHTML 1.0 diatas, tag <!DOCTYPE> ada di baris pertama yang tidak ada di dalam tag <html>.
 
4. Dokumen XHTML 1.0 Strict

Jika kalian membuat halaman web baru di XHTML 1.0 Strict, tag <!DOCTYPE> kalian mungkin terlihat seperti ini: 
1:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
2:  <html xmlns="http://www.w3.org/1999/xhtml">  
3:  <head>  
4:  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
5:  <title>XHTML 1.0 Strict Example by matapanda-crew.blogspot.com</title>  
6:  </head>  
7:  <body>  
8:  <h1>Heading</h1>  
9:  <p>This is the content.</p>  
10:  </body>  
11:  </html>
 Dalam contoh Dokumen XHTML 1.0 strict diatas, tag <!DOCTYPE> ada di baris pertama yang tidak ada di dalam tag <html>.
 
5. Dokumen XHTML 1.1

Jika kalian membuat halaman web baru di XHTML 1.1, tag <!DOCTYPE> kalian mungkin terlihat seperti ini: 
1:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
2:  <html xmlns="http://www.w3.org/1999/xhtml">  
3:  <head>  
4:  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
5:  <title>XHTML 1.1 Example by matapanda-crew.blogspot.com</title>  
6:  </head>  
7:  <body>  
8:  <h1>Heading</h1>  
9:  <p>This is the content.</p>  
10:  </body>  
11:  </html>
 Dalam contoh Dokumen XHTML 1.1 diatas, tag <!DOCTYPE> ada di baris pertama yang tidak ada di dalam tag <html>.
 
 
Oke mungkin sampai disini dulu untuk pembahasan mengenai DOCTYPE HTML, kita akan bahas mengenai HTML5 lainnya di postingan slanjutnya.
 
See you next time :).