Senin, 14 Oktober 2013

Syntax / Tag yang baru pada HTML5

Assalamualaikum Wr Wb

Setelah teman-teman kelompok saya menjelaskan tentang HTML5, kali ini saya akan mencoba menjelaskan tentang syntax atau tag baru yang ada di HTML5. HTML5 dibuat untuk membuat proses coding menjadi lebih mudah dan logis. Fitur-fitur unik dan mengesankan dari HTML5 datang di dalam departemen multimedia. Banyak dari fiturnya yang yang dibuat dengan pertimbangan bahwa pengguna harus dapat menjalankan konten berat (heavy content) dalam device dengan tenaga rendah (low-powered device).



Pada HTML5 terdapat fitur elemen <video>,<audio> dan <canvas> , tetapi juga integrasi dari konten gambar grafis vektor (yang sebelumnya kita ketahui dengan tag <object>). Artinya, konten multimedia dan grafis dalam website akan dapat ditangani dan dieksekusi dengan lebih mudah dan lebih cepat, tanpa membutuhkan plugin atau API tambahan.

Ada banyak sekali syntax baru yang ditambahkan ke dalam HTML5, tetapi dibawah ini saya akan menyebutkan beberapa syntax yang dirasa paling penting. Sisanya dapat Anda lihat di HTML5 section W3C.

  • <article> tag ini mendefinisikan artikel, posting atau komentar dari pengguna, atau suatu konten yang independen
  • <aside> tag aside pada HTML5 menandakan suatu konten yang terpisah (aside) dari konten sebuah halaman, seperti sebuah sidebar
  • <header>,<footer> Anda tidak perlu lagi mendefinisikan ID header atau footer, gunakan tag ini untuk menggantikannya
  • <nav> navigasi pada website Anda dapat ditaruh didalam tag nav, yang dapat secara otomatis membuat daftar Anda seperti sebuah navigasi
  • <section> tag ini dapat mendefinisikan section apapun dalam document Anda. Section bekerja kurang lebih seperti div yang memisahkan section yang berbeda
  • <audio>, <video> jelas sekali ini adalah tag penanda untuk konten suara dan video, yang sekarang dapat lebih mudah dijalankan dari berbagai device
  • <embed> tag baru ini berfungsi untuk menampilkan konten interaktif (plugin) atau aplikasi eksternal
  • <canvas> canvas tag ini cukup menarik, memungkinkan Anda menggambar menggunakan script kode seperti JavaScript.


DOCTYPE
HTML5 memerlukan DOCTYPE yang ditentukan untuk memastikan bahwa browser merender atau membaca halaman situs dalam mode standar. Deklarasi DOCTYPE untuk sintaks HTML dan bersifat case-sensitive, <DOCTYPE html!>. Doctypes dari versi sebelumnya dari HTML lebih panjang karena masih berbasis SGML dan karena itu diperlukan suatu referensi untuk DTD. Dengan HTML5 ini tidak lagi digunakan dan browser hanya memerlukan syntax yang lebih sederhana, <DOCTYPE html!>.

HTML5 DOCTYPE
<!DOCTYPE html>
 Vesri HTML sebelumnya DOCTYPE menggunakan rerferensi DTD, seperti contoh ini:

HTML 4.01 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


HTML5 Set Karakter
Untuk menampilkan halaman HTML dengan benar, browser harus tahu apa Character Sets (charset) yang digunakan. Pada HTML 5 charset Anda dapat menggunakan elemen <meta> dengan atribut charset yang menentukan pengkodean.

Berikut adalah contoh sederhana:
<meta charset="UTF-8">
Contoh di atas dapat menggantikan pemakaian <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> meskipun sintaks tersebut masih diperbolehkan.

Contoh struktur dokumen HTML5 minimum :
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>...</title>
</head>
<body>
  <header>...</header>
  <nav>...</nav>
  <article>
    <section>
      ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>
</html>

Sekian penjelasan syntax / tag yang ada di HTML5, mohon maaf bila ada kesalahan kata

Wassalamualaikum Wr Wb

Artikel yang terkait :

Referensi : 





Tidak ada komentar:

Posting Komentar