lifelong learner — urip iku urup, currently working on accenture.

Fitur fitur baru yang ada pada HTML 5

0
Degananda.com -

Screen Shot 2018-08-05 at 11.36.37

HTML 5 adalah versi pengembangan dari HTML 4.0. Tentunnya terdapat berbagai macam peningkatan dari sisi fitur, semantic ataupun konsistensi dari markup. Ulasan ini akan membahas mengenai fitur – fitur apa saja yang telah di implementasikan pada HTML 5 sehingga kita sebagai web developer dapat memanfaatkan fitur tersebut untuk meningkatkan kualitas dari website yang dideliver.

Pengembangan yang ada pada HTML 5

Kami membagi fitur dari HTML 5 menjadi dua kategori. Pertama adalah terkait pengembangan syntax yang ada pada HTML 5. Ini meliputi syntax markup yang baru terimplementasi dari versi 5.0 dan tidak ada pada versi sebelumnya (4.0) Sedangkan yang kedua adalah terkait fitur yang melibatkan kemampuan HTML 5 dalam berinteraksi dengan browser atuapun lingkungan software pengguna(user yang mengakses website) yang kita sebut sebagai kategori API (Application Programming Interface).

Sehingga terdapat dua faktor pengembangan major pada HTML versi 5 ini yakni

  1. Pengembangan syntax yang lebih standar dan konsisten dibrowser ataupun untuk keperluan SEO (Search engine optimization)
  2. Implementasi berbagai API (Application programming interface) yang baru untuk mendukung interaksi antara website dengan lingkungan software pengguna (user)

Syntax baru pada HTML 5

Sebelumnya pada HTML versi 4.0 kita mendefinisikan blok dari suatu elemen menggunakan syntax div seperti pada snippet kita dibawah ini

<div>blok elemen</div>

Sedangkan pada HTML versi 5 ini kita akan memiliki beberapa syntax markup baru yang lebih semantic dan lebih mudah dikenali oleh search engine untuk meningkatkan kemampuan SEO nya. Sebagai contoh dalam website yang memiliki konten untuk blog , web developer akan mendefiniskan elemen dari websitenya menjadi kategori sebagai berikut ini :

  1. Article
  2. Section
  3. Header
  4. Footer
  5. Dan lain sebagainnya

Untuk mendefinisikan berbagai elemen HTMl tersebut kita tidak perlu lagi menggunakan blok DIV karena masing-masing elemen tersebut dapat kita definisikan menjadi suatu markup tersendiri. Ya HTML 5 support terhadap markup – markup custom seperti dibawah ini

<section></section>
<article></article>
<header></header>
<footer></footer>
<custommarkup></custommarkup>

Implmentasi Berbagai API Baru pada HTML

Selanjutnya selain kita dapat mendefinisikan custom BLOCK atau custom markup sesuai dengan tema dari website yang sedang kita buat , HTML 5 juga memiliki kemampuan untuk berinteraksi lebih dengan lingkungan software pengguna (User).

Secara umum , contoh dari kemampuan interaksi tersebut adalah dengan menggunakan HTML 5 kita dapat membuat canvas didalam layer HTML, kemampuan penyimpanan data secara offline (offline storage) , kemampuan pemutaran video tanpa flash player, kemampuan interaksi drag and drop ke suatu elemen , external font dan lebih banyak lagi fitur – fitur HTML 5 lain yang akan kami bahas pada blog ini.

Application Programming Interface (API)

Anda tidak usah dibingungkan dengan suatu istilah API karena API ini sejatinnya hanyalah sebuah terms yang menjelaskan kemampuan dari suatu library/code/platform untuk dapat berinteraksi dengan environment lainnya. Contohnya disini adalah API browser yang menyebabkan HTML 5 memiliki ruang yang lebih luas untuk berinteraksi dengan software lingkungan pengguna. Ibaratkan API adalah kemampuan tambahan suatu sistem untuk berhubungan dengan sistem lainnya.

Contohnya adalah pada HTML 4.0 untuk dapat memutar suatu video, kita tidak bisa secara langsung embed (meletakan) video tersebut ke halaman dengan hanya menggunakan HTML syntax yang sederhana melainkan harus melibatkan penggunaan object yang complex. Sedangkan pada HTML 5.0 ini kita dapat meletakan video pada halaman dengan hanya menggunakan syntax HTML 5 sederhana, bahkan juga mendukung embedding audio.

berikut adalah syntax untuk menampilkan video (embedding video) dengan menggunakan HTML 4.0

<video width="320" height="240" controls>
<source src="myvideo.mp4" type="video/mp4">
</video>

sedangkan berikut ini adalah syntax untuk menampilkan video(Embedding video) dengan menggunakan versi HTML 5.0

<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" CODEBASE="appldnld.apple.com.edgesuite.net/content.info.apple.com/…; WIDTH="480" HEIGHT="297" >
  <PARAM NAME="src" VALUE="URL">
  <PARAM NAME="autoplay" VALUE="false">
  <PARAM NAME="scale" VALUE="ToFit">
  <PARAM NAME="controller" value="true">

  <video SRC="URL" TYPE="image/x-macpaint" PLUGINSPAGE="apple.com/quicktime/download"; QTSRC="URL" WIDTH="480" HEIGHT="297" SCALE="ToFit" controls="true"></video>
</OBJECT>

sangat terlihat bukan bahwa HTML 5.0 jauh lebih advanced dengan kemampuan beritneraksi terhadap API-API pada browser. Ini akan meningkatkan produktivitas kita sebagai web developer.