Perbedaan HTML dan HTML5
access_time
hourglass_empty
person_outline

Perbedaan HTML dan HTML5

Pengenalan

Orang yang baru mengenal dunia web design tentu akan sering mendengar istilah “markup” dan mungkin mereka bertanya-tanya apa artinya, serta apa perbedaannya dengan istilah “kode”. Secara umum, markup language didesain untuk proses, penentuan dan keberadaan text; tag embedding dan anotasi text dibawa oleh file styled untuk membuat manipulasi text mudah bagi komputer. Sejarahnya, istilah markup language terinspirasi dari proses markup manuscript melalui instruksi printer yang berasal dari markup tulisan tangan. HTML, termasuk kepada bahasa markup yang paling banyak digunakan. Beberapa tahun yang lalu, pembaharuan terhadap bahasa ini dirilis, bernama HTML5. Dalam tutorial ini kita akan melihat secara umum perbedaan HTML dan HTML5.

Apa itu HTML?

HTML atau Hyper-Text Markup Language bisa dibilang merupakan bahasa utama dunia website. Umumnya halaman web yang beradad di internet ditulis dengan variasi HTML. Lewat HTML, developer bisa memastikan multimedia, text dan link bisa tampil di browser menyatu dengan elemen lainnya. Dari elemen yang membuat hubungan ke dokumen Anda (hypertext) hingga ke elemen yang membuat dokumen menjadi interaktif, semuanya merupakan kesatuan dari HTML.

Standard dalam HTML diciptakan oleh W3C atau World Wide Web Consortium pada tahun 1997. Dalam HTML, tag digunakan untuk menentukan struktur; tag dan elemen didefenisikan dengan menggunakan karakter < dan >. Beberapa contoh tag yang telah disebutkan sebelumnya adalah heading, table, paragraf, dll. Browsers bertanggung jawab untuk me-render halaman website melalui tag ini. Sudah sejak lama, HTML menjadi bukan satu-satunya standard development. Belakangan ini, semua content dan tag untuk style dihadirkan dalam bahasa yang besar dan cukup kompleks. Akhirnya, W3C memutuskan bahwa pemisahan antara content dan style pada website, sangat dibutuhkan; yang kemudian mengantarkan kepada terciptanya style sheets. Seaat ini, tag yang digunakan untuk mendefenisikan style dari dokumen (misalnya Font) sudah mulai ditinggalkan karena orang lebih memilih menggunakan style sheets dan hanya tag yang terkait dengan penentuan content saja yang masih digunakan sebagai inti HTML.

HTML sudah mengalami banyak pembaharuan selama ini dan saat ini, versi HTML terbaru adalah HTML5. HTML5 menjadi bahasa markup primadona saat ini dan telah memiliki penambahan banyak fitur dari HTML biasa serta menghilangkan beberapa kekakuan yang ada pada XHTML. Setiap hari, fitur baru ditambahkan ke HTML5 meskipun tidak ada perubahan versi khusus di setiap rilisnya. Perbedaan utama antara HTML dan HTML5 buka di audio atau video, namun di keseluruhan HTML dimana keduanya merupakan bagian dari HTML5.

History of HTML

Apa perbedaan utama antara HTML dan HTML5 ?

Satu hal yang konsisten tentang bidang IT adalah update periodik / perubahan merupakan hal yang tak terelakkan. Tidak ada bahasa yang tidak pernah di-upgrade atau memiliki rilis baru. Begitu juga dengan HTML, tidak terkecuali. HTML5 ini dirilis dengan tujuan utama meningkatkan pengalaman ber-internet untuk pengembang dan pengguna seperti Anda. Seperti yang telah disebutkan sebelumnya, manfaat terbesar yang dimiliki oleh HTML5 jauh lebih banyak dari pendahulunya, salah satunya adalah memiliki dukungan audio tingkat tinggi dan video yang bukan bagian dari spesifikasi versi di HTML sebelumnya. perbedaan lain antara HTML dan HTML5:

SVG, canvas dan grafis vektor virtual lainnya didukung oleh HTML5, sedangkan di HTML, penggunaan grafis vektor hanya mungkin dilakukan dengan menggunakan bantuan teknologi lain seperti Flash, VML, dan Silver-light, dll

HTML5 menggunakan database SQL web, aplikasi cache untuk penyimpanan sementara, sedangkan, dalam HTML hanya cache browser yang bisa dimanfaatkan untuk tujuan ini.

Perbedaan lain antara HTML dan HTML5 adalah, versi sebelumnya tidak mengizinkan JavaScript untuk berjalan dalam browser (justru berjalan di thread antarmuka browser) sedangkan yang HTML5 mendukung penuh JavaScript bisa berjalan di background.

HTML5 tidak berbasis pada SGML.

Dalam HTML5, inline MathML dan SVG bisa digunakan dalam teks sedangkan dalam HTML tidak memungkinkan.

Beberapa elemen usang yang kini telah dihapuskan adalah: isindex, noframes, acronym, applet, basefont, dir, font, frame, frameset, big, center, strike, tt.

HTML5 mendukung form control yang baru, misalnya: tanggal dan waktu, email, nomor, range, tel, url, pencarian, dll

Ada banyak elemen baru yang diperkenalkan dalam HTML. Beberapa yang paling penting adalah: summary, time, aside, audio, command, data, datalist, details, embed, wbr, figcaption, figure, footer, header, article, hgroup, bdi, canvas, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, track, video.
Difference Between HTML and HTML5

Manfaat HTML5 bagi Developer

HTML5 ingin agar developer mendapatkan lebih banyak fleksibilitas dalam mendesain website dan karena itu justru banyak perkembangan yang signifikan dan layak dibanggakan:

1. Penanganan error yang persisten:

Kebanyakan web browser memiliki kemampuan untuk mem-parse kode HTML yang salah baik secara struktural/sytatic. Namun, hingga beberapa tahun yang lalu, belum ada sama sekali proses yang terstandarisasi unntuk menangani hal ini. Artinya, browser developer harus melukan test HTML di browser yang berbeda untuk membuat penanganan error yang lebih baik melalui reverse engineering. Penanganan error HTML5 yang konsisten kini memberikan banyak solusi untuk hal ini.

Algoritma parsing yang lebih berkembang yang digunakan di HTML5 memiliki banyak manfaat. Survey membuktikan bahwa sekitar 90% website rentan terhadap kode yang salah. Dengan ini, penanganan error yang ada bisa membantu developer dalam pengerjaan.

2. Semantic yang lebih baik untuk element:

Untuk mengembangkan kode, pengembangan dilakukan jug auntuk peran semantic dari berbagai element yang ada. Section, article, nav dan header merupakan beberapa element baru yang kini menggantikan element div dan ini membuat proses perbaikan error menjadi lebih mudah.

3. Dukungan lebih lanjut untuk fitur web application:
Salah satu tujuan utama dari HTML adalah agar browser bisa berfungsi sebagai platform aplikasi. Website sebelumnya digunakan untuk penggunaan yang tidak terlalu kompleks, namun kini kebutuhannya semakin tinggi. HTML5 menyediakan kendali penuh kepada developer untuk mengatur performa website mereka. Sebelumnya, web developer harus menggabungkan beberapa teknik karena banyak teknologi server-side dan ekstensi browser belum tersedia. Namun sekarang, dengan HTML5, penggunaan teknik berbasis JS ataupun Flash tidak terlalu dibutuhkan karena sudah tersedia element yang mampu menangani semua itu di HTML5.

4. Website responsive di mobile menjadi lebih mudah:
Bahkan hari ini, membuat versi mobile dari sebuah website bisa membuat developer pusing. Pertumbuhan penggunaka smartphone saat ini perlahan terus meningkat, dan hal tersebut mendorong pengembangan standard yang lebih dari HTML. Pengguna ingin bisa mengakses website kapan pun dan dengan perangkat apapun. Hal inilah yag kemudian menjadikan website responsive menjadi semakin dibutuhkan. HTML5 memberikan dukungan untuk perangkat mobile dengan jauh lebih sederhana, sehingga juga bisa berjalan baik di perangkat elektronik seperti table maupun smartphone.

5. Elemen canvas:
Salah satu fitur yang paling banyak dibicarakan tentang HTML5 adalah elemen canvas. Dengan menggunakan elemen canvas, developer bisa menggambar menggunakan warna dan bentuk yang berbeda, dengan memanfaatkan script (misalnya JavaScript). Layak dikatakan bahwa canvas mengandung container gambar dan untuk membuat gambar, script akan dijalankan. Salah satu contoh script yang terkait dengan canvas adalah seperti ini:

<canvas id=”TestCanvas” width=”200″ height=”100″></canvas>
var c = document.getElementById(“TestCanvas”);
 
var context = c.getContext(“2d”);
 
context.fillStyle = “#FF0000”;
 
context.fillRect(0,0,140,75);

 

6. Elemen menu
Elemen dan merupakan bagian dari spesifikasi elemen yang interaktif, namun tidak sering digunakan atau dibicarakan oleh komunitas developer. Bagaimanapun, 2 item ini layak digunakan untuk meningkatkan interaksi pada web.Tag digunakan unutuk merepresentasikan perintah menu di aplikasi mobile dan desktop, agar lebih sederhana. Penggunaannya seperti ini:

    <body contextmenu=”new-menu”>
 
    <menu id=” new-menu” type=”context”>
 
    <menuitem>Hello!</menuitem>
 
    </menu>
   </body>
7. Atribut data yang mudah dikustom:
Memang memungkinkan, bila Anda ingin menambahkan atribut khusus sebelum HTML5, namun sering kali itu berisiko; misalnya, di HTML4, atribut custom kadang-kadang berhenti me-render halaman dengan baik, dan ini sering kali menjadi penyebab dokumen menjadi salah. Atribut data- * di HTML5 menjadi solusi untuk hal ini. Ada beberapa kegunaan atribut ini, namun tujuan utamanya adalah sebagai penyimpanan informasi tambahan tentang elemen yang berbeda. Sekarang, data kustom dapat dimasukkan, dan memberikan developer kemungkinan untuk membuat halaman web yang menarik dan efisien tanpa harus menggunakan pencarian data di sisi server atau panggilan via Ajax.8. CookiesDukungan terhadap penyimpanan lokal merupakan fitur yang paling signifikan di HTML5. Sebelum ada HTML5, jika developer ingin menyimpan apapun, mereka harus memanfaatkan cookies. Cookies bisa menyimpan sedikit data (walaupun banyak orang membencinya) dan ini membuat penambahan object localStorage ke HTML5 menjadi sangat bermanfaat. Object localStorage adalah bagian dari global window namespace dan bisa diakses darimanapun yang diinginkan saat menggunakan script.

HTML5 Cheat Sheet

Cheat sheet bisa sangat berguna jika Anda baru mulai belajar bahasa baru. GUnakan cheat sheet HTML5 berikut ini untuk mulai mempelajari HTML5. Semua tag yang paling sering digunakan dalam HTML dan HTML5 ada disini.

HTML5 Cheat Sheet

Manfaat HTML5

HTML5 membawa pergeseran paradigma untuk developer maupun pengguna biasa. Beberapa diantaranya adalah:

  1. Browser di perangkat mobile lebih jarang crash daripada native application. Hal ini tidak terjadi sebelumnya, saat dimana HTML belum terlalu mendukung pengembangan mobile web.
  2. Ketergantungan pada website mobile sangat tinggi karena hampir 30 persen dari pengguna ponsel tidak suka mendownload aplikasi. Jadi saat ini jika pengguna ingin menggunakan jasa perusahaan tetapi tidak ingin men-download aplikasi mereka, mereka bisa langsung login ke website perusahaan untuk melakukannya.
  3. Pengurangan akan kebutuhan penggunaan Adobe Flash memungkinkan pengembang untuk memberikan pengalaman pengguna yang kaya dengan keindahan grafis. Penggunaan JavaScript dan MPEG4 dalam hubungannya dengan HTML5 membuat semuanya lebih baik.
  4. Kemampuan untuk mendukung elemen audio dan video, artinya pengguna tidak perlu lagi mendownload plugin tambahan untuk menjalankan multimedia di website Anda. Dukungan terhadap rich media yang disediakan oleh HTML5 ini adalah salah satu alasan terbesar mengapa ini lebih sering digunakan daripada HTML5 biasa.

Kesimpulan

Seiring dengan berjalannya waktu, developer akan mendapatkan banyak manfaat dari HTML5. Dengan gelombang perubahan yang menghampiri developer di seluruh dunia, diharapkan adopsi HTML5 terhadap meningkat di tahun-tahun yang mendatang. Untuk memaksimalkan potensi browser modern, sangat penting untuk mengadopsi HTML5 secepat mungkin.

Penulis

Author

Ariata C. / @ariata

Ariata suka sekali menulis dan menerjemahkan, dan sekarang ini bekerja sebagai translator di Hostinger Indonesia. Lewat artikel dan tutorial yang diterbitkan di blog Hostinger, Ariata ingin membagikan pengetahuan tentang website, WordPress, dan hal terkait hosting lainnya kepada para pembaca.

Tutorial terkait

Author

Hengky Firmansyah Balas

December 30 2017

terima kasih infonya sangat bermanfaat

Author

Andy Balas

November 19 2019

Terima kasih, artikel yang ditulis sangat membantu saya untuk memahami tentang HTML5. Semoga Tuhan memberkati

Author

Edn Balas

January 13 2020

Thanks ya sharingnya, God bless

Ketik balasan

Komentar*

Nama*

Email*

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Jadilah bagian dari Hostinger!