Seiring dengan perkembangan teknologi dan kebutuhan untuk meningkatkan kemampuan web, standar HTML terus berkembang.
Salah satu versi terbaru adalah HTML5. Dalam artikel ini, kita akan menjelaskan perbedaan antara HTML biasa (HTML sebelum HTML5) dan HTML5.
## 1. **Peningkatan Semantic Element**
Salah satu perbedaan utama antara HTML biasa dan HTML5 adalah adanya peningkatan pada elemen semantik. HTML5 memperkenalkan beberapa elemen baru seperti `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, dan lain-lain. Penggunaan elemen semantik ini memudahkan pembaca dan mesin pencari untuk memahami struktur dan makna konten halaman web.
Contoh penggunaan elemen semantik di HTML5:
```html
<!DOCTYPE html>
<html>
<head>
<title>Contoh HTML5</title>
</head>
<body>
<header>
<h1>Halaman Utama</h1>
</header>
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>
<main>
<section>
<h2>Artikel Pertama</h2>
<p>Ini adalah artikel pertama pada halaman web kami.</p>
</section>
<section>
<h2>Artikel Kedua</h2>
<p>Ini adalah artikel kedua pada halaman web kami.</p>
</section>
</main>
<footer>
<p>Hak Cipta © 2023 Contoh HTML5. All rights reserved.</p>
</footer>
</body>
</html>
```
## 2. **Dukungan untuk Media dan Grafis**
HTML5 menyediakan elemen-elemen seperti `<audio>` dan `<video>` yang memungkinkan penanaman dan pemutaran media seperti audio dan video langsung di halaman web tanpa menggunakan plugin eksternal. Selain itu, HTML5 juga mendukung elemen `<canvas>`, yang memungkinkan pembuatan dan manipulasi grafis secara langsung melalui JavaScript.
Contoh penggunaan elemen media dan grafis di HTML5:
```html
<!DOCTYPE html>
<html>
<head>
<title>Contoh Media dan Grafis HTML5</title>
</head>
<body>
<h1>Audio</h1>
<audio controls>
<source src="audio_file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<h1>Video</h1>
<video controls>
<source src="video_file.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
<h1>Grafis</h1>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.fillStyle = 'red';
context.fillRect(10, 10, 100, 50);
</script>
</body>
</html>
```
## 3. **Dukungan untuk Penyimpanan Lokal dan Offline**
HTML5 memperkenalkan kemampuan penyimpanan lokal melalui API seperti Local Storage dan Session Storage. Selain itu, fitur aplikasi web yang dapat diakses secara offline (offline web application) juga menjadi salah satu fitur utama dari HTML5, memungkinkan halaman web untuk tetap dapat diakses dan berfungsi walaupun pengguna tidak terhubung ke internet.
## 4. **Peningkatan Fitur Formulir**
HTML5 menyediakan elemen-elemen formulir baru seperti `<input type="date">`, `<input type="email">`, `<input type="url">`, dan lain-lain, yang memudahkan dalam validasi dan interaksi dengan pengguna saat mengisi formulir.
Contoh penggunaan elemen formulir di HTML5:
```html
<!DOCTYPE html>
<html>
<head>
<title>Contoh Formulir HTML5</title>
</head>
<body>
<form>
<label for="name">Nama:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="birthdate">Tanggal Lahir:</label>
<input type="date" id="birthdate" name="birthdate">
<input type="submit" value="Kirim">
</form>
</body>
</html>
```
## Kesimpulan
HTML5 membawa banyak perubahan dan peningkatan dari versi HTML sebelumnya. Peningkatan elemen semantik, dukungan media dan grafis, kemampuan penyimpanan lokal dan offline, serta fitur formulir yang diperbarui membuat HTML5 menjadi pilihan yang lebih unggul untuk membangun halaman web modern. Dengan mengadopsi HTML5, pengembang web dapat menciptakan situs web yang lebih interaktif, responsif, dan mudah diakses oleh berbagai perangkat dan mesin pencari. Oleh karena itu, memahami perbedaan antara HTML biasa dan HTML5 merupakan langkah penting dalam mengembangkan situs web masa kini.