Pernah bingung kenapa tampilan website bisa rapi, punya judul, paragraf, gambar, bahkan tombol yang bisa diklik? Jawabannya ada pada struktur HTML!
Cerita Singkat: Awal Perkenalan dengan HTML
Bayangin kamu lagi pengen bikin website portfolio sederhana. Udah semangat buka laptop, minum kopi, terus ngetik di code editor… tapi semua kosong. Nah, sebelum masuk ke CSS yang bikin tampilannya kece atau JavaScript yang bikin websitenya interaktif, ada satu pondasi penting yang nggak boleh dilewatkan: HTML.
HTML (HyperText Markup Language) adalah kerangka dasar dari sebuah halaman web. Tanpa HTML, browser nggak akan ngerti struktur kontenmu. Ini ibarat tulang dalam tubuh manusia—nggak kelihatan, tapi vital banget.
Kenapa Harus Tahu Struktur Dasar HTML?
Menurut W3C (World Wide Web Consortium), HTML adalah standar utama untuk membangun halaman web di seluruh dunia. Bahkan Google sendiri menyarankan para developer untuk memastikan struktur HTML mereka valid demi optimasi SEO yang maksimal.
Jadi, buat kamu yang pengen serius belajar web development, tahu tag-tag dasar HTML itu wajib hukumnya.
1. <!DOCTYPE html>
“Halo browser, ini dokumen HTML5!”
Ini bukan tag biasa, tapi deklarasi penting di awal file HTML. Tujuannya? Memberitahu browser bahwa dokumen ini menggunakan standar HTML5—versi terbaru dan paling banyak dipakai saat ini.
<!DOCTYPE html>
Fun fact: Tanpa deklarasi ini, browser bisa salah menafsirkan kode HTML-mu. Bisa berantakan!
2. <html>
Rumah Besar dari Semua Elemen Web
Tag <html> adalah container utama untuk seluruh dokumen HTML.
<html lang="id">
Tag ini biasanya diikuti atribut lang buat ngasih tahu bahasa konten, penting banget buat aksesibilitas dan SEO.
3. <head>
Tempat Info ‘Rahasia’ yang Nggak Tampil di Layar
Isi tag <head> nggak muncul di halaman web, tapi penting banget buat SEO, link ke stylesheet, atau nentuin karakter set.
<head>
<meta charset="UTF-8" />
<title>Judul Webku</title>
<link rel="stylesheet" href="style.css" />
</head>
Pro tip: Google merayapi <title> dan <meta> untuk menentukan relevansi halamanmu dalam hasil pencarian.
4. <body>
Tempat Semua Aksi Terjadi
Semua yang dilihat pengguna ada di dalam <body>: teks, gambar, video, tombol, tabel, dan lainnya.
<body>
<h1>Selamat Datang!</h1>
<p>Ini adalah halaman pertamaku.</p>
</body>
5. Heading: <h1> sampai <h6>
Bukan Cuma Judul, Tapi Hierarki Konten
Heading penting buat struktur dan SEO. <h1> adalah judul utama (harus unik satu per halaman), lalu <h2> sampai <h6> buat subjudul.
<h1>Belajar HTML itu Seru!</h1>
<h2>Kenapa Harus Mulai dari HTML?</h2>
Menurut penelitian dari Moz dan Ahrefs, halaman dengan struktur heading yang baik cenderung lebih mudah dirayapi mesin pencari.
6. <p>
Tempat Paragraf Tinggal
Tag <p> dipakai buat bikin paragraf. Simple, tapi sering salah dipakai oleh pemula.
<p>HTML adalah bahasa markup yang digunakan untuk membuat struktur halaman web.</p>
7. <a>
Bikin Link yang Bisa Diklik
Tanpa tag <a>, web nggak akan bisa saling terhubung. Tag ini penting banget buat navigasi.
<a href="https://www.example.com">Kunjungi Website</a>
8. <img>
Masukkan Gambar dengan Mudah
Gambar bikin halaman jadi lebih hidup. Gunakan atribut alt untuk menjelaskan isi gambar (penting buat SEO dan aksesibilitas).
<img src="gambar.jpg" alt="Gambar Ilustrasi HTML" />
9. <ul>, <ol>, <li>
Bikin Daftar dengan Rapi
Untuk poin-poin penting, gunakan tag list:
- <ul>: unordered list (bullet)
- <ol>: ordered list (angka)
- <li>: list item
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
10. <div> dan <span>
Container Serbaguna
- <div> untuk blok besar
- <span> untuk elemen inline
Mereka nggak punya arti khusus, tapi sering digunakan untuk layout dan styling dengan CSS.
<div class="container">
<span class="highlight">Teks penting</span>
</div>
Bonus: Validasi HTML
Mau tahu apakah struktur HTML-mu udah bener? Coba cek di validator W3C. Ini semacam “pengecekan ejaan” untuk kode HTML-mu.
Kesimpulan: Kuasai Dasar, Baru Lanjut
Belajar HTML itu kayak belajar alfabet sebelum bisa nulis puisi. Tanpa menguasai tag-tag dasar di atas, kamu bakal kesulitan memahami CSS dan JavaScript.
Mulailah dari membangun satu halaman HTML sederhana, eksplor tag satu per satu, dan lihat bagaimana struktur tersebut membentuk tampilan di browser.
Ingat: HTML itu bukan tentang tampil keren, tapi tentang struktur yang rapi dan bermakna.
Kalau kamu suka artikel ini, jangan lupa share ke teman-temanmu yang juga lagi belajar koding, ya! Karena belajar bareng itu selalu lebih seru 😉
Referensi:
