Membuat halaman web dengan HTML5 sebenarnya mirip seperti membangun kerangka sebuah rumah. HTML5 (Hypertext Markup Language versi 5) adalah standar dasar yang digunakan untuk menstrukturkan halaman web modern agar lebih rapi. Berikut adalah panduan praktis dan terstruktur untuk membuat kode HTML5 dari dasar.
1. Struktur Dasar Template HTML5
Setiap dokumen HTML5 wajib memiliki kerangka standar. Lapisan dasar ini memberi tahu browser bagaimana cara membaca dan menampilkan konten Anda dengan benar.
HTML
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halaman Web Pertama Saya</title>
</head>
<body>
<!-- Konten web Anda akan ditulis di sini -->
</body>
</html>
Penjelasan Elemen Kunci:
<!DOCTYPE html>: Deklarasi singkat yang memberi tahu browser bahwa dokumen ini menggunakan HTML5.
<html lang="id">: Tag utama yang membungkus seluruh konten. Atribut lang="id" menandakan bahasa utama web adalah Bahasa Indonesia.
<head>: Bagian "belakang layar" yang berisi informasi teknis (metadata), judul tab, dan tautan ke file CSS/JavaScript.
<meta name="viewport" ...>: Baris wajib agar halaman web otomatis tampil rapi dan proporsional saat dibuka di smartphone (responsif).
<body>: Area utama tempat Anda menulis semua konten yang akan dilihat oleh pengunjung (teks, gambar, video).
2. Menggunakan Elemen Semantik HTML5
Salah satu keunggulan terbesar HTML5 adalah diperkenalkannya elemen semantik. Tag semantik adalah tag yang memiliki arti jelas tentang fungsi konten di dalamnya, bukan sekadar kotak kosong biasa (<div>).
Berikut adalah struktur penulisan tag semantik yang ideal di dalam <body>:
HTML
<header>
<h1>Selamat Datang di Portal Belajar</h1>
<nav>
<a href="#home">Beranda</a> |
<a href="#blog">Artikel</a> |
<a href="#contact">Kontak</a>
</nav>
</header>
<main>
<article>
<h2>Panduan Belajar HTML5 untuk Pemula</h2>
<p>HTML5 sangat mudah dipelajari. Dengan memahami struktur dasarnya, Anda sudah bisa membuat kerangka web sendiri.</p>
</article>
<aside>
<h3>Artikel Populer</h3>
<ul>
<li>Belajar CSS dalam 10 Menit</li>
<li>Tips Menjadi Front-End Developer</li>
</ul>
</aside>
</main>
<footer>
<p>© 2026 Portal Belajar. Dibuat dengan cinta.</p>
</footer>
Mengapa Harus Elemen Semantik?
- Navigasi Konten (<nav>): Khusus untuk meletakkan menu tautan.
- Konten Utama (<main>): Menampung isi unik dari halaman tersebut.
- Artikel (<article>): Digunakan untuk blok konten yang bisa berdiri sendiri (seperti postingan blog atau berita).
- Konten Sampingan (<aside>): Untuk informasi tambahan seperti sidebar atau iklan.
- Catatan Kaki (<footer>): Bagian paling bawah untuk informasi hak cipta atau kontak.
3. Menambahkan Media Modern (Fitur Unggulan HTML5)
Dulu, untuk memasang video atau audio di web, kita membutuhkan plugin tambahan seperti Flash Player. Di HTML5, Anda bisa langsung memasukkannya secara native dengan kode yang sangat bersih.
Memasang Video
HTML
<video width="100%" height="auto" controls>
<source src="video-tutorial.mp4" type="video/mp4">
Browser Anda tidak mendukung pemutaran video ini.
</video>
Memasang Audio
HTML
<audio controls>
<source src="podcast-sore.mp3" type="audio/mpeg">
Browser Anda tidak mendukung pemutaran audio ini.
</audio>
Catatan: Atribut controls sangat penting agar browser memunculkan tombol Play, Pause, dan pengatur volume suara untuk pengguna.
Langkah Selanjutnya
Setelah berhasil membuat kerangka dengan HTML5, halaman web Anda mungkin masih terlihat polos. Langkah berikutnya yang perlu Anda lakukan adalah mempelajari CSS (Cascading Style Sheets) untuk menghias tampilan (warna, tata letak, dan font) serta JavaScript untuk memberikan efek interaktif.