Makalah ini membahas tentang HTML5, mulai dari sejarah perkembangannya, pengertian, fitur-fitur baru, dan contoh penerapannya. HTML5 merupakan revisi kelima dari standar HTML yang memperkenalkan dukungan untuk multimedia baru seperti video dan audio serta antarmuka pemrograman baru untuk aplikasi web yang lebih kompleks.
1. MAKALAH HTML5
DI SUSUN OLEH :
RISTIANAWATI
2114R0800
BAB I
PENDAHULUAN
A. Latar Belakang
Perkembangan teknologi dari tahun ketahun semakin cepat. Dari mulai
handphone, laptop, tablet, dan berbagai gadget lainnya selalu ada perubahan dan
semakin memanjakan pengguna. Dari tahun ketahun perkembangan teknologi seakan
membuat para pengguna menjadi ketergantungan dan dimanfaatkan teknologi itu
sendiri.
Saat ini, yang mempunyai lingkungan yang semakin luas dan banyak diminati, juga
dapat digunakan untuk menghasilkan uang adalah dunia pemrograman komputer.
Dalam dunia pemrograman komputer, dikenal banyak bahasa pemrograman, salah
satunya adalah HTML5. HTMl5 merupakan salah satu bahasa pemrograman yang
digemari oleh para pembuat website, karena dengan menggunakan HTML5 website
akan menajadi lebih menarik dan lebih bagus. Oleh karena itu disini penulis akan
mengupas tuntas segala macam tentang HTML5 dalam makalah ini.
B. Rumusan Masalah
1. Bagaimana sejarah perkembangan HTML5?
2. 2. Apakah HTML5 itu?
3. Apa saja fitur-fitur yang diberikan HTML5?
4. Apa saja Tag-tag HTML5?
5. Apa saja kelebihan dan kekurangan HTML5?
6. Berikan contoh-contoh website yang menggunakan HTML5?
C. Tujuan
Tujuan pembuatan makalah ini yaitu agar pembaca dapat mengenal lebih dalam
seputar perkembangan teknologi bahasa pemrograman HTML5 dari mulai sejarah
sampai contoh-contoh website menggunakan HTML5.
D. Manfaat
Saya berharap makalah ini dapat bermanfaat bagi para pembaca, yang tadinya
belum mengerti bahasa pemrograman HTML5 menjadi lebih mengerti dan mungkin
justru bias membuat website menggunakan HTML5.
BAB II
PEMBAHASAN
1. Sejarah HTML5
HTML5 yang merupakan standar baru dari HTML pasti mempunyai sejarah
sebelum terbentuknya HTML5 tersebut. Dimulai dari The Web Hypertext Application
Technology Working Group (WHATWG), mulai bekerja pada standar baru pada tahun
2004. Pada saat itu, HTML 4.01 belum diperbarui sejak tahun 2000, dan World Wide
Web Consortium (W3C) telah memfokuskan pada perkembangan masa depan XHTML
2.0. Pada tahun 2009, W3C memperbolehkan XHTML 2.0 dengan hak istimewa Working
Group untuk berakhir dan memutuskan untuk tidak memperbaharui itu. W3C dan
WHATWG saat ini bekerja sama pada pengembangan HTML5.
Sementara HTML5 sering dibandingkan dengan Flash, tetapi kedua teknologi
tersebut sangat berbeda. Keduanya termasuk fitur untuk memutar audio dan video
dalam halaman web, dan untuk menggunakan Scalable Vector Graphics. HTML5 sendiri
tidak dapat digunakan untuk animasi dan interaktivitas, tapi itu harus dilengkapi dengan
CSS3 atau JavaScript. Ada kemampuan Flash banyak yang tidak memiliki mitra langsung
dalam HTML5.
Meskipun HTML5 telah terkenal di kalangan pengembang web selama bertahun-tahun,
itu menjadi topik media yang mainstream sekitar April 2010 setelah Apple Inc
kemudian CEO Steve Jobs mengeluarkan surat terbuka berjudul "Pemikiran tentang
3. flash" di mana ia menyimpulkan bahwa "Adobe Flash tidak lagi diperlukan untuk
menonton video atau mengkonsumsi segala jenis konten web" dan bahwa "standar
terbuka baru yang diciptakan di era mobile seperti HTML5, akan menang". Ini memicu
perdebatan di kalangan pengembangan web dimana beberapa menyarankan bahwa
sementara HTML5 menyediakan fungsi yang disempurnakan, pengembang harus
mempertimbangkan mendukung browser berbagai bagian yang berbeda dari standar
serta perbedaan fungsi lainnya antara HTML5 dan Flash. Pada awal November 2011,
Adobe mengumumkan bahwa mereka akan menghentikan pengembangan flash untuk
perangkat mobile dan reorientasi upaya dalam mengembangkan alat memanfaatkan
HTML5.
a. Proses standardisasi w3c
Kelompok kerja untuk teknologi aplikasi web hypertext (WHATWG) mulai
menspesifikasikan HTML5 pada bulan juni 2004 dengan nama Web Applications 1.0. hingga
pada bulan maret 2010 spesifikasi ini masuk ke bagian draft standar di WHATWG, dan ke dalam
bagian pengurusan draft di W3C. Ian Hickson mewakili Google ,Inc menjadi editor HTML5.
Pada tahun 2007 Spesifikasi HTML5 diadopsi sebagai pekerjaan permulaan untuk grup baru
yang mengurus HTML di World Wide Web Consorsium (W3C). Grup ini pertama kali
mempublikasikan hasil draft pekerjaan pertama mereka pada tanggal 22 januari 2008.
Spesifikasi ini berstatus dalam tahap pengerjaan, dan diperkirakan akan tetap demikian selama
bertahun-tahun, meskipun sebagian dari HTML5 sudah dalam tahap penyelesaian dan
diimplementasikan pada penjelajah web sebelum keseluruhan spesifikasinya mencapai status
rekomendasi final.
Berdasarkan pada jadwal kerja W3C, HTML5 diperkirakan menjadi kandidat rekomendasi pada
akhir tahun 2010. Namun, publikasi pertama draft HTML 5 meleset selama 8 bulan. Permintaan
dokumen terakhir dan tahap kandidat rekomendasi diharapkan dapat dicapai pada tahun
2008, tetapi hingga bulan Juli 2010 HTML 5 masih dalam tahapan draft pengerjaan di W3C.
WHATWG telah meminta penyelesaian terakhir untuk HTML5 sejak bulan oktober tahun 2009.
Editor HTML5, Ian Hickson, berharap spesifikasi HTML5 dapat mencapai tahap kandidat
rekomendasi pada tahun 2012. Kriteria di W3C agar sebuah spesifikasi dapat berstatus -
Direkomendasikan - adalah "yang kedua: 100% selesai dan penerapannya dapat dilakukan pada
dua atau lebih sistem yang berbeda". Pada wawancaranya dengan TechRepublic, Hickson
memperkirakan hal ini baru akan terjadi pada tahun 2022 atau setelahnya. Meski demikian,
banyak bagian dari spesifikasi sudah stabil dan telah dapat diterapkan pada produk.
b. Markup
4. Pada HTML 5 diperkenalkan beberapa elemen baru dan atribut yang merefleksikan
tipikal penggunaan website modern. Beberapa diantaranya adalah pergantian yang
bersifat semantik pada blok yang umum digunakan: yaitu elemen (<div>) dan inline (<span>),
sebagai contoh (<span>) (sebagai blok navigasi website) dan <footer> (biasanya dikaitkan pada
bagian bawah suatu website atau baris terakhir dari kode html). Banyak elemen lain yang
memberikan kegunaan baru melalui antar muka yang telah distandarkan, seperti elemen
multimedia <audio> dan <video>. Beberapa elemen yang telah ditinggalkan juga ditiadakan,
termasuk elemen presentasi semata seperti <font> dan <center>, yang sebenarnya dapat
dikerjakan menggunakan Cascading Style Sheet (CSS).
c. Api baru
Untuk menambah keluwesan pemformatan, pada HTML5 telah dispesifikasikan
pengkodean application programming interfaces (APIs) . antarmuka document object model
(DOM) yang ada dikembangkan dan fitur de facto didokumentasikan. Beberapa API terbaru
pada HTML5 antara lain :
2D Drawing API, adalah API yang dapat digunakan untuk manipulasi image 2D yang
terintegrasi dengan elemen canvas.
Audio and Video API, adalah API yang dapat digunakan untuk memutar dan
memainkan media Video dan Audio. API ini sudah terintegrasi dengan elemen audio
dan video dari HTML 5.
API yang memungkinkan untuk membuat offline web application.
API yang memungkinkan web application dapat meregister sendiri untuk beberapa tipe
protokol dan media.
Editing API di kombinasikan dengan atribut content editable global yang baru.
Drag and Drop API di kombinasikan dengan atribut drag-able.
API yang dapat mengekspos histori dari browser untuk menambahkan halaman web
yang sedang di akses sehingga bisa menambahkan tombol Back di halaman web.
Cross-document messaging.
Prinsip dari API yang disediakan dari HTML 5 ini adalah agar developer lebih mudah
dalam membuat sebuah aplikasi web dengan ini user dan developer atau programmer
karena dapat menciptakan aplikasi web yang penuh fitur pada offline environment.
Tidak semua teknologi di atas dimasukkan pada spesifikasi HTML5 W3C, meski teknologi
tersebut telah termaktub dalam spesifikasi milik WHATWG HTML. Beberapa teknologi yang juga
terkait namun tidak dijadikan bagian dalam spesifikasi HTML5 W3C dan WHATWG HTML5
adalah :
Geolocation
5. Web SQL Database, media penyimpanan database lokal.
API Database terindeks, mode penyimpanan hierarkis key-value (WebSimpleDB).
Web Speech API.
d. First Public Working Draft
WHATWG menerbitkan Pertama Kerja Draft Publik spesifikasi pada 22
Januari 2008. Bagian dari HTML5 telah dilaksanakan di browser meskipun
seluruh spesifikasi belum telah mencapai status Rekomendasi akhir.
e. Last Call
Pada tanggal 14 Februari 2011, W3C. Pada Mei 2011 , kelompok kerja canggih
HTML5 untuk "Last Call", undangan kepada masyarakat dalam dan di luar W3C untuk
mengkonfirmasi kesehatan teknis dari spesifikasi. W3C sedang mengembangkan tes
lengkap, untuk mencapai interoperabilitas luas untuk spesifikasi lengkap pada tahun
2014, yang sekarang tanggal target Rekomendasi. Pada bulan Januari 2011, WHATWG
berganti nama nya "HTML5" standar hidup untuk "HTML". W3C tetap melanjutkan
proyek untuk melepaskan HTML5.
f. Calon Rekomendasi
Pada bulan Juli 2012, WHATWG dan W3C memutuskan pada tingkat pemisahan.
W3C akan melanjutkan HTML5 spesifikasi pekerjaan, berfokus pada standar definitif
tunggal, yang dianggap sebagai "snapshot" oleh WHATWG. Organisasi WHATWG akan
melanjutkan pekerjaannya dengan HTML5 sebagai "Standar Hidup". Konsep standar
hidup adalah bahwa hal itu tidak pernah lengkap dan selalu diperbarui dan ditingkatkan.
Fitur baru dapat ditambahkan tapi fungsi tidak akan dihapus. Pada bulan Desember
2012, W3C HTML5 ditunjuk sebagai Calon Rekomendasi. Kriteria untuk kemajuan ke
Rekomendasi W3C "100 % selesai dan sepenuhnya interoperable implementasi"
2. Pengertian HTML5
Html5 adalah bahasa markup untuk penataan dan penyajian konten untuk World
Wide Web dan teknologi inti dari Internet. Ini adalah revisi kelima dari standar HTML
(dibuat pada tahun 1990 dan standar sebagai HTML 4 per 1997) dan, pada Desember
2012, adalah Rekomendasi Calon W3C. Tujuan utamanya telah meningkatkan bahasa
dengan dukungan untuk multimedia terbaru sambil menjaga mudah dibaca oleh
manusia dan secara konsisten dipahami oleh komputer dan perangkat (web browser,
parser, dll). HTML5 dimaksudkan untuk menggolongkan tidak hanya HTML 4, tetapi
XHTML 1 dan DOM Level 2 HTML.
Setelah pendahulunya terdekatnya HTML 4.01 dan XHTML 1.1, HTML5 adalah
respon terhadap pengamatan bahwa HTML dan XHTML umum digunakan pada World
Wide Web adalah campuran dari fitur diperkenalkan oleh berbagai spesifikasi, bersama
6. dengan orang-orang yang diperkenalkan oleh produk perangkat lunak seperti web
browser, yang didirikan oleh praktek umum, dan kesalahan sintaks banyak dokumen
web yang ada. Ini juga merupakan upaya untuk mendefinisikan bahasa markup tunggal
yang dapat ditulis baik dalam HTML atau sintaks XHTML. Ini termasuk model
pengolahan rinci untuk mendorong implementasi yang lebih interoperable, melainkan
meluas, meningkatkan dan rationalises markup tersedia untuk dokumen, dan
memperkenalkan markup dan antarmuka pemrograman aplikasi (API) untuk aplikasi
web yang rumit. Untuk alasan yang sama, HTML5 juga. potensial kandidat untuk cross-platform
aplikasi mobile. Banyak fitur dari HTML5 telah dibangun dengan pertimbangan
untuk dapat dijalankan pada perangkat bertenaga rendah seperti smartphone dan
tablet.
Pada Desember 2011, perusahaan riset Strategy Analytics memperkirakan
penjualan ponsel HTML5 kompatibel akan atas 1 miliar pada tahun 2013.
Secara khusus, HTML5 menambahkan banyak fitur baru sintaksis. Ini termasuk <video>
baru, <audio> dan elemen <canvas>, serta integrasi scalable vector grafis konten (SVG)
(yang menggantikan penggunaan tag generik <object>) dan MathML untuk rumus
matematika. Fitur-fitur ini dirancang untuk memudahkan untuk memasukkan dan
menangani konten multimedia dan grafis di web tanpa harus resor untuk plugin
proprietary dan API. Elemen baru lainnya, seperti <section>, <article>, <header> dan
<nav>, dirancang untuk memperkaya isi semantik dokumen. Atribut baru telah
diperkenalkan untuk tujuan yang sama, sementara beberapa elemen dan atribut telah
dihapus. Beberapa elemen, seperti <a>, <cite> dan <menu> telah diubah, atau
didefinisikan ulang standar. API dan Document Object Model (DOM) tidak afterthoughts
lagi, tetapi bagian fundamental dari spesifikasi HTML5. HTML5 juga mendefinisikan
secara rinci proses yang diperlukan untuk dokumen yang tidak valid sehingga kesalahan
sintaks akan diperlakukan secara seragam oleh semua browser conforming dan agen
pengguna lainnya.
Tujuan dibuatnya HTML5 antara lain:
1. Fitur baru harus didasarkan pada HTML, CSS, DOM , dan JavaScript.
2. Mengurangi kebutuhan untuk plugin eksternal (seperti Flash).
3. Penanganan kesalahan yang lebih baik.
4. Lebih banyak markup untuk menggantikan scripting.
5. HTML5 merupakan perangkat mandiri
Vokabular HTML dari jaman sebalumnya (HTML+, HTML 2.0, HTML 3.2) umumnya ditulis
menggunakan aturan sintak SGML. Pada HTML 4 telah diterapkan dua sintak yaitu:
SGML (disebut sebagai HTML 4.01) dan XML (disebut XHTML 1.0).
Halaman Web yang Biasa ditulis Dengan HTML 4:
8. </div>
<div id="footer"><p>Copyright 2008 Hobo Web LTD</p>
</div>
</div>
</body>
</html>
Contoh Halaman Web yang Ditulis dengan HTML5:
<html> <head>
<title>Hobo Web LTD Scotland</title>
</head>
<body>
<header>
<h1><a href="http://blog/">Hobo Web</a></h1>
</header>
<section>
<article>
<h2><a href="/test-page/">
Test Page 1</a></h2> <p>Article Text here</p>
</article>
<article>
<h2><a href="/test2/">
Test 2</a></h2>
<p>Article Text 2 here</p>
</article>
<nav>
<a href="/blog/page/2/">« Previous Entries</a>
</nav>
</section>
<nav>
<ul>
<li><h2>Hobo Stuff</h2>
<ul>
<li><a href="/blog/comment-policy/">Comment Policy</a></li>
<li><a href="/blog/todo-list/">Todo List</a></li>
</ul></li>
<li><h2>Archives</h2>
<ul>
<li><a href='/blog/2008/04/'>April 2008</a></li>
<li><a href='/blog/2008/03/'>March 2008</a></li>
<li><a href='/blog/2008/02/'>February 2008</a></li>
<li><a href='/blog/2008/01/'>January 2008</a></li>
</ul>
</li>
</ul>
9. </nav>
<footer>
<p>Copyright 2008 Hobo Web LTD</p>
</footer>
</body>
</html>
HTML 5 mendefinisikan kelima revisi besar bahasa inti dari World Wide Web –
HTML dari W3C (World Wide Web Consortium). Juga disebut Aplikasi Web 1.0 – masih
ada tidak ada ruang nama atau skema. Unsur tidak harus ditutup. Browser akan
mengampuni kesalahan. Sebuah p masih p, dan meja masih meja.
HTML 5 menambahkan unsur-unsur baru untuk secara khusus mengidentifikasi masing-masing
konstruksi umum:
1. Section: Sebuah bagian atau bab dalam sebuah buku, sebuah bagian dalam
sebuah bab, atau pada dasarnya apa pun yang memiliki pos sendiri dalam HTML
4
2. Header: header Halaman yang ditampilkan pada halaman , tidak sama dengan
unsur kepala
3. Footer: Halaman footer di mana baik cetak pergi; tanda tangan dalam sebuah
pesan e-mail
4. Nav: Koleksi link ke halaman lain
5. Article: Sebuah entri independen dalam sebuah blog, majalah, ringkasan, dan
sebagainya
3. Fitur HTML5
a. Penambahan input type & Validasi Form
Sebelum HTML5, sangat susah memvalidasi Form. Misalkan sebuah input tidak
boleh kosong, input harus angka dan input yang valid diantara 1 sampai 100. Untuk
membuat validasi tersebut kita menggunakan javascript atau PHP di server yangmana
masing masing programmer dan framework mempunyai caranya sendiri sendiri. Dengan
adanya HTML5 maka validasi sudah langsung ditangani oleh HTMl5.
Masih di Form, form tidak terbatas pada type text, password, file dan Hidden,
HTML5 menambahkan input tipe telepon, url, email,number, range, color, date dan
image. Dengan berbagai range input yang luas, maka form di HTML5 menjadi cikal
bakal aplikasi berbasis web yang lebih populer dengan nama HTML5 App atau WebApp.
b. Native Audio dan Video
Sejak era 2000-an, audio dan video di internet tidak mempunyai standar. Kebanyakan
audio menggunakan plugin itunes atau realplayer sedangkan video player menggunakan Flash
10. atau silverLight . Era plugin sudah berakhir, HTML5 menghadirkan Native audio dan Video
Codec langsung didalam browser. Tidak ada lagi namanya udpate plugin atau browser crash
karena plugin error.
c. Canvas
Canvas adalah fitur yang menarik. Bahasa mudahnya, dengan canvas kita
bisamengambar atau menampilkan animasi langsung di browser. Lihat demonya disini.
g. Offline Support
Salah satu kelemahan dari aplikasi web adalah harus selalu online. HTML5 bisa bekerja
walaupun tidak ada koneksi. Silahkan coba menggunakan beberapa aplikasi di Google chrome
webstore seperti Google Docs dan Aplikasi Note. Dua aplikasi web ini bisa tetap berjalan
walaupun tidak tersedia koneksi internet.
h. Drag & Drop
Kelebihan dari desktop adalah kemampun memindah atau mengkopi file cukup dengan
“drag & drop”. Sekarang Web bisa melakukan hal yang dulu hanya bisa dilakukan di Desktop.
Salah satu web yang sudah menggunakan fitur ini adalah dropbox. Untuk mencobanya, buat
akun di dropbox dan silahkan di upload image dengan cara mendrag file didesktop ke Halaman
Dropbox, maka secara otomatis file akan terupload. Untuk mendonload cukup drag file yang
ada di web dropbox ke desktop. Cool kan?
i. Mengakses Hardware.
Sebagian orang tidak mau membuat aplikasi web karena web tidak punya akses ke
hardware. Yakin? sekarang bisa. HTML5 bisa mengakses Mic, Kamera dan Filesystem , Orientasi
device (landscape atau potrait) dan Lokasi GPS langsung tanpa perlu plugin. cek
demonya disini.
Masih ada beberapa fitur tambahan seperti Notifikasi gaya desktop, keamanan,
WebRTC, Microdata, PageVisibility, Fullscreen support, Web socket, History API, HTML
editing, spellcheck WebGL dan beberapa teknologi web yang masih dikembangkan. Nah,
gimana? HTML5 bukan hanya menambah syntax ke bahasa HTML, namun menambahkan
Puluhan fitur yang memungkinkan programmer web membuat aplikasi seperti desktop hanya
dengan HTML dan teman temannya (CSS, JS, webAPI dll).
4. Tag HTML5
Nama Tag Keterangan / Kegunaan
Basic
11. <!DOCTYPE> Tag untuk menentukan tipe dokumen
<html> Tag untuk membuat sebuah dokumen HTML
<title> Tag untuk membuat judul dari sebuah halaman
<body> Tag untuk membuat tubuh dari sebuah halaman
<h1> to <h6> Tag untuk membuat heading
<p> Tag untuk membuat paragraf
<br> Memasukan satu baris putus
<hr> Tag untuk membuat perubahan dasar kata didalam isi
<!--...--> Tag untuk membuat komentar
Formatting
<acronym>
Tag untuk membuat sebuah akronim (tidak disupport lagi
di HTML5)
<abbr> Tag untuk membuat sebuah singkatan
<address> Tag untuk membuat kontak alamat
<b> Tag untuk membuat huruf bercetak tebal
<bdi>
Mengisolasi bagian dari teks yang dapat diformat dalam
arah yang berbeda dari teks lain di luarnya (tag baru
HTML5)
<bdo> Mengganti arah teks
<big>
Tag untuk membuat text berhuruf besar (tidak disupport
lagi di HTML5)
<blockquote>
Tag untuk membuat sebuah bagian text yang dikutip dari
sumber lain
<center>
Tag untuk membuat jajaran teks menjadi ditengah (tidak
disupport lagi di HTML5)
<cite> Tag untuk membuat judul karya
<code>
Tag untuk membuat potongan kode komputer di antara
text
<del> Tag untuk membuat teks yang telah dihapus dari dokumen
<dfn> Tag untuk membuat sebuah istilah definisi
<em>
Tag untuk membuat penekanan teks (tidak disupport lagi
di HTML5)
<font>
Tag untuk membuat font, warna, dan ukuran untuk
teks(tidak disupport lagi di HTML5)
<i>
Tag untuk membuat sebuah bagian dari teks yang
disesuaikan dengan mood
12. <ins>
Tag untuk membuat teks yang telah dimasukkan ke dalam
dokumen
<kbd> Tag untuk membuat input keyboard
<mark>
Tag untuk membuat teks yang disorot / ditandai (tag baru
HTML5)
<meter> Tag untuk membuat pengukuran skalar
<pre> Tag untuk membuat teks terformat
<progress> Memperlihatkan kemajuan tugas (tag baru HTML5)
<q> Tag untuk membuat kutipan pendek
<rp>
Tag untuk membuat apa yang harus ditampilkan di
browser yang tidak mendukung penjelasan ruby (tag baru
HTML5)
<rt>
Tag untuk membuat sebuah anotasi / pengucapan karakter
(untuk tipografi Asia Timur)
<ruby>
Tag untuk membuat sebuah anotasi ruby (untuk tipografi
Asia Timur) (tag baru HTML5)
<s> Tag untuk membuat teks yang tidak lagi benar
<samp>
Tag untuk membuat contoh keluaran dari program
komputer
<small> Tag untuk membuat teks kecil
<strike>
Tag untuk membuat teks yang di coret tengah (tidak
disupport lagi di HTML5)
<strong> Tag untuk membuat teks penting
<sub>
Tag untuk membuat teks subskrip (seperti dalam penulisan
Jat Kimia)
<sup>
Tag untuk membuat teks superscripted (seperti dalam
penulisan akar kuadrat)
<time> Tag untuk membuat tanggal / waktu (tag baru HTML5)
<tt>
Tag untuk membuat teks teletype (tidak disupport lagi di
HTML5)
<u>
Tag untuk membuat teks yang memiliki Gaya yang
berbeda dari teks biasa lainnya
<var> Tag untuk membuat sebuah variabel
<wbr> Tag untuk membuat kemungkinan garis-putus
Forms
<form> Tag untuk membuat sebuah form HTML untuk input
13. pengguna
<input> Tag untuk membuat sebuah kontrol input
<textarea>
Tag untuk membuat sebuah kontrol input multibaris (text
area)
<button> Tag untuk membuat sebuah tombol yang dapat diklik
<select> Tag untuk membuat sebuah daftar drop-down
<optgroup>
Tag untuk membuat sebuah kelompok pilihan yang terkait
dalam daftar drop-down
<option> Tag untuk membuat pilihan dalam daftar drop-down
<label>
Tag untuk membuat sebuah label untuk sebuah elemen
<input>
<fieldset> Grup unsur terkait dalam bentuk
<legend>
Tag untuk membuat sebuah caption untuk sebuah elemen
<fieldset>, < figure>, atau <details>
<datalist>
Menentukan daftar pilihan yang telah ditetapkan untuk
kontrol input (tag baru HTML5)
<keygen>
Tag untuk membuat key-pair generator kolom input (tag
baru HTML5)
<output>
Tag untuk membuat hasil penghitungan (tag baru
HTML5)
Frames
<frame>
Tag untuk membuat sebuah window (bingkai) dalam
sebuah frameset (tidak disupport lagi di HTML5)
<frameset>
Tag untuk membuat satu set bingkai (tidak disupport lagi
di HTML5)
<noframes>
Tag untuk membuat sebuah konten alternatif untuk
pengguna yang tidak mendukung frame (tidak disupport
lagi di HTML5)
<iframe> Tag untuk membuat sebuah bingkai
Images
<img> Tag untuk membuat gambar
<map> Tag untuk membuat gambar-peta
<area> Tag untuk membuat area dalam gambar-peta
<canvas>
Digunakan untuk menggambar grafik, melalui scripting
(JavaScript ) (tag baru HTML5)
<figcaption>
Tag untuk membuat sebuah caption untuk elemen
<figure> (tag baru HTML5)
14. <figure> Menentukan konten mandiri (tag baru HTML5)
Audio/Video
<audio> Tag untuk membuat isi suara (tag baru HTML5)
<source>
Tag untuk membuat sumber beberapa media untuk elemen
media (<video> dan <audio>) (tag baru HTML5)
<track>
Tag untuk membuat trek teks untuk elemen media
(<video> dan <audio>) (tag baru HTML5)
<video>
Tag untuk membuat sebuah video atau film (tag baru
HTML5)
Links
<a> Tag untuk membuat hyperlink
<link>
Tag untuk membuat hubungan antara dokumen dan
sumber daya eksternal (paling sering digunakan untuk link
ke style sheet)
<nav> Tag untuk membuat navigasi link (tag baru HTML5)
Lists
<ul> Tag untuk membuat daftar dengan selain nomor
<ol> Tag untuk membuat daftar dengan nomor
<li> Tag untuk membuat sebuah item daftar
<dir>
Tag untuk membuat sebuah daftar direktori (tidak
disupport lagi di HTML5)
<dl> Tag untuk membuat sebuah daftar definisi
<dt> Tag untuk membuat istilah (item) dalam daftar definisi
<dd> Defines a description of an item in a definition list
<menu>
Tag untuk membuat deskripsi dari item dalam daftar
definisi
<command>
Tag untuk membuat sebuah tombol perintah bahwa
seorang pengguna dapat meminta (tag baru HTML5)
Tables
<table> Tag untuk membuat tabel
<caption> Tag untuk membuat sebuah caption tabel
<th> Tag untuk membuat sebuah sel header tabel
<tr> Tag untuk membuat baris dalam sebuah tabel
<td> Tag untuk membuat sel dalam sebuah tabel
<thead> Mengelompokan isi header dalam sebuah tabel
<tbody> Mengelompokanisi tubuh dalam sebuah tabel
15. <tfoot> Mengelompokan isi footer dalam sebuah tabel
<col>
Menentukan properti kolom untuk setiap kolom dalam
elemen <colgroup>
<colgroup>
Menentukan kelompok dari satu atau lebih kolom dalam
sebuah tabel untuk diformat
Style/Sections
<style> Tag untuk membuat informasi style untuk dokumen
<div> Tag untuk membuat sebuah bagian dalam dokumen
<span> Tag untuk membuat sebuah bagian dalam dokumen
<header>
Tag untuk membuat sebuah header untuk dokumen atau
bagian (tag baru HTML5)
<footer>
Tag untuk membuat footer untuk dokumen atau bagian(tag
baru HTML5)
<hgroup>
Pengelompokan elemen heading (<h1> sampai <h6>)(tag
baru HTML5)
<section>
Tag untuk membuat bagian dalam dokumen (tag baru
HTML5)
<article> Tag untuk membuat sebuah artikel (tag baru HTML5)
<aside>
Tag untuk membuat konten lain selain dari konten
halaman (tag baru HTML5)
<details>
Tag untuk membuat rincian tambahan yang pengguna
dapat lihat atau sembunyikan (tag baru HTML5)
<dialog>
Tag untuk membuat sebuah kotak dialog atau jendela(tag
baru HTML5)
<summary>
Tag untuk membuat sebuah judul terlihat untuk elemen
<detil> (tag baru HTML5)
Meta Info
<head> Tag untuk membuat informasi tentang dokumen
<meta> Tag untuk membuat metadata tentang dokumen HTML
<base>
Menentukan URL dasar / target untuk semua URL relatif
dalam dokumen
<basefont>
Menentukan standar warna, ukuran, dan font untuk semua
teks dalam dokumen (tidak disupport lagi di HTML5)
Programming
<script> Tag untuk membuat script di sisi klien
<noscript>
Tag untuk membuat sebuah konten alternatif bagi
pengguna yang tidak mendukung script di sisi klien
16. <applet>
Tag untuk membuat sebuah java applet yang
ditanam(tidak disupport lagi di HTML5)
<embed>
Tag untuk membuat sebuah wadah untuk aplikasi
eksternal (non-HTML) (tag baru HTML5)
<object> Tag untuk membuat sebuah objek yang ditanam
<param> Tag untuk membuat sebuah parameter untuk objek
Contoh penggunaan tag HTML5:
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5 <title>Your Website</title>
6 </head>
7 <body>
8 <header>
9 <nav>
10 <ul>
11 <li>Your menu</li>
12 </ul>
13 </nav>
14 </header>
15
16 <section>
17 <article>
17. 18 <header>
19 <h2>Article title</h2>
20
<p>Posted on <time datetime="2009-09-
04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a
href="#comments">6 comments</a></p>
21 </header>
22 <p>Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas.</p>
23 </article>
24
25 <article>
26 <header>
27 <h2>Article title</h2>
28
<p>Posted on <time datetime="2009-09-
04T16:31:24+02:00">September 4th 2009</time> by <a href="#">Writer</a> - <a
href="#comments">6 comments</a></p>
29 </header>
30 <p>Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas.</p>
31 </article>
32
33 </section>
34
35 <aside>
36 <h2>About section</h2>
18. 37 <p>Donec eu libero sit amet quam egestas semper. Aenean ultricies
mi vitae est. Mauris placerat eleifend leo.</p>
38 </aside>
39
40 <footer>
41 <p>Copyright 2009 Your name</p>
42 </footer>
43 </body>
44 </html>
5.
Contoh kode html5:
19. 5. Kelebihan dan Kekurangan HTML5
Kelebihan :
Cleaner code, karena sebagian besar kode telah termasuk di dalam sintaks html5, maka
kode nampak terlihat lebih sederhana daripada penggabungan antara html, css dan java
script.
Greater consistency, HTML5 telah melakukan banyak sekali penambahan sintaks yang
dibuat dalam struktur lebih baik dan lebih sederhana daripada sintaks-sintaks
sebelumnya. Hal ini membuat developer terbantu dalam meningkatkan konsistensi
dalam membangun sebuah web.
Improve Semantics, dengan berbagai elemen kode di dalam html5 yang telah
distandarisasi, maka nilai semantik dari sebuah web dapat lebih ditingkatkan. Itu berarti
bahwa bagian-bagian dari web seperti header, nav, footer dan beberapa bagian lainnya
terdefinisi dengan jelas maksud serta tujuannya selain itu juga terbentuk dalam sebuah
“machine readible format”
Improved Accessibility, dengan teknologi HTML5 yang memudahkan struktur
pembangunan sebuah web, maka developer dapat membangun pemahaman yang lebih
detil mengenaik halaman web.
Client-side Database, HTML5 menyediakan model database SQL yang baru dengan API
yang dapat dibangun dalam konsep lokal, dalam hal ini di sisi client.
Geolocation, HTML5 mempunyai API yang terintegrasi terhadap geolocation, fasilitas
tersebut dapat diakses melalui GPS atau fasilitas lain seperti Google Latitude pada
iphone.
Offline Aplication Cache, pengguna dapat terus melakukan interaksi dengan aplikasi
meskipun mereka terputus dari jaringan internet.
20. Smarter Forms, terdapat semacam reguler expression (regex) yang membuat form
mampu mengenali secara lebih baik tentang input, validasi data dan interaksi dengan
elemen lain (misal : format email, password dll)
Sharper focus on Web Application Requirments, HTML5 membuat sebuah mekanisme
yang lebih mudah dalam hal pembuatan front end, aplikasi chat, tools drag and drop,
video player, pengolah grafis dan masih banyak lagi.
Kekurangan :
Kekurangan utama yang dimiliki oleh HTML5 ini adalah versi ini hanya support untuk
browser modern/terbaru
Karena bahasa HTML5 ini masih dalam perkembangan, jadi beberapa elemen yang ada
bisa saja berubah
Fitur keamanan yang ditawarkan HTML5 masih terbatas
6. Contoh-Contoh Website Menggunakan HTML5
1. James Anderson 613
http://jamesanderson613.com/
2. Yas Marina Circuit
21. Yas Marina Circuit
3. Brandongenerator
http://www.brandongenerator.com/
4. Unfinished Business
24. 8. Gerkenwell Close
share.yu-as.com/smokers/
9. Where the fuck should i go for drinks
Dengan kemampuan Geolocation HTML5, kita bisa membuat aplikasi untuk memberikan
masukan kemana kita harus pergi, atau mencari lokasi-lokasi yang ada di sekitar kita.
25. http://www.wherethefuckshouldigofordrinks.com/
10. Fridzo Keys | The Rational Keyboard
Suara piano akan terdengar jika mouse berada diatasnya.
http://fritzo.org/keys/
11. Web Cam Toy
Dengan website ini kita bisa bermain-main dengan web cam yang ada di komputer
27. Sony Tablet
14. Union Station Denver
http://www.unionstationdenver.com/
BAB III
28. PENUTUP
A. Kesimpulan
HTML5 merupakan salah satu bahasa pemrograman yang luar biasa, karena dengan HTML5
sebuah website dapat diolah menjadi lebih menarik dan bagus. Dalam HTML5 juga telah
dilakukan penambahan sintaks dengan struktur yang lebih baik dan sederhana daripada versi
sebelumnya. Selain itu dalam mengembangkan website HTML5 sangat mudah digunakan. Akan
tetapi HTML5 ini masih dalam tahap penyempurnaan sehingga masih sedikit website yang
mendukung HTML5.
B. Saran
Makalah ini masih sangat banyak sekali kekurangannya, oleh karena itu penulis
mohon kritik dan sarannya dari pembaca demi penyempurnaan makalah ini.