Penjelasan Singkat Tentang HTML 5

(1)

Penjelasan Singkat Tentang HTML 5

HTML5 merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet.

HTML5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011 masih dalam pengembangan. Dimana tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium dan WHATWG ( Web Hypertext Application Technology Working Group ).

Dimana WHATWG bekerja dengan bentuk web dan aplikasi dan W3C merupakan pengembang dari XHTML 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.

Berikut tujuan dibuatnya HTML5 :

Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash ) Penanganan kesalahan yang lebih baik

Lebih markup untuk menggantikan scripting HTML5 merupakan perangkat mandiri

Proses pembangunan dapat terlihat untuk umum

Pembuatan HTML5 ini berguna untuk memperbaiki kesalahan/ kekurangan dari HTML4 misalnya saja : untuk memanggil file flash (.flv) biasanya kan menggunakan :

pada HTML5 fitur itu berubah menjadi : <video src=video.mp4></video>

dengan itu kita bisa mengerti, bahwa tujuan di buatnya HTML5 yaitu untuk memudah kita melakukan proses edit suatu web, sehingga source kodenya tidak akan menjadi banyak.

Fitur baru dalam HTML5 :

Unsur kanvas untuk menggambar

Video dan elemen audio untuk media pemutaran

Dukungan yang lebih baik untuk penyimpanan secara offline

Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.

(2)

( Internet Explorer ) akan mendukung beberapa fitur dari HTML5. Elemen Baru Di HTML5

Demi mewujudkan struktur halaman web yang lebih baik semantik dan aksesibilitasnya, dikenalkanlah beberapa elemen baru, diantaranya :

Section serupa seperti h1-h6

Article bisa berupa entri blog atau tulisan konten Aside menyajikan konten pelengkap

Header bisa menyajikan judul, deskripsi, bahkan nav untuk navigasi.

Footer berisi catatan kaki seperti informasi hak cipta, penulis, kontak, dan sebagainya.

Dialog yang dikombinasikan dengan dt dan dd (seperti pada halaman FAQ) dapat digunakan untuk menyajikan percakapan.

Yang fenomenal adalah penggunaan elemen figure, video, audio, source, embed, canvas dan elemen terkait berkas multimedia lainnya.

Atribut Baru Di HTML5

Dikenalkan pula beberapa atribut baru, seperti : Atribut media, ping pada elemen pranala,

Autofocus, placeholder, required, autocomplete dan sebagainya, terkait elemen input dan form Reversed pada elemen ol untuk urutan besar ke kecil.

Perubahan Makna Elemen

Ada beberapa elemen yang berubah makna, diantaranya :

Elemen b dilegalkan sebagai tipografi penegas, seperti pada kata kunci yang ingin ditonjolkan, tidak ‘deprecated’ (bukan fitur yang dianggap usang). Tidak lebih dari itu. Jadi tetap tidak bermakna semantik tertentu. Hal yang sama berlaku pula untuk elemen i.

Elemen strong menegaskan level kepentingan, bukan sekadar penekanan emphasis lagi. Elemen hr dapat digunakan untuk memisahkan level paragraf sesuai pokok pikirannya.

Elemen Dan Atribut Yang Tidak Digunakan

Berikut ini beberapa elemen dan atribut yang tidak lagi muncul pada HTML 5 : center,

font

strike, u, big

frame, frameset, noframes acronym

(3)

longdesc scope pada td

Apakah Browser Saya Support HTML5?

Bagaimana caranya untuk menguji apakah browser yang anda install itu sudah support HTML5 atau tidak dan seberapa banyak fitur HTML5 yang disupport? Caranya cukup mudah, pertama-tama pastikan komputer anda sudah terhubung dengan internet dan arahkan ke alamat web sebagai berikut:

http://html5test.com

Dari data yang ada pada website itu didapatkan :

Maxthon 3.4.1 merupakan browser terbaik dalam hal mendukung bahasa HTML5 dengan 422 total skor

Google Chrome 20 dengan 414 total skor Opera 12.00 dengan 385

Firefox 13 dengan 345 Safari 5.1 dengan 317

Internet Explorer 9 dengan 138 point.

Sumber : http://ah-shared.blogspot.com/2013/05/apa-itu-html5.html Berikut tag tag dalam html5

disusun berdasarkan abjad

Tag Deskripsi

<!–…–> mendefinisikan komentar <!DOCTYPE> mendefinisikan jenis document

<a> mendefinisikan hyperlink

<abbr> mendefinisikan ringkasan/singkatan <acronym> tidak di dukung di html5

<address> mendefinisikan alamat <applet> tidak di dukung di html5 <area> mendefinisikan area <article>New mendefinisikan artikel

<aside>New mendefinisikan content selain content halaman <audio>New mendefinisikan audio

<b> mendefinisikan text tebal

<base> mendefinisikan url dasar untuk semua link pada halaman <basefont> tidak di dukung di html5

<bdo> mendefinisikan arah tampilan text <big> tidak di dukung di html5

(4)

<blockquote> mendefinisikan kutipan <body> mendefinisikan element body <br> mendefinisikan baris baru

<button> mendefinisikan document button/tombol <canvas>New mendefinisikan

document grafis

<caption> mendefinisikan document table caption <center> tidak di dukung di html5

<cite> mendefinisikan kutipan

<code> mendefinisikan text kode komputer <col> mendefinisikan atribut untuk kolom table <colgroup> mendefinisikan kolom table

<command>New mendefinisikan perintah tombol <datalist>New mendefinisikan dropdown list <dd> mendefinisikan definisi deskripsi <del> mendefinisikan text yang di hapus <details>New mendefinisikan suatu elemen

<dialog>New mendefinisikan dialog (conversation) <dfn> mendefinisikan definition term <dir> tidak di dukung di html5

<div> mendefinisikan bagian dalam suatu document

<dl> mendefinisikan daftar

<dt> mendefinisikan istilah

<em> mendefinisikan text rapat <embed>New mendefinisikan external content <fieldset> mendefinisikan fieldset

<figure>New mendefinisikan isi media, dan keterangan <font> tidak di dukung di html5

<footer>New mendefinisikan bagian footer <form> mendefinisikan formulir <frame> tidak di dukung di html5 <frameset> tidak di dukung di html5 <h1> sampai <h6> mendefinisikan header

<head> mendefinisikan informasi tentang document

<header>New mendefinisikan sebuah header untuk bagian suatu halaman <hgroup>New mendefinisikan informasi tentang bagian sebuah document <hr> mendefinisikan garis horisontal

<html> mendefinisikan document html <i> mendefinisikan text italic

(5)

<img> mendefinisikan gambar

<input> mendefinisikan input

<ins> mendefinisikan text yang disisipkan

<keygen>New mendefinisikan sebuah kunci yang dihasilkan dalam bentuk <kbd> mendefinisikan text keyboard

<label> mendefinisikana label untuk form <legend> mendefinisikan judul di fieldset

<li> mendefinisikan list

<meter>New mendefinisikan ukuran yang sudah di tetapkan <nav>New mendefinisikan navigation link

<noframes> tidak di dukung di html5 <noscript> mendefinisikan bagian noscript <object> mendefinisikan sebuah object <ol> mendefinisikan daftar angka <optgroup> mendefinisikan grup pilhan <option> mendefinisikan drop-down option <output>New mendefinisikan beberapa jenis output

<p> mendefinisikan paragraph

<param> mendefinisikanparameter untuk sebuah objeck <pre> mendefinisikan text ke format awal

<progress>New mendefinisikan kemajuan suatu tugas apapun

<q> mendefinisikan kutipan pendek

<rp>New digunakan untuk menentukan apakah browser mendukung ruby

<rt>New menjelaskan tentanf penngunaan ruby <ruby>New mendefinisikan ruby annotations. <s> tidak di dukung di html5

<samp> mendefinisikan sample computer code <script> mendefinisikan script

<section>New mendefinisikan section <select> mendefinisikan selectable list <small> mendefinisikan text kecil <source>New mendefinisikan media resources

(6)

<strike> tidak di dukung di html5 <strong> mendefinisikan text pekat/tebal <style> mendefinisikan style untuk css

<sub> mendefinisikan subscripted text lawan pangkat <sup> mendefinisikan superscripted text pangkat <table> mendefinisikan table

<tbody> mendefinisikan table body <td> mendefinisikan table cell <textarea> mendefinisikan text area <tfoot> mendefinisikan table footer <th> mendefinisikan table header <thead> mendefinisikan table header <time>New mendefinisikan date/time <title> mendefinisikan judul document <tr> mendefinisikan baris table <tt> tidak di dukung di html5 <u> tidak di dukung di html5

<ul> mendefinisikan daftar

<var> mendefinisikan variable <video>New mendefinisikan video <xmp> tidak di dukung di html5 keterangan*

tag-tag diatas saya ambil dari w3school.com

yang di beri tanda merah adalah tag baru(hanya di html5), dimana tag tadi tidak ada di html 4 tag-tag baru tadi belum support di semua browser

yang di beri warna biru adalah tag html yang tidak support di html5 sumber : http://www.indaam.com/2010/05/tag-tag-dalam-html5-lengkap/

Contoh Penulisan Struktur HTML5

Struktur penulisan script web yang terbaru yaitu HTML5 memang sedikit berbeda dari biasanya, struktur lebih mudah dipahami . Berikut ini contoh struktur penulisan HTML5

<!DOCTYPE HTML> <html>

<head>

(7)

<title>Your Website</title> </head> <body> <header> <nav> <ul> <li>Menu 1</li> <li>Menu 2</li> <li>Menu 3</li> </ul> </nav> </header> <section> <article> <header> <h2>Judul Artikel</h2> </header>

<p>Bagaimana cara membuat Blog? Apakah membuat blog itu harus membayar? Pertanyaan itu sering muncul ketika seseorang ingin membuat blog. Ada beberapa aplikasi yang dapat digunakan untuk membuat blog, baik yang bersifat gratis maupun berbayar. Pada bagian ini akan diuraikan beberapa aplikasi yang dapat digunakan untuk membuat blog secara gratis.</p>

</article> <article> <header>

<h2>Judul Artikel</h2> </header>

<p>Pada awal munculnya Blog, aplikasi ini sering digunakan orang untuk menulis catatan kegiatan. Kala itu, blog berperan seperti catatan harian (diary) yang hanya berisi ungkapan perasaan seseorang. Namun perkembangan selanjutnya, Blog dimanfaatkan untuk membangun image branding, memperkuat diri sebagai tought leader melalui ide-ide dan inovasi baru, sarana komunikasi dan hubungan masyarakat, sarana pendidikan secara online dan masih banyak lagi manfaat lain.</p> </article>

</section> <aside>

<h2>Informasi Penulis</h2>

<p>Nama saya Zainal Hakim, saya seorang pengembang web yang tinggal di Banjarmasin – Kalimantan Selatan. Selamat belajar web di Blog Zainal Hakim.</p>

(8)

</aside> <footer>

</body> </html>