Audio, Canvas, Iframe, dan Elemen Head
Audio: Menyematkan Suara
Tag <audio> digunakan untuk memutar file audio langsung di halaman web, mirip dengan <video>.
Contoh Dasar
<audio controls>
<source src="lagu.mp3" type="audio/mpeg">
<source src="lagu.ogg" type="audio/ogg">
Browser kamu tidak mendukung tag audio.
</audio>
Atribut penting:
controls: menampilkan kontrol play, pause, volume.autoplay: audio langsung diputar (sering diblokir browser).loop: mengulang terus.muted: dibisukan.preload: petunjuk browser apakah akan memuat audio sejak awal (auto,metadata,none).
Canvas: Menggambar dengan JavaScript
Elemen <canvas> menyediakan area gambar yang dapat dimanipulasi dengan JavaScript. Cocok untuk grafis, game, visualisasi data, atau manipulasi gambar.
Contoh Sederhana
<canvas id="canvasKu" width="200" height="200" style="border:1px solid black;"></canvas>
<script>
const canvas = document.getElementById('canvasKu');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 100);
</script>
widthdanheightmenentukan ukuran canvas (jangan pakai CSS untuk ukuran awal, bisa distorsi).getContext('2d')mengambil konteks gambar 2D.- Lalu kita bisa menggambar persegi, lingkaran, teks, dan banyak lagi.
Iframe: Menyematkan Halaman Lain
Iframe (inline frame) memungkinkan kita menampilkan halaman web lain di dalam halaman kita.
Contoh
<iframe src="https://example.com" width="600" height="400" title="Contoh Iframe"></iframe>
Atribut penting:
src: URL halaman yang akan disematkan.sandbox: membatasi kemampuan iframe (misal tidak boleh menjalankan script).allow: fitur seperti fullscreen, camera, dll.loading:lazyuntuk menunda muat sampai iframe terlihat.title: untuk aksesibilitas (wajib diisi).
sandbox untuk membatasi.Elemen Head: Pengaturan Dokumen
Bagian <head> tidak tampil di browser, tapi sangat penting untuk metadata, styling, dan perilaku halaman.
Meta Tags
Meta tag memberikan informasi tentang dokumen.
<head>
<!-- Set karakter encoding (harus ada) -->
<meta charset="UTF-8">
<!-- Viewport untuk responsif di mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Deskripsi halaman (tampil di hasil pencarian) -->
<meta name="description" content="Belajar HTML dari dasar hingga mahir.">
<!-- Kata kunci (tidak terlalu berpengaruh sekarang) -->
<meta name="keywords" content="HTML, belajar, tutorial">
<!-- Penulis -->
<meta name="author" content="Nama Kamu">
<!-- Refresh/redirect setelah 5 detik -->
<meta http-equiv="refresh" content="5;url=https://example.com">
</head>
Title
<title> menentukan judul halaman yang muncul di tab browser dan hasil pencarian. Wajib ada.
<title>Halaman Belajar HTML</title>
Link: Menyambungkan CSS, Favicon, dll.
Tag <link> menghubungkan dokumen dengan sumber daya eksternal.
<!-- Menyambungkan file CSS -->
<link rel="stylesheet" href="style.css">
<!-- Ikon favicon (berbagai ukuran) -->
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<!-- Preload font atau gambar penting -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
Script: JavaScript
Tag <script> bisa diletakkan di <head> atau sebelum </body>. Jika di head, tambahkan atribut defer agar tidak memblokir rendering.
<script src="script.js" defer></script>
Contoh Lengkap Head yang Baik
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar HTML - Panduan Lengkap</title>
<meta name="description" content="Pelajari HTML dari nol hingga mahir dengan contoh interaktif dan penjelasan detail.">
<meta name="author" content="John Doe">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<!-- konten -->
</body>
</html>
Penjelasan lengkap meta tag dan pengaruhnya terhadap SEO serta perilaku browser.