Audio Standards HTML5

HTML5 is exciting and anyone who builds web pages is looking forward to implementing these new tags into their sites. HTML5 audio tags are definitely one of the ones on the list meant to make life much easier for both webmasters and end users.

Until now there has never been a standard audio player for browsers. If you wanted to place audio on your site you either had to use one of the available players such as Windows Media Player or Quicktime player. With HTML5 audio there is just simple code to use to place audio anywhere on the page without have to have a separate audio player or 3rd party service hosting your audio.

Here is an example of how to use the HTML5 audio tags in your web code.

<audio src=”song.ogg” controls=”controls”>This is alternate text that is seen if the users browser does not recognize the html5 tag</audio>

There are several attributes you can use along with your tag to customize your player. The attributes include autoplay, control customization, looping and pre-loading. Which means you can start your video when someone opens your page, customize what controls they see on the audio player and even loop the video so it plays continuously over and over.

So with the implementation of this tag it is going to become much easier for the average webmaster to add audio to their websites and blogs. The HTML5 video tag is also new and is similar in that it provides and across the board video player for putting videos on your site.

Right now HTML5 tags especially the audio and video tags are very experimental. Browser support while getting better is still in its infancy stages which means that as cool as these tags are implementing them into your designs now is going to leave a huge part of the PC internet users unable to see the content on your site.

One also has to wonder what the effects of HTML5 audio and video tags on web hosting. Until now most web hosts could depend on the fact that if a blog or small website wanted to use video or audio it was likely they would host it elsewhere.

With the ease of using these tags I have a feeling once they become more of a standard and are more widely used web hosts are going to see far more people hosting big audio and video files on their servers. Which could mean a rise in web hosting costs depending on how much extra storage space and bandwidth is being used.

HTML5 is coming there is no way around it but it is going to take some time before you can safely use it in your websites. Tags like the HTML5 audio tag are going to make certain elements of design so much easier, so until then we will just wait.

Artikel kali ini kita akan membahas HTML5, apa yang kita harus ketahui dari HTML5? Mari simak tulisan kali ini.

HTML5 adalah versi terbaru dari HTML yang statusnya sudah direkomendasikan oleh W3C walau belum 100% sempurna, tapi beberapa sudah bisa dipakai.

HTML5 sangat powerful, sampai-sampai almarhum Steve Jobs pernah mengatakan HTML5 sebagai pengganti Flash, perkataan Steve Jobs tersebut sedikit banyak mempengaruhi para programmer yang ingin mengembangkan flash. Tentunya membuat sebagian dari mereka berpindah ke HTML5. Steve Jobs juga mengatakan kalau Flash itu berat dan boros baterai. Dan Apple tidak akan mensupport Flash lagi.

Logo HTML5

Penjelasan tentang logo HTML5 Selengkapnya bisa anda baca di W3

Berikut ini adalah logo HTML5 yang sudah banyak dipasang di website-website yang sudah menerapkan HTML5 di website nya


Status

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:

Beberapa bab secara relatif telah stabil, maka dari itu implementasinya juga sudah hampir mendekati penyelesaian, dan fitur tersebut sudah dapat digunakan hari ini (misalnya: tag <canvas>). — WHAT Working Group, When will HTML5 be finished?

Markup / Struktur Penulisan
Bagaimana memulai HTML? Cukup menuliskan tag berikut:
<!DOCTYPE HTML>
Lengkap nya sebagai berikut:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

</body>
</html>


Ada beberapa Tag HTML baru yang bisa dipakai seiring munculnya HTML5

<header>

Header dari sebuah section, mungkin lebih enak menyebutnya seperti itu
Biasanya Header berfungsi untuk menentukan header dari website yang berisi Logo/Nama Website atau deskripsi website

header juga bisa diletakkan diantara <section>, untuk menandakan judul dari sebuah section

<section>

Section biasanya digunakan untuk meletakkan konten, sebuah section biasanya diletakkan setelah Header, dan sebelum Footer

<nav>

Untuk mendefinisikan area navigasi, biasanya berisi daftar link.

<article>

Article biasanya untuk menempatkan entry independent dalam sebuah blog, majalah, ringkasan dan sebagainya.
biasanya terletak didalam section

<aside>

Sebuah aside menunjukan konten yang berkaitan dengan konten lain nya yang ada di sekitar nya. Biasanya aside bisa digunakan untuk area sidebar pada sebuah blog.

<footer>

Untuk menentukan bagian footer atau bagian bawah dari sebuah website, biasanya berisi hak cipta dari sebuah website.

Penggunaan nya dalam struktur HTML selengkapnya sebagai berikut: 
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Your Website</title> </head> <body> <header> <nav> <ul> <li>Your menu</li> </ul> </nav> </header> <section> <article> <header> <h2>Article title</h2> <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> </header> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </article> <article> <header> <h2>Article title</h2> <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> </header> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </article> </section> <aside> <h2>About section</h2> <p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </aside> <footer> <p>Copyright 2009 Your name</p> </footer> </body> </html>

Oke sekian penjelasan tentang HTML5, semoga jika ada tulisan tentang HTML5 lainnya, anda tidak akan bingung.