Apa itu HTML5? Mengenal Fitur Unggulan & Cheat Sheet-nya

HTML atau Hypertext Markup Language saat ini sudah menggunakan versi terbaru, yaitu HTML5.

Sebagai bahasa markup yang mendefinisikan struktur web, versi terbaru ini memiliki sejumlah fitur yang bisa membuat halaman web lebih atraktif.

Untuk para siswa SMK jurusan Rekayasa Perangkat Lunak, mahasiswa jurusan informatika, atau yang sedang mulai belajar pemrograman web, artikel ini bisa jadi referensi dasar Anda semua.

Apa itu HTML5?

Sebelum mengenal apa itu HTML5, ada baiknya Anda memahami dulu apa pengertian HTML. 

Kepanjangan HTML adalah Hypertext Markup Language. 

Secara definitif, HTML adalah bahasa markup untuk mendefinisikan struktur halaman web dan tautan antar halaman (hypertext).

Dengan kata lain, bahasa ini merupakan kode yang jadi dasar dari tampilan suatu web.

Bahasa web ini bisa Anda kolaborasikan dengan CSS. CSS adalah bahasa pemrograman khusus front-end untuk membuat visual web lebih menarik. 

Bahasa web ini bersifat statis. Untuk bisa membuat web dinamis, Anda perlu mengkombinasikannya dengan JavaScript, PHP atau sejenisnya.

HTML sendiri terus berkembang untuk menunjang banyak fitur di era modern ini. Nah, HTML5 merupakan versi terakhir yang saat ini umum digunakan oleh orang-orang.

Cara Kerja HTML

Di atas sudah kami singgung bahwa fungsi HTML secara umum adalah untuk mendefinisikan struktur halaman web.

Berikut ini adalah visualisasi sederhananya.

apa itu html5
Sumber: W3schools

Note: Konten dalam elemen <title> akan muncul sebagai judul di tab browser. Konten dalam elemen <body> jadi konten utama yang tampil di browser.

Ciri utama dari HTML adalah adanya tag dengan simbol <…> sebagai pembuka dan sebagai penutup akan menggunakan simbol </> (di mana beberapa tag tidak membutuhkan simbol penutup).

Tag HTML adalah kata kunci yang memberi informasi pada browser mengenai bagaimana format suatu konten akan tampil di browser.

Di dalam tag tersebut akan berisi kode yang menunjukan deskripsinya. Misalnya <p>….</p> yang menunjukan paragraf, <b>…</b> untuk membuat font menjadi bold, dll.

Pada prinsipnya, suatu tag hanya mendeskripsikan bagian awal dan akhir dari suatu elemen HTML.

Contohnya:

<title> … </title> adalah tags.

<title>Ini adalah Judul Web</title> adalah elemen.

Di dalam sebuah tags, Anda bisa memberikan attribute tertentu yang memberi informasi atau perintah tambahan.

Anda harus menuliskan seluruh kode HTML berdasarkan struktur tag, element & attribute tadi, di text editor

Ketika program tersebut Anda jalankan, browser akan membaca setiap informasi tag, elemen dan attribute yang sudah Anda deklarasikan. Nah, browser akan menampilkan konten sesuai informasi tersebut.

Namun, di HTML5 terdapat beberapa tag elemen yang sedikit berbeda. Nah, berikut ini adalah visualisasi struktur tag-nya.

Sumber: Semrush

Fitur Unggulan HTML5

Perbedaan HTML dan HTML5 tidak hanya sebatas pada deskripsi tag elemen. 

Pembaruan pada HTML5 membuatnya memiliki sejumlah fitur unggulan yang bisa membuat desain web lebih menarik dan interaktif. Artinya, kegunaan HTML bisa lebih melebar dengan adanya pembaruan ini.

Berikut ini adalah beberapa fitur unggulan dari HTML5.

1. Syntax Lebih Sederhana

Tag div HTML adalah tag versi lama untuk mengelompokkan section, elemen, atau tag dalam kategorisasi tertentu. 

Pada struktur web yang kompleks, hal ini akan sedikit merepotkan bagi programmer

Sumber: Javapoint

Pada versi terbaru ini, syntax-nya jadi lebih sederhana. Deskripsi dari setiap section dideklarasikan langsung pada tag. Jadi programmer tidak perlu lagi menggunakan tag <div> dulu. 

Misalnya, untuk mendeklarasikan bagian footer bisa langsung menggunakan tag <footer> atau bagian menu navigasi menggunakan tag <nav>.

2. Menunjang Pengembangan Web Responsive

Salah satu pembaruan pada versi ini untuk menjawab peningkatan jumlah pengguna perangkat seluler. 

Mau tidak mau suatu web harus bisa responsive di berbagai ukuran layar, terutama pada perangkat seluler.

Versi terbaru ini lebih mobile-friendly daripada versi terdahulu. 

Jadi, saat Anda menggunakan bahasa web versi terbaru, Anda tidak perlu melakukan banyak konfigurasi supaya web tersebut bisa terbuka dengan optimal di perangkat seluler.

Juga, HTML5 lebih mengakomodasi penerapan AMP.

3. Sudah Menunjang Konten Video & Audio secara Default

Versi terdahulu belum support konten video atau audio. 

Salah satu pembaruan pada versi terbaru adalah untuk menunjang konten video dan audio yang sudah semakin lazim.

Konten video dan audio sudah jadi bagian esensial dari versi terbaru ini. Anda bisa menggunakan tag elemen <Audio>, <Video> untuk mendeklarasikannya.

4. Sudah Mendukung Graphic Vector

Pada versi lama, graphic vector mungkin Anda aplikasikan dengan dukungan teknologi lain seperti VML atau Flash.

Pada versi terkini, graphic vector seperti file SVG dan Canvas sudah jadi bagian integral. Anda bisa langsung mendeklarasikannya dengan tag elemen <svg> dan <canvas>.

5. Menggunakan Local Storage untuk Mengganti Cookie

Pada versi lama, sistem penyimpanannya masih menggunakan cookie

Sistem penyimpanan ini memiliki sejumlah kelemahan. Misalnya, kapasitas penyimpanan yang kecil (4kb), hanya mengizinkan penyimpanan data string, memperlambat server web, dan data cepat kedaluwarsa.

Versi terbaru sudah menggunakan local storage atau penyimpanan web yang mengatasi beberapa kelemahan tadi.

Dengan sistem ini, data akan tersimpan di komputer client dengan kapasitas penyimpanannya mencapai 5 MB. Sistem penyimpanan ini juga tidak akan membebani server.

6. Kompatibel dengan Browser Terkini

Saat ini sudah ada banyak jenis browser bermunculan. Versi terbaru dari bahasa pemrograman ini sudah kompatibel dengan berbagai browser baru. Baik itu aplikasi browser di desktop maupun perangkat mobile.

Karena bahasa web ini sudah dioptimasi untuk berbagai jenis web browser terkini, Anda tidak perlu melakukan banyak konfigurasi untuk menampilkan web di berbagai jenis browser.

7. Memungkinkan Javascripts Berjalan di Browser

Versi terbaru memiliki JS Web Worker API. API tersebut membuat antarmuka browser bisa berjalan di beberapa threads (multiple threads).  

Dengan demikian, memungkinkan bagi Anda untuk menjalankan JavaScripts di background

8. Memungkinkan Efek Drag & Drop

Fitur drag & drop adalah salah satu sistem yang sudah lazim di era ini. Fitur ini sangat memudahkan user pada saat mengupload file.

Nah, dengan bahasa web ini, Anda bisa menghadirkan fitur drag & drop dengan lebih mudah.

Itu dia beberapa contoh fitur unggulan dari HTML5. Selain beberapa fitur di atas, tentu saja masih ada banyak lagi fitur lainnya. 

Anda bisa mempelajari lebih jauh dari berbagai source tutorial.

Cara Belajar HTML5

Jika Anda ingin menjadi web developer atau web programmer, mempelajari HTML5 adalah hal mutlak.

Selain belajar di pendidikan formal atau lembaga kursus, Anda bisa mulai mempelajarinya secara otodidak dari berbagai tutorial.

Kami merekomendasikan w3schools.com sebagai tempat belajar gratis. Di website tersebut Anda bisa belajar HTML5 secara komprehensif. Anda juga bisa belajar bahasa web lainnya.

Karena begitu banyaknya tag yang harus Anda hafalkan, berikut ini adalah cheat sheet yang bisa Anda gunakan sebagai panduan.

apa itu html5
Sumber: Wpkube

HTML5: Menunjang Pengembangan Web Era Ini

HTML5 merupakan versi terkini dari bahasa web HTML. 

Sebagai bahasa markup, hal inilah yang mendefinisikan struktur halaman web. Dengan kata lain, bahasa web ini berperan dalam membentuk tampilan web page.

Versi terbaru ini memiliki sejumlah fitur unggulan yang jadi pembeda dari versi sebelumnya. Fitur-fitur tersebut menunjang banyak kebutuhan di era ini. 

Dengan mengaplikasikan versi terbaru ini, halaman web bisa lebih menarik dan interaktif.

Penutup

Saat Anda berencana mengembangkan web secara manual pastikan untuk menggunakan basis HTML5. Jika ada yang baru, kenapa Anda mesti memakai yang kuno?

Bagaimanapun, website yang Anda buat harus bisa menjawab kebutuhan era ini dan HTML5-lah yang bisa memenuhi tuntutan tersebut.

Sementara itu, untuk menjawab kebutuhan web hosting dan domain Anda, percayakan kepada Jogjahost.

Semoga artikel ini bisa jadi panduan dasar bagi Anda untuk mulai mengenal apa itu HTML5.

Related Post:
Share on facebook
Share on twitter
Share on whatsapp
Share on linkedin
Share on print
Jho

Jho

Saya akan berbagi tulisan tentang definisi apapun yang berkaitan dengan dunia hosting, domain dan website.

Tinggalkan komentar

Content

Pilihan

Dapatkan layanan hosting unlimited murah dengan unlimited storage SSD, unlimited bandwith,litespeed webserver dan fitur unggulan lainnya di Jogjahost