{"id":8217,"date":"2021-11-25T01:25:00","date_gmt":"2021-11-24T18:25:00","guid":{"rendered":"https:\/\/www.jetorbit.com\/blog\/?p=8217"},"modified":"2022-04-11T11:31:24","modified_gmt":"2022-04-11T04:31:24","slug":"yuk-mengenal-html5-serta-perbedaan-antara-html-dengan-html5","status":"publish","type":"post","link":"https:\/\/www.jetorbit.com\/blog\/yuk-mengenal-html5-serta-perbedaan-antara-html-dengan-html5\/","title":{"rendered":"Yuk Mengenal HTML5 serta Perbedaan Antara HTML dengan HTML5"},"content":{"rendered":"\n

Guys, kalian yang menekuni dunia IT tentu sudah paham bahwa semua elemen yang berada di platform <\/em>digital terus dikembangkan untuk menunjang kebutuhan industri dan mengikuti kemajuan teknologi. Hal ini juga terjadi pada salah satu bahasa pemrograman HTML. Kali ini kami akan menyampaikan tentang perbedaan HTML dan HTML5. Okay, mari cari tahu perbedaan HTML dan HTML5 di Yuk Mengenal HTML5 serta Perbedaan Antara HTML dengan HTML5<\/strong><\/p>\n\n\n\n

Apa Itu HTML <\/strong><\/h2>\n\n\n\n

HTML adalah HyperText Markup Language. Sebagian besar orang berasumsi jika HTML adalah sebuah bahasa pemrograman. Okay, perlu kalian ketahui bahwa web HTML bukanlah sebuah bahasa pemrograman.<\/p>\n\n\n\n

Bahasa tersebut ditulis dalam format HTML, format tersebut ditulis di antara bracket <\/em>yang berpasangan dengan penutup dengan bracket<\/em>. Web browser akan membaca HTML untuk dirender menjadi format visual yang ditampilkan.<\/p>\n\n\n\n

Apa Itu HTML5 <\/strong><\/h2>\n\n\n\n

Tentu kita bisa mengetahui jika HTML5 adalah versi ke-5 dari pengembangan HTML yang digunakan oleh para web developer <\/em>sebagai struktur dasar dalam dunia triple W.<\/p>\n\n\n\n

HTML5 adalah versi yang lebih powerfull <\/em>dari pendahulunya, yaitu HTML 4 yang telah distandarisasi sejak 1997. Tujuan dikembangkannya bahasa markup <\/em>ini tentu saja untuk mengikuti perkembangan teknologi informasi dan meningkatkan dukungan terhadap struktur bahasa yang digunakan untuk file multimedia modern.<\/p>\n\n\n\n

Tenang, tetap mempertahankan struktur bahasa yang mudah dipahami kok dan dapat dimengerti oleh berbagai mesin dan perangkat lainnya.<\/p>\n\n\n\n

Perbedaan HTML dan HTML5 <\/strong><\/h2>\n\n\n\n

Berikut ini ada beberapa perbedaan antara keduanya yang mesti diketahui:<\/p>\n\n\n\n

Penanganan Error <\/strong><\/h3>\n\n\n\n

Sebuah halaman website pada web browser tidak terlihat sama tampilannya pada semua browser. Hal tersebut sebenarnya hal biasa. Penyebabnya adalah kode HTML tersebut yang kurang sempurna untuk web browser tersebut, yakni karena kesalahan pada saat menulis HTML tidak dapat dihindari.<\/p>\n\n\n\n

Pada HTML5 terdapat penanganan error yang lebih baik dari pendahulunya. Hal ini tentu saja dapat sangat memudahkan kinerja web developer dalam pembuatan algoritma parsing. <\/p>\n\n\n\n

Kemudahan untuk Membuat Aplikasi Web <\/strong><\/h3>\n\n\n\n

Sebagaimana kita ketahui bahwa sebelum HTML5 dirilis, hampir semua website bersifat statis karena HTML versi terdahulu tidak memiliki fitur bawaaan yang bisa mendukung konten yang dinamis, seperti, audio, video, dan animasi. Untuk membuatnya web developer masih bergantung kepada platform, seperti flash dan JavaScript.<\/p>\n\n\n\n

Setelah dikembangkannya HTML ke versi HTML5, banyak website yang kerjanya menyerupai aplikasi, sebagai contoh YouTube dan Twitter. HTML5 juga bisa membantu membuat konten dinamis bekerja lebih lancar.<\/p>\n\n\n\n

Kompatibel dengan lebih Banyak Browser <\/strong><\/h3>\n\n\n\n

Saat ini banyak sekali web browser yang tersedia, baik itu di PC, laptop, dan perangkat mobile<\/em>. Tentu saja web browser tersebut masih bisa membaca website dengan kode HTML versi lama.<\/p>\n\n\n\n

Namun, tidak semua web browser bisa melakukannya. Nah, dengan HTML5 nih, website yang dibuat telah dioptimalkan untuk bisa dibaca oleh semua web browser yang tersedia saat ini.<\/p>\n\n\n\n

Penyimpanan Informasi Secara Lokal<\/strong><\/h3>\n\n\n\n

Semua versi pendahulu HTML5 tentu saja memungkinkan untuk menyimpan informasi pengguna website. Hal ini sangat diperlukan terutama untuk website yang memiliki konten interaktif. Namun, sebagaimana telah diketahui jika penyimpanan dengan sistem cookies <\/em>tidak dapat menampung data dalam jumlah banyak.<\/p>\n\n\n\n

Nah, pada HTML5 cara penyimpanan informasi telah dikembangkan dengan objek \u201clocalstorage<\/strong>\u201d yang menggantikan cookies <\/em>pada HTML pendahulunya dengan sistem penyimpanan lokal browser pengguna internet.<\/p>\n\n\n\n

Menjalankan JavaScript di Web Browser<\/strong><\/h3>\n\n\n\n

Pada HTML versi sebelumnya, kode JavaScript hanya bisa dijalankan pada thread interface<\/em> browser. Hal ini menyebabkan konten interaktif pada halaman tidak dapat berfungsi hingga halaman tersebut selesai dimuat.<\/p>\n\n\n\n

Menariknya, HTML5 hadir dengan JS Worker API yang memungkinkan JavaScript berjalan pada thread <\/em>yang terpisah. Dengan demikian, pengguna browser tetap dapat berinteraksi pada halaman tersebut.<\/p>\n\n\n\n

Fokus Otomatis pada Kolom Form<\/strong><\/h3>\n\n\n\n

Nah, untuk poin satu ini, silakan kalian coba buka sebuah halaman website dengan form di dalamnya. Sebagai contoh, sebut saja halaman login sebuah website, .<\/p>\n\n\n\n

Jika kursor kalian langsung muncul di salah satu kolom form tersebut, berarti website tersebut dibuat menggunakan HTML5.<\/p>\n\n\n\n

Dukungan untuk Grafik Vektor<\/strong><\/h3>\n\n\n\n

Guys, kalian sudah tahu dong ya bahwa website responsive <\/em>kini merupakan sebuah keharusan. Namun, pembuatannya membutuhkan desain visual yang ukurannya bisa diperbesar tanpa terdistorsi.<\/p>\n\n\n\n

Grafik vektor, yang melingkupi file-file dengan tipe SVG, AI, dan EPS, adalah solusinya. Kualitas grafik vektor tetap terjaga lho, tidak seperti file JPG atau PNG yang pecah ketika diperbesar.<\/p>\n\n\n\n

Dukungan untuk grafik vektor pun sudah termasuk di dalam daftar keunggulannya karena HTML5 mempermudah pembuatan website responsive.<\/p>\n\n\n\n

Support untuk Konten Video dan Audio<\/strong><\/h3>\n\n\n\n

HTML4 memang tidak memiliki dukungan yang baik untuk konten-konten video dan audio karena kecepatan koneksi internet di akhir dekade 90-an kurang memadai.<\/p>\n\n\n\n

Oleh karena itu, tidak aneh jika pembuatan website berisi konten multimedia dengan HTML4 tidak mudah dilakukan.<\/p>\n\n\n\n

Sebagai solusi dari masalah tersebut, HTML5 diciptakan dengan fitur-fitur yang memudahkan. Contohnya adalah atribut controls<\/em> yang digunakan untuk membuat tombol play <\/em>dan pause <\/em>pada sebuah media player.<\/p>\n\n\n\n

Belajar HTML5 (Cheat Sheet)<\/strong><\/h2>\n\n\n\n

Bagi yang belum pernah belajar HTML5, versi terbaru ini mungkin cukup membingungkan. Apalagi ada banyak tag baru yang barangkali belum kalian kenal. Nah, di bawah ini kami sediakan \u201ccontekan\u201d yang berisi daftar tag beserta artinya. <\/p>\n\n\n\n

Document Outline<\/strong><\/td><\/td><\/tr>
<!DOCTYPE><\/strong><\/td>Versi HTML<\/strong><\/td><\/tr>
<html><\/strong><\/td>Dokumen HTML<\/strong><\/td><\/tr>
<head><\/strong><\/td>Penampung metadata halaman<\/strong><\/td><\/tr>
<body><\/strong><\/td>Konten halaman<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Komentar<\/strong><\/td><\/td><\/tr>
<!\u2013 \u2013><\/strong><\/td>Menuliskan komentar di dalam kode<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Informasi Halaman<\/strong><\/td><\/td><\/tr>
<base><\/strong><\/td>Base URL<\/strong><\/td><\/tr>
<meta><\/strong><\/td>Metadata<\/strong><\/td><\/tr>
<title><\/strong><\/td>judul<\/strong><\/td><\/tr>
<link><\/strong><\/td>Menghubungkan halaman dengan sumber luar<\/strong><\/td><\/tr>
<style><\/strong><\/td>Tampilan sebuah elemen<\/strong><\/td><\/tr>
<script><\/strong><\/td>Menampung sebuah script<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Struktur Dokumen<\/strong><\/td><\/td><\/tr>
<h[1-6]><\/strong><\/td>Heading<\/strong><\/td><\/tr>
<div><\/strong><\/td>Section halaman<\/strong><\/td><\/tr>
<span><\/strong><\/td>Menentukan warna sebuah teks<\/strong><\/td><\/tr>
<p><\/strong><\/td>Paragraf<\/strong><\/td><\/tr>
<br><\/strong><\/td>Line Break<\/strong><\/td><\/tr>
<hr><\/strong><\/td>Garis horizontal untuk menandai batas sebuah section<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Link<\/strong><\/td><\/td><\/tr>
<a href =\u201d\u201d><\/strong><\/td>Link halaman<\/strong><\/td><\/tr>
<a href =\u201dmailto\u201d><\/strong><\/td>Link email<\/strong><\/td><\/tr>
<a href =\u201dname\u201d><\/strong><\/td>Anchor<\/strong><\/td><\/tr>
<a href =\u201d#name\u201d><\/strong><\/td>Link ke anchor<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Markup Teks<\/strong><\/td><\/td><\/tr>
<strong><\/strong><\/td>Membuat teks cetak tebal<\/strong><\/td><\/tr>
<em><\/strong><\/td>Membuat teks cetak miring<\/strong><\/td><\/tr>
<blockquote><\/strong><\/td>Kutipan dari sumber luar<\/strong><\/td><\/tr>
<q><\/strong><\/td>Kutipan pendek<\/strong><\/td><\/tr>
<abbr><\/strong><\/td>Singkatan (Prof., Dr.)<\/strong><\/td><\/tr>
<acronym><\/strong><\/td>Singkatan (HTML, JS)<\/strong><\/td><\/tr>
<address><\/strong><\/td>Alamat<\/strong><\/td><\/tr>
<pre><\/strong><\/td>Teks preformatted<\/strong><\/td><\/tr>
<dfn><\/strong><\/td>Definisi<\/strong><\/td><\/tr>
<code><\/strong><\/td>Kode<\/strong><\/td><\/tr>
<cite><\/strong><\/td>Membuat teks miring untuk menyebut judul sebuah karya<\/strong><\/td><\/tr>
<del><\/strong><\/td>Memberi garis pada teks<\/strong><\/td><\/tr>
<ins><\/strong><\/td>Menggarisbawahi teks<\/strong><\/td><\/tr>
<sub><\/strong><\/td>Teks subscript<\/strong><\/td><\/tr>
<sup><\/strong><\/td>Teks superscript<\/strong><\/td><\/tr>
<bdo><\/strong><\/td>Arah teks (kiri-kanan atau sebaliknya)<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
List<\/strong><\/td><\/td><\/tr>
<ol><\/strong><\/td>Ordered list<\/strong><\/td><\/tr>
<ul><\/strong><\/td>Unordered list<\/strong><\/td><\/tr>
<li><\/strong><\/td>Item sebuah list<\/strong><\/td><\/tr>
<dl><\/strong><\/td>List istilah beserta definisinya<\/strong><\/td><\/tr>
<dt><\/strong><\/td>Istilah yang didefinisikan<\/strong><\/td><\/tr>
<dd><\/strong><\/td>Definisi istilah<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Form<\/strong><\/td><\/td><\/tr>
<form><\/strong><\/td>Form<\/strong><\/td><\/tr>
<fieldset><\/strong><\/td>Menyatukan beberapa kolom form dalam satu kategori<\/strong><\/td><\/tr>
<legend><\/strong><\/td>Memberi judul pada suatu <fieldset><\/strong><\/td><\/tr>
<label><\/strong><\/td>Membuat daftar opsi berbentuk checkbox<\/strong><\/td><\/tr>
<input><\/strong><\/td>Membuat kolom form<\/strong><\/td><\/tr>
<select><\/strong><\/td>Membuat drop-down list<\/strong><\/td><\/tr>
<optgroup><\/strong><\/td>Membuat teks cetak tebal yang digunakan untuk mengklasifikasikan item dalam drop-down box<\/strong><\/td><\/tr>
<option><\/strong><\/td>Membuat item dalam drop-down list<\/strong><\/td><\/tr>
<textarea><\/strong><\/td>Membuat kolom form dengan kapasitas tak terbatas<\/strong><\/td><\/tr>
<button><\/strong><\/td>Tombol<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Tabel<\/strong><\/td><\/td><\/tr>
<table><\/strong><\/td>Tabel<\/strong><\/td><\/tr>
<caption><\/strong><\/td>Memberi judul pada suatu tabel<\/strong><\/td><\/tr>
<thead><\/strong><\/td>Header tabel<\/strong><\/td><\/tr>
<tbody><\/strong><\/td>Body tabel<\/strong><\/td><\/tr>
<tfoot><\/strong><\/td>Footer tabel<\/strong><\/td><\/tr>
<colgroup><\/strong><\/td>Mengkategorikan satu atau lebih kolom tabel<\/strong><\/td><\/tr>
<col><\/strong><\/td>Menentukan warna sebuah kolom<\/strong><\/td><\/tr>
<tr><\/strong><\/td>Baris tabel<\/strong><\/td><\/tr>
<th><\/strong><\/td>Cell header<\/strong><\/td><\/tr>
<td><\/strong><\/td>Cell biasa<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Gambar<\/strong><\/td><\/td><\/tr>
<img><\/strong><\/td>Gambar<\/strong><\/td><\/tr>
<map><\/strong><\/td>Gambar dengan bagian yang dapat diklik<\/strong><\/td><\/tr>
<area><\/strong><\/td>Bagian gambar yang dapat diklik<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Objek<\/strong><\/td><\/td><\/tr>
<object><\/strong><\/td>Objek multimedia yang disematkan pada halaman<\/strong><\/td><\/tr>
<param><\/strong><\/td>Parameter untuk mengontrol objek multimedia<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Okay Guys, jadi itulah beberapa perbedaan HTML dan HTML5. HTML5 merupakan versi perbaikan dari pendahulunya yang bisa mengakomodasi hampir semua kebutuhan kalian dalam mendevelop sebuah website.<\/p>\n\n\n\n

Bagi kalian yang masih bingung bagaimana cara membuat website, tenang saja. Jetorbit punya solusinya. Kalian bisa langsung cek ke Jetorbit<\/a> guna memenuhi kebutuhan pembuatan website kalian. Selain itu, kami juga menyediakan VPS yang bisa dicek di sini<\/a>.<\/p>\n\n\n\n

Selamat mencoba!<\/p>\n","protected":false},"excerpt":{"rendered":"

Guys, kalian yang menekuni dunia IT tentu sudah paham bahwa semua elemen yang berada di platform digital terus dikembangkan untuk menunjang kebutuhan industri dan mengikuti kemajuan teknologi. Hal ini juga terjadi pada salah satu bahasa pemrograman HTML. Kali ini kami akan menyampaikan tentang perbedaan HTML dan HTML5. Okay, mari cari tahu perbedaan HTML dan HTML5 … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":9744,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"generate_page_header":"","footnotes":""},"categories":[25],"tags":[2028,2428,2430,283,7,944,2427,2429],"class_list":["post-8217","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-info","tag-apa-itu-html","tag-apa-itu-html5","tag-belajar-html5","tag-domain-murah","tag-hosting-murah","tag-html-adalah","tag-html5-adalah","tag-perbedaan-html-dan-html5","infinite-scroll-item","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-33"],"_links":{"self":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/8217","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/comments?post=8217"}],"version-history":[{"count":1,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/8217\/revisions"}],"predecessor-version":[{"id":8219,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/8217\/revisions\/8219"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/media\/9744"}],"wp:attachment":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/media?parent=8217"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/categories?post=8217"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/tags?post=8217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}