Oktober 2013 ~ Mutia Nb

PENGENALAN HTML5

“Diajukan untuk memenuhi salah satu tugas dari mata kuliah Teknologi Informasi dan Komunikasi”

Dosen pengampu: Septia Lutfi M,pd

Disusun Oleh : Mutia Nurotul Bariyah

NIM : 1102412022

Rombel : 02 (dua)

TEKNOLOGI PENDIDIKAN

FAKULTAS ILMU PENDIDIKAN

UNIVERSITAS NEGERI SEMARANG

2013

KATA PENGANTAR

Puji syukur saya panjatkan ke hadirat Alah SWT, yang telah memberikan rahmat dan karunianya kepada kita semua. Tentunya saya sebagai penyusun telah menyelesaikan tugas ini dengan baik.

Saya menyadari bahwa Makalah ini memang belum mencapai kesempurnaan, masih banyak kekurangan-kekurangan yang harus diperbaiki. Untuk itu, saya sebagai penyusun mengharapkan kritik dan saran yang membangun dari para pembaca agar dapat memperbaiki dalam penulisan Makalah yang saya buat selanjutnya.

Akhirnya saya sebagai penyusun berharap, semoga Makalah yang saya buat dapat menambah wawasan kepada saya pada khususnya dan kepada para pembaca pada umumnya.

Semarang, September 2013

Mutia Nurotul Bariyah

(1102412022)

Daftar Isi

Halaman

Halaman Sampul 1

Kata Pengantar 2

Daftar Isi 3

BAB I. PENDAHULUAN

A. Latar Belakang ........................................................................... 4

B. Rumusan Masalah ...................................................................... 5

C. Tujuan ........................................................................................ 6

BAB II. PEMBAHASAN

A. Pengertian HTML5 .................................................................... 7

B. Sejerah Perkembangan HTML5 ................................................ 9

C. Atribut dalam HTML5 .............................................................. 10

D. Komponen-komponen dalam HTML5 ..................................... 11

E. Teknologi yang Diperkenalkan HTML5 .................................. 13

F. Elemen-elemen Baru HTML5 ................................................... 14

G. Perubahan Makna Elemen ......................................................... 14

H. Elemen dan Atribut yang

Tidak Dipergunakan dalam HTML5 .......................................... 15

I. Fitur-fitur yang Dimilki HTML5 ................................................ 23

J. Tujuan Pembuatan HTML5 ......................................................... 23

K. Perbedaan Antara HTML4 dan HTML5 .................................... 24

L. Keunggulan Menggunakan HTML5 ........................................... 25

M. Kelebihan dan Manfaat HTML5 ................................................. 25

BAB III. PENUTUP

A. Simpulan ...................................................................................... 29

B. Saran ............................................................................................ 31

C. Daftar Pusta. ................................................................................ 32

BAB I

PENDAHULUAN

A. LATAR BELAKANG MASALAH

Dalam memenuhi kebutuhan akan informasi di dunia maya, para developer website berlomba-lomba menyajikan berbagai macam layanan sehingga para pengguna akan betah berkunjung ke dalam websitenya. Dari masa-masa ke masa teknologi website mengalami perkembangan yang begitu pesatnya dan kini bahkan memberalihkan aplikasi dektop yang selama ini kita kenal menjadi aplikasi berbasis web.

Dalam masa kini banayak sekali aplikasi yang selama ini hanya sebatas akses di komputer dan harus diinstal terlebih dahulu, namun kini aplikasi website akan memberikan ruang pada kita untuk menikmati aplikasi misanya game online, sehingga tidak perlu lagi yang namanya instalasi kita cuma butuh yang namanya koneksi internet(terhubung ke internet).

Dalam perkembangan website tersebut tentu tidak terlepas dengan yang namanya script/tag HTML (Hypertext Markup Language). Untuk membangun sebuah website yang dinamis para web development harus sangat memahami konsep-konsep dasar dari HTML sendiri. Banyak orang bilang bahwa HTML itu bahasa yang mudah dan sederhana serta struktur yang sering pula di anggap remeh karena kemampuan HTML itu sendiri, jauh di bawah Java Script (client side) apalagi di bantingkan dengan script server side seperti PHP, ASP, ASPX, dan bahasa lain sebagainya.

perlu di ketahui HTML merupakan dokument standar yang di akses dengan menggunakan HTTP (Hypertext Tranfer Protocol) sebagai protokol yang berfungsi mengirimkan data dari web server ke web broser pada sisi klient.

B. RUMUSAN MASALAH

A. Apa Pengertian HTML5 ?

B. Bagaimana Sejarah Perkembangan HTML5

C. Apa Atribut dalam HTML5 ?

D. Seperti Apa Kompone-komponen dalam HTML5 ?

E. Teknologi Apa yang Diperkenalkan oleh HTML5 ?

F. Seperti Apa Elemen-elemen baru pada HTML5 ?

G. Bagaimana Perubahan Makna Elemen ?

H. Apa Saja Elemen dan Atribut yang Tidak di Pergunakan dalam HTML5 ?

I. Apa Saja Fitur-fitur yang Dimiliki HTML5 ?

J. Apa Tujuan Pembuatan HTML5 ?

K. Apa Perbedaan Antara HTML4 dan HTML5 ?

L. Apa Keunggulan Jika Menggunakan HTML5 ?

M. Apa Saja Kelebihan dan Manfaat HTML5 ?

C. TUJUAN

Makalah ini disusun Untuk memenuhi tugas dari Dosen mata kuliah Teknologi Informasi dan Komunikasi. Serta sebagai sarana untuk mengikuti

pesatnya perkembangan di bidang teknologi informasi dan komunikasi di masa sekarang, salah satunya pada salah satu bahasa bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua (www) yaitu HTML5 yang diperkirakan menjadi bahasa masa depan web dan banyak hal menarik yang dapat di pelajari menegenai HTML5. Dan untuk menambah wawasan serta ilmu kita dibidang Teknologi.

BAB II

PEMBAHASAN

A. PENGERTIAN HTML5

Meurut WikiPedia: HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, dimana itu merupakan sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama dalam pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin serta dapat mengurangi penggunaan plugin-plugin 3rd party pada HTML sehingga dapat mempercepat kinerja web itu sendiri. Plugin-plugin tersebut seperti Adobe Flash, Microsft Silverlight, Java dan lain-lainnya.

HTML5 merupakan salah satu karya Konsortium World Wide Web Consortium untuk mendefinisikan sebuah bahasa markah tunggal yang dapat ditulis dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan secara berbeda-beda oleh banyak perangkat lunak pembuat web.

HTML5 adalah hasil perbaharuan dari HTML (HyperText Markup Language) yang mana dikembangkan oleh W3C atau Word Wide Web Consortium. Sedangkan semantic merupakan bahasa pembelajaran semiotic, yakni pembelajaran untuk memahami penanda. Semantic sendiri mempunyai arti bahasa yang berfokus pada penanda untuk mengetahui arti yang terkandung di dalamnya. Jadi, yang dimaksud semantic web disini adalah bahasa pemrograman yang mempunyai penanda khusus dan implementasinya dengan tujuan agar mampu mendeskripsikan apa yang terkandung dalam website tersebut. Web semantic ini bukan hanya dikembangkan di Web 2.0, namun sudah ke Web 3.0 bahkan akan berkembang ke Web 4.0. hal tersebut sebagi salah satu bukti bahwa perkembangan teknologi sangat cepat mengalami kemajuan.

Di masa depan, format HTML5 akan menjadi sangat penting bagi penyedia layanan browser dan web desain, dalam memajukan alat perambannya menjadi lebih kaya aplikasi, web dan web desain yg interaktif dan menarik. Demikian pengakuan dari General Manager Internet Explorer (IE) Dean Hachamovitch.

Dalam spesifikasi HTML5 banyak menggambarkan dukungan dukungan video tanpa menetukan format video tertentu. Dimana H.264 merupakan suatu standar industri, dengan dukungan hardware yang luas dan kuat. Oleh karena itu standarisasi ini dapat dengan mudah menerima apa yang telah direkam. Walaupun dengan video pada kamera bias, yang kemudian diletakkan dalam situs dengan sistem operasi pada perangkat dengan dukungan H.264. dimana H.264 merupakan format yang baik untuk mendukung HTML5.

Meskipun demikian format video akan sangat menarik jika dipasangkan dengan H.264. Namun Hachamovitch mengakui bahwa mayoritas video internet saat ini masih didominasi dengan berbasis Flash. Dimana flash memang terdapat beberapa masalah, khususnya disekitar keandalan, keamanan, dan kinerja. Kendati demikian, saat ini flash tetap merupakan bagian penting dalam memberikan pengalaman konsumen yang terbaik disitus sampai saat ini.

B. SEJARAH PERKEMBANGAN HTML5

Awalnya HTML5 telah banyak dibicarakan sebagai masa depan Web, pada tahun 2008. Web akan menjadi lebih bebas dan terbuka dengan API yang disediakan oleh HTML5 yang akan membuka sebuah jalan.

Dalam kelompok kerja Teknologi Aplikasi Web Hyperteks (WebHypertext Application Technology Working Group, WHATWG) mulai membuat standar baru ini pada tahun 2004 ketika Konsortium W3C sedang fokus pada pengembangan XHTML 2.0 di masa depan, sementara HTML 4.01 belum pernah diperbarui sejak tahun 2000. Kemudian sejak tahun 2009, W3C dan WHATWG bekerja sama dalam pengembangan HTML5 setelah W3C mengakhiri Kelompok Kerja Pengembangan XHTML 2.0.

Walaupun HTML5 telah dikenal luas oleh para pengembang web sejak lama, HTML5 baru mencuat pada April 2010 setelah CEO Apple Inc., Steve Jobs, mengatakan bahwa dengan pengembangan HTML5. Sehingga Adobe Flash sudah tidak begitu dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun di web.

Google membuat sebuah langkah besar di akhir tahun 2010 dengan peluncuran Chrome Web Store di HTML5. Perusahaan lain seperti Pandora juga mulai bereksperimen dengan switching aplikasi mereka untuk HTML5, tapi telah mendapat sambutan hangat. LinkedIn adalah yang terbaru untuk bergabung dengan partai HTML5 dengan melepaskan sekitar 95% dari HTML5 asli aplikasi iPad.

Bahkan didalam sebuah penelitian menunjukkan bahwa akan ada lebih dari satu miliar HTML5 smart phone yang sesuai dan dapat dinikmati dipasaran. Dengan demikian orang akan semakin bergantung pada perangkat mobile untuk browsing Web dan anda memiliki awal revolusi HTML5.

C. ATRIBUT DALAM HTML5

HTML Attributes atau atribut HTML adalah suatu informasi elemen dapat memilki atribut, yang mana atribut ini memberikan informasi tambahan tentang elemen yang bersangkutan. Atribut selalu digunakan pada awal tag/start tag. Cara untuk medefinisakan atribut dengan memberikan informasi NAME dan VALUE dari suatu elemen, seperti name=”value“.

Dikenalkan pula ada 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.

Contoh Atribut :

Link HTML Links didefinisikan dengan tag <a>. Alamat link inilah yang merupakan atribut.

<a href="http://www.pemrograman.org/">Pemrograman</a>

Berikut adalah beberapa atribut standar yang hampir dipakai semua elemen:

Atribut	Nilai	Keterangan
Class	class_rule atau style_rule	Kelas elemen
Id	id_name	Nomor unik suatu elemen
Style	style_definition	Definisi gaya atau style
Title	tooltip_text	Tulisan yang akan tertampil pada tool tip

Nilai suatu atribut harus selalu dimulai dan diakhiri dengan tanda petik (“...”). yang mana tanda petik ini mengapit petikan langsung dari suatu nilai elemen Tanda petik tunggal juga diperlehkan untuk digunakan walaupun dalam keadaan tertentu nilai suatu atribut bisa berisi tanda kutip, untuk itu di pergunakan tanda kutip tunggal yang mengapit petikan yang tersusun di dalam petikan lain.

Contoh:
name=’Komunitas “Programmer” Indonesia’.

D. KOMPONEN-KOMPONEN DALAM HTML5

Dalam perkembangan standart bahasa markup website menuju HTML5 sudah ditunggu-tunggu developer web seluruh dunia. Meskipun belum dirilis secara resmi, banyak fitur HTML5 yang sudah diimplementasikan oleh browser-browser besar seperti Mozilla Firefox, Opera, Safari, dan Google Chrome.

Berikut ini adalah beberapa hal tentang HTML5 yang perlu diketahui, diantaranya :

1. Deklarasi doctype baru. Dalam membuat sebuah halaman dengan HTML5, tentu saja doctype yang digunakan juga harus benar. Doctype pada HTML5 jauh lebih sederhana daripada XHTML, sehingga Anda tidak perlu menghafalnya. Pada doctype untuk XHTML 1.0, Anda harus menuliskannya dengan panjang.

2. Struktur semantic. Pada XHTML, programmer HTML bisa saja menjadi pembuat stress programmer CSS karena struktur halaman yang dibuatnya. Harus ada kesepakatan penamaan yang solid antara kedua pihak agar tidak ada masalah pembacaan struktur halaman. Biasanya, dalam XHTML akan dibuat sebuah “div” dengan id-nya masing-masing.

HTML5 menawarkan elemen-elemen yang umum digunakan dalam sebuah struktur halaman website. Sehingga, penulisan tag setiap elemen dapat terlihat lebih semantic dan mudah dibaca, seperti pada gambar. Terdapat banyak manfaat jika menggunakan struktur seperti ini. Elemen “header” merepresentasikan header dari suatu section. Elemen “footer” juga merepresentasikan footer dari suatu section. Elemen “nav” cocok digunakan untuk merepresentasikan link navigasi. Sedangkan elemen “section” merepresentasikan suatu bagian generic dari dokumen

3. Contenteditable. Yaitu atribut baru dari HTML5 yang memungkinkan sebuah elemen untuk dimodifikasi langsung pada tampilan. Jika dikombinasikan dengan sedikit Javascript, fitur ini bisa menghasilkan sebuah mekanisme input yang cukup powerful namun mudah untuk dibuat.

4. Validasi email. Dengan validasi langsung di tampilan, maka dapat mencegah seseorang user untuk memanggil script website dengan input yang salah. Ini dapat mengurangi jumlah request yang tidak valid terhadap script program Anda. HTML5 menawarkan fitur validasi email secara langsung dengan mengubay type dari elemen input menjadi “email”. Namun hal ini sangat disanyangkan karena masih belum semua browser memberikan support untuk fitur ini.

5. Atribut required. Satu lagi untuk input pada HTML5, memungkinkan validasi pada sisi client terhadap input yang harus diisi. Dengan demikian, tidak diperlukannya lagi membuat fungsi javascript untuk melakukannya. Cukup menambahkan atribut “required” pada elemen “input”. Jika tombol submit ditekan, akan muncul pesan error.

6. Internet Explorer Hack. Seperti biasanya, Internet Explorer selalu terlambat dalam mengimplementasikan teknologi website terbaru, meski Microsoft selalu memiliki teknologi sendiri seperti silverlight untuk browsernya tersebut. Pada IE, secara default semua elemen akan ditampilkan secara “inline”. Untuk itu, Anda harus mendeklarasikan style tersendiri agar tampilan dapat seperti seharusnya.

7. Masih banyak elemen html5 lainnya seperti canvas, video, audio, mark, dan sebagainya. Setiap elemen akan berperilaku berbeda di setiap browser, karena memang standart resimnya belum dikeluarkan oleh W3C. Untuk melihat kompatibilitas browser terhadap HTML5 dan CSS3.

E. . TEKNOLOGI YANG DIPERKENALKAN HTML5

Teknologi yang diperkenalkan HTML5 diantaranya adalah API (Aplication Programming Interface). yaitu merupakan salah satu teknologi yang akan di usung oleh HTML5, dimana batasan-batsannya adalah :

1. Offline Data Storage

Dengan ini memungkinkan dapat mengakses data lama di browser dalam keadaan offline. Contoh offline data seperti yang kita membaca arsip e-mail pada program Outlook atau Thunderbird.

2. Geolocation

Dengan aplikasi ini dapat memungkinkan mengetahui lokasi geografis, sumber informasi di ambil dari GPS (Global Position System).

3. Drag and Drop

Aplikasi ini dapat memudahkan mendrag atau mendrop misalnya text, hyperlink, bahkan file di aplikasi dekstop sekalipun.

Dalam implementasinya akan memerlukan pemrogramanan Java Script untuk menjembatani penggunaan API ini.

F. ELEMEN-ELEMEN BARU HTML5

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

a. section serupa seperti h1-h6.

b. article bisa berupa entri blog atau tulisan konten.

c. aside menyajikan konten pelengkap.

d. header bisa menyajikan judul, deskripsi, bahkan nav untuk navigasi.

e. footer berisi catatan kaki seperti informasi hak cipta, penulis, kontak, dan sebagainya.

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

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

G. PERUBAHAN MAKNA ELEMEN

Beberapa perubahan makna dari elemen, yaitu :

a. 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.

b. Elemen strong menegaskan level kepentingan, bukan sekadar penekanan emphasis lagi.

c. Elemen hr dapat digunakan untuk memisahkan level paragraf sesuai pokok pikirannya.

H. ELEMEN DAN ATRIBUT YANG TIDAK DIPERGUNAKAN DALAM HTML5

Ada beberapa elemen dan atribut yang tidak lagi muncul pada HTML5. Diantaranya yaitu:

· center,

· font,

· strike, u, big,

· frame, frameset, noframes,

· acronym,

· longdesc,

· scope pada td,

· dan sebagainya.

Dengan kehadiran HTML5 memang akan dapat menggerakkan banyak hal, yang mana browser-browser akan beradaptasi untuk mendukungnnya, berbagai CMS mengarahkan developementnya untuk dapat ikut mengiplementasikan yang pada akhirnya peran pemakai internet di paksa untuk menggeser kebiasaan lama menjadi kebiasaan trendterbaru. Namun pada intinya yang berubah hanyalah tool dan caranya saja.

I. FITUR-FITUR YANG DIMILIKI HTML5

HTML5 merupakan hasil perbaharuan dari HTML. HTML5 memperkenalkan fitur-fitur baru yang dimilkinya dalam versi sebelumnya. Diantara fiturnya yaitu:

a. Video

Jika menonton sebuah video dengan koneksi yang tidak terlalu cepat atau dengan koneksi sedang dan dengan fitur ini sangat membantu sekali. Karena plugin eksternal seperti Adobe Flash dan Microsoft Silverlight sudah tidak dibutuhkan lagi semenjak kehadiran tag <video> pada HTML5. Dimana tujuannya untuk tag <video> digunakan untuk menyederhanakan kompleksitas penggunaan media video.

b. Canvas

Ini merupakan salah satu fitur yang paling menarik di HTML5. Fitur ini dapat digunakan oleh para web designer untuk menggambar langsung di website. Dulu, untuk bisa memberikan interaksi menggambar di halaman web, kita harus memakai applet Java atau Adobe Flash. Sedangkan pada HTML5 telah memiliki opsi yang sangat memudahkan para pembangun website dan menarik juga tentunya, yaitu tag <canvas>.

Tidak perlu lagi menggunakan plugin eksternal. Cukup tambahkan <canvas> dan Javascript maka kita sudah bisa menggambar langsung di halaman website. Anda hanya tinggal berimajinasi apa yang akan anda lakukan dengan tag <canvas>. Dipermudah bukan? Misalnya kita ingin menggambar sebuah kotak pada HTML5 dengan memanfaatkan fitur tag <canvas>, maka code lengkapnya adalah : <html>

<head>

<title>Menggambar Kotak dengan HTML5</title>

</head>

window.onload = function() {

var canvas = document.getElementById(‘myCanvas’);

var context = canvas.getContext(’2d’);context.beginPath(); // memanggil fungsi penggambaran

context.rect(188, 50, 200, 100);// menggambar kotak di koordinat 188,50 dengan lebar 200, tinggi 100.

context.fillStyle = ‘#8ED6FF’; // menentukan warna kotak

context.fill();// memberikan warna kotak dgn warna yg sudah ditentukan (baris ke-3)

context.lineWidth = 5; //menentukan lebar garis pinggiran kotak

context.strokeStyle = ‘black’;//menentukan warna pinggiran kotak

context.stroke();

//memberikan warna pinggiran kotak (warna sdh ditentukan pada baris 6)

};

</script>

</head>

<body>

</body>

</html>

Prinsip kerja dari demo screenshot <canvas> diatas adalah ketika mouse diarahkan kedalam kotak, partikel-partikel akan mengikuti kemanapun mouse tersebut diarahkan. Dan pada saat mouse diarahkan secara sembarangan didalam kotak, maka partikel-partikel tersebut akan bertebaran kemana-mana.

c. Audio

Fitur ini menyediakan tag baru untuk bisa memutar sebuah audio sesuai dengan yang apa yang diinginkan tanpa harus meyediakan plugin tambahan. Dengan menggunakan tag <audio> kita sudah dapat memasukkan beberapa file dengan ekstension .mp3 dan .ogg ke halaman website kita. Coba anda ketikkan kode berikut ini untuk melihat demo dari tag <audio>.

Browser anda tidak mendukung audio.

</audio>

d. Tag <placeholder>.

Fitur batu dari HTML5 ini terbilang masih jarang yang mengetahui kegunaannya. Sebelumya, ketika para web designer ingin membuat teks placeholder, dibutuhkan ratusan baris code ditambah dengan design yang harus dibuat terlebih dahulu. Kini, semua hal yang merepotkan itu tidak perlu dilakukan lagi. Sintax dasarnya adalah sebagai berikut :

e. DOCTYPE (versi ini lebih simple dari versi sebelumnya).

Doctype adalah singkatan dari “Document Type Declaration”. Kegunaanya adalah untuk mengidentifikasi jenis dokumen yang digunakan oleh sebuah situs sehingga browser kita mampu memperlakukan kode dari jenis dokumen itu sebagaimana mestinya. Doctype merupakan komponen penting dalam sebuah halaman web (css tidak akan berfungsi bila doctypenya tidak valid).

DOCTYPE pada HTML4

<!DOCTYPE html]>

DOCTYPE pada HTML5

perbandingan DOCTYPE pada HTML4 dan pada HTML5. Terlihat perbedaan yang sangat jelas sekali diantara keduanya. DOCTYPE pada HTML5 jauh lebih simple dan mudah untuk diingat bukan? Jadi ucapkan selamat tinggal pada DOCTYPE HTML versi sebelumnya yang sangat rumit dan susah untuk diingat.

f. Tag <nav>

Elemen tag baru ini digunakan untuk menu pada navigasi. Jadi, tag <div> yang pada versi HTML sebelumnya masih digunakan, pada HTML5 sudah digantikan oleh tag <nav>. Tag <nav> dapat digunakan diluar atau didalam elemen lainnya. Contoh code-nya adalah sebagai berikut :

<nav>

<ul>

<li><a href=”#”>About</a></li>

<li><a href=”#”>Portfolio</a></li>

<li><a href=”#”>Contact</a></li>

</ul>

</nav>

g. Tag <section> dan <article>

Tag <section> digunakan untuk mengelompokkan elemen yang sejenis. Misalnya : kita ingin menampilkan beberapa artikel dalam satu halaman, maka kita dapat menggunakan tag <section>.Tag <article> juga digunakan untuk menampilkan satu artikel penuh dalam suatu halaman html.

Untuk mempermudah pemahaman, bayangkan saja pengertian dari artikel. Artikel biasanya terdiri dari judul, sub judul (jika ada), catatan dan deskripsi. Berikut ini adalah contoh penerapan code <section> dan <article> untuk menambah pemahaman anda.<section>

<h1>Artikel Terbaru</h1>

<h2>Review Laskar Pelangi</h2>

<small>Ditulis pada <time datetime=”2012-03-29″>29 Maret 2012</time> oleh Amalia Amanda</small>

<p>Jelly beans cake cotton candy sweet chocolate candy canes sesame snaps. Sweet roll liquorice ice cream tart chocolate bar gingerbread chupa chups wypas. Gummies ice cream tiramisu bonbon. Gummies sugar plum jelly beans. Pudding croissant jelly-o marshmallow candy wypas jelly-o.</p>

<p>Cupcake sesame snaps pie candy canes soufflé. Brownie tart jelly. Wypas cheesecake danish candy chupa chups cookie cheesecake. Tiramisu sugar plum bear claw wafer faworki chocolate fruitcake. Sugar plum wafer jujubes. Caramels powder cotton candy dragée marzipan apple pie soufflé wypas dragée. Muffin cookie macaroon danish marzipan chocolate bar powder chocolate cake chocolate bar.</p>

</article>

</section>

h. Tag <footer>

Tag <footer> digunakan dibagian bawah sebuah halaman website. Isi dari tag <footer> biasanya berupa info konten seperti copyright, author website atau navigasi.

Berikut ini merupakan penerapan dari tag <footer>.

</footer>

i. Tag <figure> dan <figcaption>.

Tag <figure> digunakan untuk menampilkan sebuah gambar sedangkan <figcaption> adalah caption/keterangan dari gambar tersebut. Jika mengikuti aturan semantik yang sebenarnya, tag <figure> digunakan untuk menampilkan gambar yang ada hubungannya dengan konten artikel yang dibuat. Jadi, tag <figure> tidak disarankan untuk iklan yang berbentuk gambar pada suatu website yang tidak ada hubungannya sama sekali dengan artikel yang dibuat. Contoh penerapan tag <figure> dan <figcaption> pada potongan code website adalah sebagai berikut :

<p>Laskar Pelangi, sebuah cerita indah</p>

</figcaption>

</figure>

j. Tag <hgroup>.

Tag <hgroup> digunakan untuk tittle dan subtittle dengan tag heading seperti <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Untuk lebih jelasnya, berikut ini merupakan contoh penerapannya :

<h1>Review Laskar Pelangi</h1>

<h2>Cerita Masa Kecil yang Menggugah Hati</h2>

</hgroup>

</header>

k. Geolocation

Melacak posisi user bukanlah hal baru di internet, misalnya menggunakan IP addres detection. Namun metode ini tidak selalu dapat diandalkan. Dengan HTML5 dan javascript, posisi user dapat dilacak menggunakan informasi dari Wi-Fi dan GPS. Mirip seperti yang digunakan pada Smartphone.

l. Offline Web Application

HTML5 memungkinkan User untuk terus berinteraksi dengan aplikasi web tanpa harus selalu online. Misalnya mengedit dokumen pada google docs atau mengedit foto di situs olah gambar seperti picnic.com

J. TUJUAN PEMBUATAN HTML5

Dimana tujua-tujuan dibuatnya web adalah sebagai berikut :

1. HTML5 merupakan perangkat mandiri

2. Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript

3. Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash )

4. Penanagan kesalahan yang lebih baik

5. Lebih markup untuk menggantikan scripting

6. Proses pembangunan dapat terlihat untuk umum

Contoh Browser yang Menggunakan HTML5:

1. Google Chrome

2. Safari Applev.+

3. Internet Exploree 9

4. Firefox 4,5,6 dan seterusnya

Contoh Situs yang Menggunakan HTML5:

http://michaelacevedo.com/

http://html5.iaraby.com/

http://benthebodyguard.com/index-b.php

http://wantist.com/

http://mahardikhareza.blogspot.com/2011/11/apa-itu-html-5.html

K. PERBEDAAN ANTARA HTML4 DAN HTML5

Berikut adalah perbedaan antara HTML 5 dengan HTML 4 maupun XHTML:

Aturan baru saat melakukan parsing berorientasi pada towards dan kompatibilitas; tidak berbasis pada SGML.Kemampuan untuk mendukung format SGV dan MathML pada text/html
Elemen baru: article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt,ruby, section, source, summary, time, video, wbr
Tipe baru pada kontrol form : dates and times, email, url, search, color
Atribut baru: ping (pada elemen a and area), charset (pada meta), async (pada script)
Atribut global (atribut berikut dapat diterapkan pada setiap elemen html) : id, tabindex, hidden, data-* (atribut data kustom)
Selain dapat bernilai GET atau POST, elemen attribut <form> kini telah mendukung nilai PUT dan DELETE.
Elemen yang telah deprecated secara bersamaan akan dihapus : acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, s, strike, tt, u
Bentuk doctype HTML 5 lebih sederhana, yaitu <!DOCTYPE html> , bandingkan dengan XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

L. KEUNGGULAN MENGGUNAKAN HTML5

Beberapa keunggulan diantaranhya, yaitu:

a. Dapat ditulis dalam sintaks HTML (dengan tipe media text/HTML) danXML.

b. Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya.

c. Integrasi ('inline') dengan doctype yang lebih sederhana.

d. Penulisan kode yang bisa dibilang lebih efisien.

e. Konten yang ada di situs lebih mudah terindeks oleh search engine.

M. KELEBIHAN DAN MANFAAT HTML5

Beberapa kelebihan yang terdapat pada HTML5 diantaranya, yaitu:

1. Dapat ditulis dalam sintaks HTML (dengan tipe media text/html) dan XML.

2. Integrasi yang lebih baik dengan aplikasi web dan pemrosesannya.

3. Inegrasi (’inline’) MathML dan SVG doctype yang lebih sederhana.

4. Penulisan kode yang lebih efisien.

5. Dapat mudah dimengerti oleh perambah lawas (backwards ompatible). Sehingga istilah ‘deprecated’ tidak akan diperlukan lagi.

Manfaat Menggunakan HTML5

Pada dasarnya HTML5 adalah sebuah versi terbaru dari HTML atau Hypertext Markup Language. Ini adalah kode yang digunakan untuk menggambarkan halaman web. Ini merupakan tiga jenis kode: HTML yang menyediakan struktur, CSS-Cascading Style Sheets yang bertanggung jawab untuk dapatberpresentasi dan ada JavaScript yang membuat segalanya terjadi. Ini adalah evolusi terbaru dalam dunia HTML dan merupakan tulang punggung sebagian besar situs di internet. Yang terakhir versi utama dari bahasa adalah HTML4 yang telah didorong dan menyodok dalam rangka memenuhi kebutuhan desain web modern.

Idealnya, ada banyak manfaat yang ditawarkan oleh versi baru ini. Seiring waktu, web designer telah tweak, ditambah dan membentang HTML4 luar jangkauan aslinya dalam upaya mereka meningkatkan multimedia dan interaktivitas dalam website. Sementara plugin seperti Java, Silverlight dan Flash telah berhasil mengintegrasikan media di web, walaupun datang dengan beberapa biaya.

HTML5 tidak hanya menambah banyak fitur penting untuk website yang HTML4 tidak dapat menawarkan, tetapi juga arus fungsi website untuk mempromosikan pengalaman pengguna yang lebih baik. Yang paling banyak menuai pujian pada fitur baru yang ditawarkan oleh HTML5 adalah penyimpanan offline dan pemutaran. Hal ini memungkinkan situs media menanamkan langsung dengan tag HTML sederhana seperti audio dan video tanpa memerlukan plugin. HTML5 untungnya didukung oleh semua browser besar seperti Internet Explorer, Chrome, Firefox, Opera dan Firefox meskipun pemilihan fitur yang didukung berbeda dari satu browser yang lain.

Selain keuntungan-keuntungan tersebut, HTML5 Design menawarkan banyak manfaat lainnya yang seharusnya membuat Anda berpikir tentang menggunakan versi ini dalam situs web.

· Pemberian pertolongan

Untuk meningkatkan kegunaan, web designer saat membuat website yang sangat interaktif dengan memasukkan memutar musik dan pilihan streaming video, animasi cairan dan situs jejaring sosial seperti Twitter dan Facebook di situs tersebut. Namun, sebelum HTML5 debut, mereka hanya bisa melakukannya dengan menggunakan Silverlight atau Flash, JavaScript atau Flex alat yang tidak hanya membuat aplikasi web lebih rumit, tetapi juga dikonsumsi banyak waktu. Namun, HTML5 Desain membuatnya lebih mudah untuk menanamkan audio dan video, animasi berkualitas tinggi, grafik dan gambar nyaman tanpa perlu menggunakan program pihak ketiga lainnya atau plugin.

· Peningkatan semantik

Berkat HTML5, sekarang mudah untuk melihat header, footer, nav dan bagian lain dari halaman web sebagai tag sekarang lebih spesifik dan memahami tujuan utama mereka dan makna seluruh format yang. Kode desain web sangat standar sehingga meningkatkan semantik.

· Kode Peningkatan

Dengan menggunakan HTML5, web designer dan pengembang menikmati bekerja dengan rapi dan kode bersih dengan menghapus sebagian besar tag div di situs.

· Konsistensi

Sebagai website mengadopsi unsur-unsur baru dari HTML5, hal ini membantu untuk mencapai konsistensi yang lebih besar ketika datang untuk menggunakan HTML dalam pengkodean halaman web. Dengan demikian, HTML5 Desain jauh lebih mudah dan dimengerti dan desainer dapat dengan mudah mengetahui struktur dari halaman web.

· Bentuk elegan

Web desainer dapat menggunakan bentuk pengujian dan HTML5 juga membuat validasi bentuk asli ke HTML, meningkatkan antarmuka pengguna dan mengurangi kebutuhan untuk JavaScript dalam pengembangan website.

Manfaat utama lainnya yang terkait dengan HTML5 seperti dukungan Geolocation dan meningkatkan aksesibilitas dari halaman web. Ini hanya menyoroti manfaat dari HTML5 dan para ahli percaya bahwa HTML5 akan berkembang menjadi bahasa pengembangan secara online penting dalam waktu dekat.

BAB III

PENUTUP

A. SIMPULAN

Tak dapat dipungkiri bahwa tuntutan zaman yang semakin maju dan berkembang telah banyak melahirkan perbaharuan khususnya di bidang teknologi. Termasuk dalam suatu bahasa dalam komputer yaitu HTML5 yang merupakan hasil perbaharuan dari HTML4.

HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari Internet. 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 telah dipandang sebagai masa depan Web. dengan kedatangan yang kedua, kita tidak lagi harus dibatasi oleh adopsi plug-in seperti individu Flas . Web akan menjadi lebih bebas dan terbuka dengan API yang disediakan oleh HTML5 yang akan membuka jalan.

HTML5 hadir dengan beberapa kelebihan yang dapat memudahkan kita dalam menikmati layanan dalam internet, seperti:

a. Dapat ditulis dalam sintaks HTML (dengan tipe media text/html) dan XML.

b. Integrasi yang lebih baik dengan aplikasi web dan pemrosesannya.

c. Integrasi (’inline’) MathML dan SVG dengan doctype yang lebih sederhana.

d. Penulisan kode yang lebih efisien.

e. Dapat dimengerti oleh peramban lawas (backwards compatible). Sehingga istilah ‘deprecated’ tidak akan diperlukan lagi.

Kepopuleran HTML5 sebagai bahasa pemrograman aplikasi sangat tinggi belakangan ini. Kemudahan dalam proses pembelajarannya menjadi salah daya tarik tersendiri bagi pengembang aplikasi di seluruh dunia. Selain itu kemampuannya untuk bisa berjalan di banyak sistem operasi desktop, hingga mobile membuat HTML5 sebagai pilihan utama ketika ingin meluncurkan sebauah produk secara cepat dan bisa cross platfrom. Intel juga turut meramaikan ranah ini dengan menghadirkan sebuah tools pengembangan HTML 5 yang di beri nama Intel XDK.

B. SARAN

Dalam pangsa pasar global teknologi, tentu menghadirkan banyak sekali pilihan dengan menawarkan kelebihan serta keunggulannya dari masing-masing poduk, jadi pelajari dulu produk yang akan dipilih. Sehingga dapat mengetahui kekurangan serta kelebihannya.