HTML ialah bahasa markup yang sangat sering digunakan pada penyusunan situs. Sejak mulai mengudara di 2014, versi kelima HTML telah digunakan secara luas. Akan tetapi, telah tahukah Sahabat apa itu HTML5? Apa perbedaan HTML dan HTML5? Mari ikuti pembahasannya di artikel ini!
Apa Itu HTML?
Sebelum belajar mengenai apa itu HTML5, ada baiknya apabila Sahabat memahami pengertian HTML terlebih dahulu. Sesuai dengan namanya, HTML atau hypertext markup language ialah sebuah bahasa markup yang menjadi diantara mendasar penyusunan situs.
Tak seperti bahasa pemrograman yang bertugas mengolah input data dengan logika yang telah ditetapkan, bahasa markup ditulis bagi memberikan struktur di sebuah halaman situs. Agar konsep tersebut dapat lebih gampang dimengerti, perhatikanlah penjelasan berikut ini.
Cara Kerja HTML
Di dasarnya, HTML digunakan bagi menunjukkan elemen-elemen yang terdapat di suatu halaman situs. Setiap unsur ditunjukkan dengan tag <> (pembuka) dan </> (penutup).
Kedua tag tersebut berisi inisial yang mewakili sebuah unsur halaman situs. Contohnya ialah <p> yang merepresentasikan sebuah paragraf.
Akan tetapi, tag tersebut hanyalah sebuah penanda. Agar mempunyai konten, Sahabat perlu memasukkan teks di antara tag <p> dan </p>. Dengan demikian, Sahabat baru saja membangun sebuah paragraf.
Namun, pastinya HTML tak hanya terdiri dari elemen-elemen. Bagi memahaminya lebih lanjut, Sahabat dapat membaca panduan belajar HTML kami.
Perbedaan HTML dan HTML5
Versi keempat dari HTML telah digunakan sejak 1997. Pastinya teknologi internet dan situs telah berkembang pesat sejak itu. Nah, HTML5 ialah perbaikan dari HTML. Versi ini diciptakan selaku solusi bagi keperluan ketika ini — salah satunya ialah dukungan bagi membangun website yang bersifat mobile-friendly.
Namun, perbedaan HTML5 dari pendahulunya tak berhenti di situ. Berikut ini ialah keunggulan-keunggulan lainnya yang dimiliki HTML5:
- Penanganan Error yang Lebih Bagus
- Kemudahan bagi Merancang Program Web
- Syntax yang Lebih Sederhana
- Dukungan bagi Penyusunan Blog Memiliki tampilan yang dinamis
- Support bagi Konten Video dan Audio
- Dukungan bagi Grafik Vektor
- Kompatibel dengan lebih Banyak Browser
- Penyimpanan Informasi secara Lokal
- Fokus Otomatis di Kolom Form
- Menjalankan JavaScript di Web Browser
1. Penanganan Error yang Lebih Bagus
Bukalah sebuah halaman situs di beberapa web browser yang berbeda. Dapat jadi, ada beberapa bagian dari tampilannya yang tak terlihat sama di masing-masing browser. Penyebabnya ialah kode HTML halaman tersebut yang kurang sempurna bagi web browser tertentu.
Akan tetapi, kesalahan pada penulisan kode HTML tak dapat dihindari. Oleh karena itu, telah menjadi kewajiban developer web browser bagi membangun algoritma parsing bagi menangani contoh error di atas.
Untungnya, HTML5 menawarkan program penanganan error yang lebih bagus dari pendahulunya. Hal ini pun mempermudah performa developer web browser pada penyusunan algoritma parsing.
Dengan kata lain, situs yang ditulis dengan HTML5 menolong web browser bagi menangani kode HTML yang tak sempurna.
2. Kemudahan bagi Merancang Program Web
Sebelum dirilisnya HTML5, mayoritas situs bersifat statis karena HTML versi terdahulu tak mempunyai fitur bawaan yang mendukung konten dinamis seperti animasi dan video. Bagi memungkinkannya, web developer masih bergantung banyak di Flash dan JavaScript.
Namun, banyak situs ketika ini yang tampilan dan performanya menyerupai program yang berjalan di luar web browser. Coba Sahabat lihat Twitter dan YouTube selaku contohnya.
Pun, kini telah banyak situs dengan model single page. Situs-situs ini hanya menggunakan satu halaman yang ditulis menggunakan HTML, tetapi dapat menampilkan konten interaktif. Contohnya Yakni produk-produk Google seperti Gmail.
Segala itu dapat terjadi berkat bermacam unsur baru pada HTML5 yang menggantikan performa Flash dan JavaScript. Di samping itu, versi kelima ini pun membangun konten dinamis bekerja dengan lebih tanpa hambatan.
3. Syntax yang Lebih Sederhana
Sebelum implementasi HTML5, web developer mesti menggunakan tag <div> bagi bermacam macam unsur. Tag tersebut diperlukan bagi menandai sebuah section di halaman situs.
Pemakaian tag tersebut tak menjadi masalah apabila Sahabat membangun sebuah halaman yang sederhana. Akan tetapi, hal ini dapat merepotkan developer ketika menulis kode bagi halaman situs dengan struktur kompleks.
Untungnya, HTML5 mengganti penandaan section dengan syntax yang lebih sederhana, seperti tag <nav> bagi menunjukkan fitur navigasi situs dan tag <footer> yang merepresentasikan bagian footer halaman. Pastinya ini menjadi diantara manfaat HTML5 untuk web developer yang sangat urgen.
4. Dukungan bagi Penyusunan Blog Memiliki tampilan yang dinamis
Telepon seluler belum dilengkapi dengan web browser ketika HTML4 diluncurkan. Inilah alasan kenapa versi tersebut belum mempunyai framework bagi penyusunan situs mobile yang efisien.
Akan tetapi, kebiasaan browsing telah berubah banyak sejak ketika itu. Di 2018 saja, 58% akses situs dilakukan via perlengkapan mobile.
Nah, HTML5 dikerjakan selaku solusi bagi perubahan tersebut. Dengan keluaran terbaru ini, web developer dapat membuat website memiliki tampilan yang dinamis, yaitu situs yang tampilannya dapat diadaptasikan bagi tampilan mobile dengan lebih gampang.
Baca Pun: Cara Membuat Template WordPress Responsive dengan HTML5
5. Support bagi Konten Video dan Audio
HTML4 memang tak mempunyai dukungan yang bagus bagi konten-konten video dan audio karena kecepatan koneksi internet di ahir dekade 90-an yang kurang memadai.
Karenanya dari itu, tak aneh apabila penyusunan situs berisi konten multimedia dengan HTML4 tak gampang dilakukan.
Selaku solusi dari masalah tersebut, HTML5 diciptakan dengan fitur-fitur yang mempermudahnya. Contohnya ialah atribut controls yang digunakan bagi membangun tombol play dan pause di sebuah media player.
6. Dukungan bagi Grafik Vektor
Seperti yang telah disebutkan sebelumnya, situs memiliki tampilan yang dinamis kini adalah sebuah keharusan. Namun, pembuatannya membutuhkan desain visual yang ukurannya dapat diperbesar tanpa terdistorsi.
Grafik vektor, yang melingkupi file-file dengan tipe SVG, AI, dan EPS, ialah solusinya. Tak seperti file JPG atau PNG yang pecah ketika diperbesar, kualitas grafik vektor tetap terjaga.
Karena HTML5 mempermudah penyusunan situs memiliki tampilan yang dinamis, dukungan bagi grafik vektor pun telah termasuk di pada daftar keunggulannya.
Baca Pun: Cara Aman Mengaktifkan Dukungan SVG di WordPress
7. Kompatibel dengan lebih Banyak Browser
Dikala ini telah ada demikian itu banyak web browser yang terdapat. Tak hanya di laptop dan komputer, tetapi pun di perlengkapan mobile.
Sebetulnya browser-browser tersebut masih dapat membaca situs yang ditulis dengan HTML versi lama. Akan tetapi, tak semuanya dapat menerjemahkan kode HTML4 dengan bagus.
Di sisi lain, situs yang dikerjakan dengan HTML5 telah dioptimalkan bagi bermacam web browser yang terdapat ketika ini.
8. Penyimpanan Informasi secara Lokal
Versi-versi HTML sebelumnya memang telah memungkinkan penyimpanan informasi pengguna situs. Hal ini diperlukan, terutama bagi situs yang mempunyai konten interaktif.
Akan tetapi, penyimpanannya dilakukan dengan program cookies yang notabene hanya mampu menampung sedikit data.
Di HTML5, cara penyimpanan informasi telah ditingkatkan dengan objek localStorage yang menggantikan cookies dengan penyimpanan lokal browser pengguna internet.
9. Fokus Otomatis Di Kolom Form
Bagi memahami keunggulan ini, coba Sahabat buka sebuah halaman situs dengan form di dalamnya. Sebut saja halaman login sebuah situs, selaku contohnya.
Jikalau kursor Sahabat seketika muncul di diantara kolom form tersebut, berarti situs tersebut dikerjakan menggunakan HTML5.
10. Menjalankan JavaScript di Web Browser
Di situs yang menggunakan HTML versi sebelumnya, kode JavaScript hanya dapat dijalankan di thread antarmuka browser. Hal ini menyebabkan konten interaktif di halaman tak berfungsi hingga halaman tersebut selesai dimuat.
Kabar baiknya, HTML5 hadir dengan JS Worker API yang memungkinkan JavaScript bagi berjalan di thread terpisah. Dengan demikian, pengguna browser tetap dapat berinteraksi dengan halaman tersebut, seperti klik tombol dan mengetik pada sebuah kolom.
Belajar HTML5 (Cheat Sheet)
Untuk yang belum pernah belajar HTML5, versi terbaru ini mungkin lumayan membingungkan. Apalagi, ada banyak tag baru yang barangkali belum Sahabat kenali. Bagi itu, di bawah ini kami sediakan “contekan” yang berisi daftar tag dan juga artinya. Selamat menyimak!
| Document Outline | |
| <!DOCTYPE> | Versi HTML |
| <html> | Dokumen HTML |
| <head> | Penampung metadata halaman |
| <body> | Konten halaman |
| Komentar | |
| <!– –> | Menuliskan komentar di pada kode |
| Informasi Halaman | |
| <base> | Base URL |
| <meta> | Metadata |
| <title> | judul |
| <link> | Menghubungkan halaman dengan sumber luar |
| <style> | Tampilan sebuah unsur |
| <script> | Menampung sebuah script |
| Struktur Dokumen | |
| <h[1-6]> | Heading |
| <div> | Section halaman |
| <span> | Menentukan warna sebuah teks |
| <p> | Paragraf |
| <br> | Line Break |
| <hr> | Garis horizontal bagi menandai batas sebuah section |
| Link | |
| <a href =””> | Link halaman |
| <a href =”mailto”> | Link email |
| <a href =”name”> | Anchor |
| <a href =”#name”> | Link ke anchor |
| Markup Teks | |
| <strong> | Merancang teks cetak tebal |
| <em> | Merancang teks cetak miring |
| <blockquote> | Kutipan dari sumber luar |
| <q> | Kutipan pendek |
| <abbr> | Singkatan (Prof., Dr.) |
| <acronym> | Singkatan (HTML, JS) |
| <address> | Domisili |
| <pre> | Teks preformatted |
| <dfn> | Definisi |
| <code> | Kode |
| <cite> | Merancang teks miring bagi menyebut judul sebuah karya |
| <del> | Memberi garis di teks |
| <ins> | Menggarisbawahi teks |
| <sub> | Teks subscript |
| <sup> | Teks superscript |
| <bdo> | Arah teks (kiri-kanan atau sebaliknya) |
| List | |
| <ol> | Ordered list |
| <ul> | Unordered list |
| <li> | Item sebuah list |
| <dl> | List istilah dan juga definisinya |
| <dt> | Istilah yang didefinisikan |
| <dd> | Definisi istilah |
| Form | |
| <form> | Form |
| <fieldset> | Menyatukan beberapa kolom form pada satu kategori |
| <legend> | Memberi judul di suatu <fieldset> |
| <label> | Merancang daftar opsi berbentuk checkbox |
| <input> | Merancang kolom form |
| <select> | Merancang drop-down list |
| <optgroup> | Merancang teks cetak tebal yang digunakan bagi mengklasifikasikan item pada drop-down box |
| <option> | Merancang item pada drop-down list |
| <textarea> | Merancang kolom form dengan kapasitas tak terbatas |
| <button> | Tombol |
| Tabel | |
| <table> | Tabel |
| <caption> | Memberi judul di suatu tabel |
| <thead> | Header tabel |
| <tbody> | Body tabel |
| <tfoot> | Footer tabel |
| <colgroup> | Mengkategorikan satu atau lebih kolom tabel |
| <col> | Menentukan warna sebuah kolom |
| <tr> | Baris tabel |
| <th> | Cell header |
| <td> | Cell biasanya |
| Gambar | |
| <img> | Gambar |
| <map> | Gambar dengan bagian yang dapat diklik |
| <area> | Bagian gambar yang dapat diklik |
| Objek | |
| <object> | Objek multimedia yang disematkan di halaman |
| <param> | Parameter bagi mengendalikan objek multimedia |
Penutup
HTML5 ialah perbaikan dari versi sebelumnya. HTML5 menghadirkan bermacam fitur baru yang memenuhi bermacam keperluan situs lama kini. Di antaranya ialah dukungan bagi konten video dan audio, kemampuan bagi menjalankan JavaScript di browser, dan kemudahan bagi membangun program web.
Semoga artikel ini bermanfaat untuk Sahabat. Jikalau mempunyai pertanyaan, jangan sungkan bagi meninggalkan komentar di kolom yang terdapat di bawah.
Sumber https://niagahoster.co.id/