kode html

Cara menggunakan html5 daring

 Aldwin adalah penulis konten di Niagahoster. Mengkhususkan diri dalam hosting web dan WordPress, dia sangat ingin membantu orang meningkatkan bisnis mereka di internet. Selain pecandu teknologi, Aldwin menyukai fiksi dan fotografi

Beranda » Pengembangan & Desain Web » Pemrograman Dasar » Apa itu HTML5? .

Apa itu HTML5?

25 November 2021 6 mnt dibaca

HTML adalah bahasa markup yang paling sering digunakan dalam pembuatan situs web. Sejak debutnya pada tahun 2014, HTML versi kelima telah banyak digunakan. Namun, apakah Anda sudah tahu apa itu HTML5?

Daftar Isi

Apa itu HTML?

Sebelum mempelajari apa itu HTML5, ada baiknya jika Anda mempelajari HTML dari pengertiannya terlebih dahulu. Seperti namanya, HTML atau hypertext markup language adalah bahasa markup yang menjadi salah satu dasar dalam pembuatan website.

Berbeda dengan bahasa pemrograman yang bertugas mengolah data masukan dengan logika yang telah ditentukan, bahasa markup ditulis untuk memberi struktur pada halaman website. Agar konsep lebih mudah dipahami, perhatikan penjelasan berikut ini

Baca Juga. 25+ Contoh Coding HTML untuk Pemula

Cara Kerja HTML

Pada dasarnya HTML digunakan untuk menampilkan elemen-elemen yang terdapat pada halaman website. Setiap elemen ditandai dengan tag (pembuka) dan (penutup).

Kedua tag tersebut berisi inisial yang mewakili sebuah elemen halaman website. Contohnya adalah

yang merepresentasikan sebuah paragraf yang biasa diketikkan pada sebuah HTML Editor.

Akan tetapi, tag tersebut hanyalah sebuah penanda. Agar memiliki konten, Anda perlu memasukkan teks di antara tag

dan

. Dengan demikian, Anda baru saja membuat sebuah paragraf.

Namun, tentunya HTML tidak hanya terdiri dari elemen. Untuk memahaminya lebih lanjut, Anda dapat membaca

Baca juga. Kode Warna HTML

Perbedaan antara HTML dan HTML5

HTML5 adalah peningkatan dari HTML. Versi ini dibuat sebagai solusi untuk kebutuhan saat ini — salah satunya adalah dukungan untuk membuat situs web yang ramah seluler

HTML5 mampu menangani kesalahan lebih baik daripada HTML. Selain itu, HTML5 juga menggunakan sintaks yang lebih sederhana daripada HTML, sehingga developer dapat membuat struktur halaman website yang kompleks dengan lebih mudah

Namun, perbedaan antara HTML5 dan pendahulunya tidak berhenti sampai di situ. Berikut kelebihan lain yang dimiliki HTML5

  1. Penanganan Kesalahan yang Lebih Baik
  2. Kemudahan Membuat Aplikasi Web
  3. Sintaks yang lebih sederhana
  4. Dukungan untuk Pembuatan Situs Web yang Responsif
  5. Dukungan untuk Konten Video dan Audio
  6. Dukungan untuk Grafik Vektor
  7. Kompatibel dengan lebih banyak Browser
  8. Penyimpanan Informasi Lokal
  9. Fokus Otomatis pada Kolom Formulir
  10. Menjalankan JavaScript di Peramban Web

Mari kita bahas satu per satu

1. Penanganan Kesalahan yang Lebih Baik

Buka halaman situs web di beberapa browser web yang berbeda. Bisa jadi ada beberapa bagian tampilan yang tidak terlihat sama di masing-masing browser. Penyebabnya adalah kode HTML halaman yang tidak sempurna untuk web browser tertentu

Namun, kesalahan dalam penulisan kode HTML tidak dapat dihindari. Oleh karena itu, sudah menjadi tugas developer web browser untuk membuat algoritma parsing untuk mengatasi contoh error di atas

Untungnya, HTML5 menawarkan sistem penanganan kesalahan yang lebih baik daripada pendahulunya. Hal ini juga mempermudah kinerja developer web browser dalam membuat algoritma parsing

Dengan kata lain, situs web yang ditulis dengan HTML5 membantu browser web menangani kode HTML yang tidak sempurna

2. Kemudahan Membuat Aplikasi Web

Sebelum rilis HTML5, sebagian besar situs web bersifat statis karena versi HTML sebelumnya tidak memiliki fitur bawaan yang mendukung konten dinamis seperti animasi dan video. Untuk memungkinkannya, pengembang web masih sangat bergantung pada Flash dan JavaScript

Namun, saat ini banyak website yang tampilan dan performanya menyerupai aplikasi yang berjalan di luar web browser. Lihatlah Twitter dan YouTube misalnya

Bahkan sekarang sudah banyak website dengan model satu halaman. Situs-situs ini hanya menggunakan satu halaman yang ditulis menggunakan HTML, tetapi dapat menampilkan konten interaktif. Contohnya adalah produk Google seperti Gmail

Semua itu bisa terjadi berkat berbagai elemen baru di HTML5 yang menggantikan performa Flash dan JavaScript. Selain itu, versi kelima ini juga membuat konten dinamis bekerja lebih lancar

3. Sintaks yang lebih sederhana

Sebelum implementasi HTML5, web developer harus menggunakan tag

untuk berbagai macam elemen. Tag tersebut diperlukan untuk menandai sebuah section pada halaman website.

Penggunaan tag tidak menjadi masalah jika Anda membuat halaman sederhana. Namun, hal ini dapat menyusahkan developer saat menulis kode untuk halaman situs web dengan struktur yang rumit

Untungnya, HTML5 mengganti penandaan section dengan syntax yang lebih sederhana, seperti tag untuk menunjukkan menu navigasi website dan tag yang merepresentasikan bagian footer halaman. Tentunya ini menjadi salah satu manfaat HTML5 bagi web developer yang paling penting.

4. Dukungan untuk Pembuatan Situs Web yang Responsif

Ponsel belum dilengkapi dengan browser web saat HTML4 diluncurkan. Inilah alasan mengapa versi tersebut tidak memiliki kerangka kerja untuk pembuatan situs web seluler yang efisien

Namun, kebiasaan menjelajah telah banyak berubah sejak saat itu. Pada tahun 2018 saja, 58% akses website dilakukan melalui perangkat mobile

Nah, HTML5 dibuat sebagai solusi untuk perubahan tersebut. Dengan rilis terbaru ini, web developer dapat membuat website yang responsive yaitu website yang tampilannya dapat diadaptasi untuk tampilan mobile dengan lebih mudah.

Baca Juga. Cara Membuat Template WordPress Responsif dengan HTML5

5. Dukungan untuk Konten Video dan Audio

HTML4 tidak memiliki dukungan yang baik untuk konten video dan audio karena kecepatan koneksi internet yang tidak memadai di akhir tahun 90-an.

Oleh karena itu, tidak aneh jika membuat website berisi konten multimedia dengan HTML4 tidak mudah dilakukan

Sebagai solusi dari masalah tersebut, dibuatlah HTML5 dengan fitur-fitur yang memudahkan. Contohnya adalah atribut kontrol yang digunakan untuk membuat tombol putar dan jeda pada pemutar media

6. Dukungan untuk Grafik Vektor

Seperti disebutkan sebelumnya, situs web yang responsif sekarang menjadi suatu keharusan. Namun pembuatannya memerlukan desain visual yang ukurannya dapat diperbesar tanpa distorsi

Grafik vektor, yang menyertakan file SVG, AI, dan EPS, adalah solusinya. Tidak seperti file JPG atau PNG yang pecah saat diperbesar, kualitas grafik vektor tetap utuh

Karena HTML5 memfasilitasi pembuatan situs web yang responsif, dukungan untuk grafik vektor juga termasuk dalam daftar kelebihannya

Baca Juga. Cara Aman Mengaktifkan Dukungan SVG di WordPress

7. Kompatibel dengan lebih banyak Browser

Saat ini banyak sekali web browser yang tersedia. Tidak hanya di laptop dan komputer, tetapi juga di perangkat seluler

Faktanya, browser tersebut masih dapat membaca situs web yang ditulis dengan HTML versi lama. Namun, tidak semua dapat menerjemahkan kode HTML4 dengan baik

Di sisi lain, situs web yang dibuat dengan HTML5 telah dioptimalkan untuk berbagai browser web yang tersedia saat ini

8. Penyimpanan Informasi Lokal

Versi HTML sebelumnya telah memungkinkan untuk menyimpan informasi pengguna situs web. Ini diperlukan, terutama untuk situs web yang memiliki konten interaktif

Namun penyimpanan dilakukan dengan sistem cookie yang hanya mampu menampung data dalam jumlah kecil

Di HTML5, cara penyimpanan informasi telah diperbaiki dengan objek localStorage yang menggantikan cookie dengan penyimpanan lokal browser pengguna internet

9. Fokus Otomatis Pada Kolom Formulir

Untuk memahami keunggulan ini, coba buka halaman situs web dengan formulir di dalamnya. Katakanlah halaman login sebuah situs web, misalnya

Jika kursor Anda langsung muncul di salah satu kolom form, berarti website tersebut dibuat menggunakan HTML5

Baca juga. Contoh Browser Web Tercepat

10. Menjalankan JavaScript di Peramban Web

Di situs web yang menggunakan versi HTML sebelumnya, kode JavaScript hanya dapat dijalankan di utas antarmuka browser. Ini menyebabkan konten interaktif di halaman tidak berfungsi hingga halaman selesai dimuat

Kabar baiknya adalah HTML5 hadir dengan JS Worker API yang memungkinkan JavaScript berjalan di utas terpisah. Dengan demikian, pengguna browser tetap dapat berinteraksi dengan halaman tersebut, seperti mengklik tombol dan mengetik di kolom

Pelajari HTML5 (Lembar Cheat)

Bagi yang belum pernah belajar HTML5, versi terbaru ini mungkin cukup membingungkan. Apalagi banyak tag baru yang mungkin belum kamu ketahui. Untuk itu di bawah ini kami sediakan "cheat" yang berisi daftar tag beserta artinya. Selamat mendengarkan

Document OutlineVersi HTMLDokumen HTMLPenampung metadata halamanKonten halamanKomentarMenuliskan komentar di dalam kodeInformasi HalamanBase URLMetadatajudulMenghubungkan halaman dengan sumber luarTampilan sebuah elemenMenampung sebuah scriptStruktur DokumenHeading
Section halamanMenentukan warna sebuah teks

Paragraf
Line BreakGaris horizontal untuk menandai batas sebuah sectionLinkLink halamanLink emailAnchorLink ke anchorMarkup TeksMembuat teks cetak tebalMembuat teks cetak miring

Kutipan dari sumber luarKutipan pendekSingkatan (Prof., Dr.)Singkatan (HTML, JS)AlamatTeks preformattedDefinisiKodeMembuat teks miring untuk menyebut judul sebuah karyaMemberi garis pada teksMenggarisbawahi teksTeks subscriptTeks superscriptArah teks (kiri-kanan atau sebaliknya)List
    Ordered list