Fitur Unggulan pada HTML5
HTML merupakan akronim dari Hyper Text Markup Language. HTML digunakan untuk merancang halaman website menggunakan Markup Language. HTML adalah kombinasi dari Hypertext dan Markup Language. Hypertext mendefinisikan antar link pada laman web. Markup language digunakan untuk mendefinisikan dokumen teks dengan tag yang mendefinisikan struktur dari laman web. HTML5 adalah edisi kelima dari versi HTML versi sebelumnya. HTML 5 memiliki peningkatan dalam hal markup language yang tersedia sebelumnya untuk laman web dan memperkenalkan juga Application Programming Interfaces (API) serta Document Object Model (DOM).
Sebelum mempelajari materi tentang Fitur Unggulan pada HTML5, terlebih dahulu pelajari materi tentang: Penggunaan Canvas pada HTML, Elemen Kode Komputer HTML dan Fungsinya, dan Entitas Reserved HTML dan Fungsinya.
Fitur:
Elemen yang Dihapus pada HTML5: Terdapat banyak elemen yang digantikan pada HTML5 seperti yang diperlihatkan berikut ini;
Penambahan Elemen Baru pada HTML5:
Baca Juga:
- HTML 5 memperkenalkan fitur multimedia terbaru yang mendukung pengendalian audio dan video menggunakan tag <audio> dan <video>.
- Terdapat beberapa elemen grafik terbaru termasuk grafik vektor dan beberapa tag.
- Diperkaya dengan konten semantik dengan <header>, <footer>, <article>, <section>, dan <figure> yang juga ikut ditambahkan.
- Fitur drag dan drop yang memungkinkan pengguna untuk mengambil objek dan membawanya kemudian meletakkannya pada lokasi atau posisi baru pada laman web.
- Fasilitas geolokasi membantu menemukan lokasi geografis dari klien.
- Fasilitas penyimpanan web yang menyediakan method aplikasi web untuk menyimpan data pada web browser.
- Penggunaan database SQL untuk menyimpan data secara offline.
- Dimungkinkan untuk menggambar berbagai bentuk seperti segitiga, persegi panjang, lingkaran, dan lain sebagainya.
- Mampu untuk menangani sintak yang bermasalah.
- Mudah untuk mendeklarasi DOCTYPE seperti <!doctype html>.
- Mudah melakukan encoding karakter seperti <meta charset="UTF-8">.
Elemen yang Dihapus pada HTML5: Terdapat banyak elemen yang digantikan pada HTML5 seperti yang diperlihatkan berikut ini;
- Elemen <acronym> diganti dengan <abbr>.
- Elemen <applet> diganti dengan <object>.
- Elemen <basefont> diganti penggunaannya dengan CSS.
- Elemen <big> diganti penggunaannya dengan CSS.
- Elemen <center> diganti penggunaannya dengan CSS.
- Elemen <dir> diganti penggunaannya dengan <ul>.
- Elemen <font> diganti penggunannya dengan CSS.
- Elemen <frame> tidak dipergunakan lagi.
- Elemen <frameset> tidak dipergunakan lagi.
- Elemen <noframes> tidak dipergunakan lagi.
- Elemen <isindex> tidak dipergunakan lagi.
- Elemen <strike> diganti penggunaannya dengan CSS, <S> atau <del>.
- Elemen <tt> diganti penggunaannya dengan CSS.
- <article>: digunakan untuk merepresentasikan artikel. Secara khusus, konten dengan tag ini berdiri sendiri terhadap konten yang lain pada website meskipun berkaitan satu sama lain.
- <aside>: digunakan untuk mendeskripsikan object utama dari laman web untuk mempersingkat langkah seperti highlighter. Tag ini pada dasarnya mengidentifikasi konten yang berkaitan terhadap konten utama pada laman web tetapi bukan inti utama dari laman utama. Tag ini juga mengandung informasi utama author, link, dan konten lainnya yang berkaitan.
- <figcaption>: digunakan untuk mengatur sebuah caption untuk elemen figure pada sebuah dokumen.
- <figure>: digunakan untuk menambah konten mandiri seperti ilustrasi, diagram, foto atau daftar kode dalam sebuah dokumen. Hal ini berkaitan dengan main flow tetapi dapat juga digunakan pada posisi apapun dari sebuah dokumen dan figure mengikuti flow dari dokumen dan jika dihapus maka tidak akan memberikan dampak terhadap flow dari dokumen itu sendiri.
- <header>: mengandung heading section yang sama seperti halnya dengan konten yang lain, seperti link navigasi, daftar isi, dan lain sebagainya.
- <footer>: digunakan untuk mendefinisikan sebuah footer dari dokumen HTML. Section ini mengandung informasi footer berupa informasi author, informasi copyright, karir, dan lain sebagainya. Tag footer juga digunakan bersamaan dengan tag body. Tag ini adalah tag baru yang terdapat pada HTML5. Elemen tag footer mensyaratkan penggunaan tag awalan dan juga tag akhiran.
- <main>: menggambarkan konten utama dari body dokumen atau applikasi web.
- <mark>: digunakan untuk mendefinisikan teks yang telah ditandai. Tag ini digunakan untuk menyoroti bagian dari teks pada paragraf.
- <nav>: digunakan untuk mendeklarasikan navigasi section pada dokumen HTML. Pada dasarnya sebuah website memiliki section bawaan untuk navigasi link, yang memungkinkan pengguna untuk melakukan navigasi pada situs. Link tersebut dapat ditempatkan di dalam tag nav.
- <section>: berfungsi membatasi tema grup dari konten.
- <details>: digunakan untuk konten atau informasi yang awalnya tersembunyi tetapi dapat ditampilkan jika user ingin melihatnya. Tag ini digunakan untuk menciptakan widget interaktif dimana pengguna dapat membuka dan juga menutupnya. Konten dari tag lengkap akan terlihat jika sekumpulan atribut dibuka.
- <summary>: digunakan untuk mendefinisikan ringkasan untuk elemen <details>. Elemen ini digunakan bersamaan dengan elemen <details> dan menyediakan ringkasan yang dapat dilihat oleh user. Ketika ringkasan di klik oleh pengguna atau user, maka konten yang terdapat di dalam elemen <details> akan menjadi terlihat. Tag summary telah ditambahkan pada HTML5 dan mensyarakatkan opening tag dan juga closing tag.
- <time>: digunakan untuk menampilkan waktu. Tag ini juga bisa digunakan untuk melakukan encode tanggal dan waktu pada format bahasa mesin. Keuntungan utama untuk user adalah dapat memberikan waktu pengingat ulang tahun atau jadwal kegiatan pada kalender dan mesin pencari juga dapat menampilkan hasil pencarian yang lebih 'pintar' sesuai dengan kondisi waktu yang berlaku.
- <bdi>: merupaakn tag yang merujuk kepada Bi-Directional Isolation. Tag ini membedakan teks yang terdapat pada tag lainnya terhadap teks yang diformat ke dalam bentuk format yang berbeda. Tag ini digunakan ketika user membuat teks dengan arah yang tidak diketahui.
- <wbr>: merupakan akronim dari Word Break dan digunakan untuk mendefinisikan posisi dalam teks yang diperlakukan sebagai baris terpisah oleh browser. Secara umum digunakan ketika kata atau keyword yang digunakan terlalu panjang dan terdapat kemungkinan bahwa browser dapat memecahnya atau memisah-misahkannya pada penggalan kata yang salah untuk menyesuaikannya terhadap ukuran teks pada browser.
- <datalist>: digunakan untuk menyediakan fitur autocomplete pada file HTML. Tag ini dapat digunakan bersamaan dengan tag input sehingga user dapat dengan mudah mengisi data pada form menggunakan data seleksi.
- <keygen>: digunakan untuk menentukan sebuah kata field generator untuk kata sandi pada form. Tujuan dari elemen ini adalah untuk menyediakan cara aman untuk autentikasi pengguna. Ketika form di-submit maka dua kunci akan di-generate antara private key dan public key. Private key akan disimpan secara lokal dan public key akan dikirim menuju server. Public key digunakan untuk generate sertifikat klien untuk melakukan autentikasi pengguna dikemudian hari.
- <output>: digunakan untuk menampilkan hasil dari hasil perhitungan oleh script dari sisi klien seperti JavaScript.
- <progress>: digunakan untuk menampilkan hasil progres dari pengerjaan tugas. Tag ini juga mendefinisikan sudah sejauh mana laju pengerjaan yang telah diselesaikan dan sejauh mana waktu download yang telah terpakai. Tag ini tidak digunakan untuk merepresentasikan sisa ruang yang dipakai untuk penyimpanan ataupun query lain yang berhubungan dengan hal tersebut.
- <svg>: merupakan akronim dari Scalable Vector Graphics yang dapat digunakan untuk melakukan manipulasi grafik pada halaman website.
- <canvas>: digunakan untuk menggambar grafik pada halaman website menggunakan JavaScript. Tag ini bisa digunakan untuk menggambar jalur, teks, gradien, dan penambahan image. Secara default tag ini tidaklah mengandung border dan juga teks.
- <audio>: tag ini mendefinisikan musik atau konten audio.
- <embed>: tag ini mendefinisikan penampungan untuk aplikasi eksternal seperti video player.
- <source>: mendefinisikan source untuk <video> dan <audio>.
- <track>: mendefinisikan track untuk <video> dan <audio>.
- <video>: mendefinisikan konten video.
- Didukung penggunannya oleh semua browser.
- Lebih banyak perangkat yang ramah digunakan.
- Mudah digunakan dan diimplementasikan.
- HTML 5 jika diintegrasikan dengan CSS, JavaScript, dan lainnya dapat digunakan untuk membangun website yang indah.
Kekurangan:
- Skrip kode yang panjang membuat waktu pengerjaan menjadi lebih lama.
- Hanya browser tipe terbaru yang dapat mendukung penggunaan HTML 5.
Browser pendukung: Telah didukung oleh semua jenis browser. Berikut ini adalah ilustrasi contoh konten HTML 5.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
HTML 5
</title>
<style>
h1
{font-size:50px;}
</style>
</head>
<body>
<h1>
ElfanMauludi
</h1>
</body>
</html>
Output:
ElfanMauludi
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
HTML 5 Demo
</title>
<style>
.MKN
{
font-size:40px;
font-weight:bold;
color:green;}
body
{
text-align:center;}
</style>
</head>
<body>
<div class = "MKN">
ElfanMauludi
</div>
<aside>
<div>
Portal Ilmu Komputer
</div>
</aside>
</body>
</html>
Output:
ElfanMauludi
Referensi Tambahan:
Artikel ini didedikasikan kepada: Delyana Sukahar, Dwi Pratiwiningrum, Fahrunisa Rahma Dewi, Heru Prasetyo, dan Ika Putri Rohmatussa'Diyah.
6 komentar untuk "Fitur Unggulan pada HTML5"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -
Apa yang dimaksud dengan HTML5?
BalasHapusHTML5 merupakan bahasa markup yang digunakan untuk menyusun dan menyajikan konten pada World Wide Web. HTML5 merupakan versi kelima dari HTML dan merupakan versi terbaru yang digunakan saat ini.
HapusApa berbedaan mendasar antara HTML5 dan HTML?
BalasHapusHTML5 mendukung penggunaan media audio dan video, namun tidak menjadi bagian dari dokumen HTML5 itu sendiri, tidak hanya itu HTML 5 mendukung penuh penggunaan dari JavaScript, sedangkan HTML tidak.
HapusApakah HTML5 dapat memberikan ancaman keamanan pada pengembangan situs atau website?
BalasHapusSayangnya jawabannya adalah IYA.
HapusAplikasi yang dibuat dengan menggunakan HTML5 sapa seperti aplikasi berbasis web lainnya, dimana pengembang masih harus mengambil langkah-langkah keamanan yang tepat terhadap serangan dunia maya untuk melindungi data dan komunikasi yang dikembangkan pada aplikasi berbasis HTML5 tersebut.