Belajar Struktur Dasar HTML untuk Pemula: Tag Wajib yang Harus Dipahami oleh Pemula Web Developer

in  
Belajar Struktur Dasar HTML untuk Pemula Tag Wajib yang Harus Dipahami oleh Pemula Web Developer


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.

Struktur HTML dalam Sistem Folder - Belajar Struktur Dasar HTML untuk Pemula Tag Wajib yang Harus Dipahami oleh Pemula Web Developer


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:

Share: