Yang perlu anda ketahui tentang HTML 5

Cepatnya perkembangan teknologi sangat terasa, jika kita tidak mampu mengikutinya tentunya kita akan jauh tertinggal. Untuk mengimbangi perkembangan tersebut perlu kita bekali diri dengan pengetahuan.

Kini telah hadir HTML 5 yang menggantikan versi sebelumnya HTML 4. Tentunya banyak fitur-fitur yang menjanjikan termasuk didalamnya. Disini saya akan coba ulas beberapa hal tentang HTML 5.

1. DOCTYPE baru
Biasanya kita menggunakan doctype berikut dalam HTML 4

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

atau menggunakan

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

Untuk mengenal doctype silahkan klik disini.

Dalam HTML 5 hanya menggunakan

<!DOCTYPE html>

Sangat simpel bukan?

2. Tidak adanya Type pada script dan link
Sebelumnya kita mendefinisikan type dari script js atau link css seperti berikut

<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>

 

Tapi hal tersebut tidak diperlukan lagi karena tag tersebut langsung merunut ke stylesheet dan script secara langsung. Jadi tag akan seperti berikut:

<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>

3. Memberikan Tanda Petik
HTML 5 bukanlah XHTML — perlu diingat — jadi penggunaan tanda petik untuk tempat attribute element tidak diperlukan. Ini tentunya akan membuat kode kita lebih bersih.

<p id=someId> contoh penggunaan paragraf.

4. Content dapat diedit
Pada teknologi browser-browser baru memberikan tambahan attribute baru untuk diaplikasikan ke element yaitu bisa diedit ditempat. Jadi user diberikan kemudahan untuk meng-edit secara langsung isi dari konten, tapi ini tentunya cuma berubah di offline saja. Jadi berikut penggunaannya:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Kontent Editable</title>
</head>
<body>
<h2> Contoh </h2>
<ul contenteditable="true">
<li> Menjadi diri sendiri. </li>
<li> Mencoba hal baru</li>
<li> Senantiasa belajar </li>
</ul>
</body>
</html>

Dan kita bisa juga menuliskan seperti pada point 3:

<ul contenteditable=true>

5. Email
Jika kita gunakan input text dengan tipe “email”, kita bisa langsung memvalidasi input email dari user. Sangat mudah bukan melakukan validasi terhadap input user. Hanya dengan menambahkan attribute type=”email” pada textbox.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
</head>
<body>
<form action="" method="get">
<label for="email">Email:</label>
<input id="email" name="email" type="email" />
<button type="submit"> Submit Form </button>
</form>
</body>
</html>

Tapi ini hanya berlaku pada browser saja, sama halnya dengan validasi menggunakan javascript. Validasi di sisi server tetap perlu dilakukan untuk hal keamanan.

6. Attribute Required
Form mempunyai fitur baru yaitu required attribute, yang akan mengecek isi dari sebuah input text apakah kosong atau tidak saat di-submit. Jika kosong maka form tidak akan di-submit. Penulisannya bisa seperti dibawah:

<input type="text" name="someInput" required>

Atau, menggunakan tag yang lebih terstruktur.

<input type="text" name="someInput" required="required">

7. Attribute Autofocus
Menggunakan HTML kita bisa menggunakan attribute autofocus, layaknya fungsi autofocus dijavascript.

<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>

Bagaimana, cukup menarik bukan?

8. Mendukung audio
Dahulu untuk menambahkan sebuah audio kedalam web kita memerlukan penulisan kode yang lumayan panjang. Tapi sekarang HTML 5 mengenalkan <audio> element sudah mendukung penuh terhadap penggunaan audio pada halaman web kita, tapi masih terbentur pada support dari browser, tapi hampir semua browser-browser besar/terkenal sudah mendukung element ini.

Penggunaannya seperti kode dibawah

<audio autoplay="autoplay" controls="controls">
<source src="musik.mp3" />
Unduh file ini.
</audio>

9. Mendukung video
Dan hebatnya lagi HTML juga mengenalkan <video> element. Tapi karena codec format video tidak semua browser mendukung, jadi video yang bisa diputar tergantung dari browser. Penulisan dari video element adalah:

  1. <video controls preload>
  2. <source src="contohvideo.ogv" type="video/ogg; codecs='vorbis, theora'" />
  3. <source src="contohvideo.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
  4. <p> Browser tidak mendukung. <a href="contohvideo.mp4">Silahkan unduh video.</a> </p>
  5. </video>

Perlu diingat, memang fitur ini sangat menjanjikan tetapi tidak semua browser mendukung HTML5 video. Disamping untuk menghemat bandwidth website kita.

——
Terima kasih telah membaca artikel ini, jika ada pertanyaan, saran, atau kritik silahkan meninggalkan komentar.