Belajar HTML Part 2: Struktur Dasar HTML yang Wajib Dipahami Pemula

by

Pada Part 1, kamu sudah memahami apa itu HTML, bagaimana cara kerjanya, dan kenapa HTML adalah fondasi utama dalam dunia web development. Sekarang kita masuk ke Part 2, yaitu struktur dasar HTML.

Bagian ini sangat penting karena:

  • Menentukan apakah halaman HTML valid atau tidak
  • Menjadi dasar SEO on-page
  • Menjadi pondasi sebelum lanjut ke CSS dan JavaScript

Apa Itu Struktur Dasar HTML?

Struktur dasar HTML adalah kerangka utama yang wajib ada di setiap dokumen HTML. Ibarat rumah, ini adalah fondasi, dinding, dan atapnya. Tanpa struktur yang benar, browser tetap bisa menampilkan halaman, tapi Google dan tools SEO akan menilai halaman kamu kurang rapi.

Setiap file HTML minimal terdiri dari:

  • DOCTYPE
  • html
  • head
  • body

Struktur HTML Paling Dasar

Berikut adalah contoh struktur HTML paling dasar yang wajib kamu hafal: 

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Judul Halaman</title>
</head>
<body>

  <h1>Hello World</h1>
  <p>Ini adalah halaman HTML pertama saya.</p>

</body>
</html>

Tenang, kita akan bahas satu per satu dengan santai ??

DOCTYPE: Penentu Standar HTML

DOCTYPE adalah baris pertama yang memberi tahu browser bahwa dokumen ini menggunakan HTML5. 

<!DOCTYPE html>

Tanpa DOCTYPE:

  • Browser bisa masuk ke mode lama (quirks mode)
  • CSS dan layout bisa bermasalah
  • SEO bisa terpengaruh

Catatan penting: HTML5 hanya punya satu DOCTYPE dan tidak ribet.

Tag html: Pembungkus Utama

Tag html adalah pembungkus seluruh isi halaman. Semua kode HTML harus berada di dalam tag ini. 

<html lang="id">
  …
</html>

Atribut lang=”id” berfungsi untuk:

  • Membantu SEO
  • Membantu screen reader
  • Menentukan bahasa konten

Gunakan:

  • lang=”id” → Bahasa Indonesia
  • lang=”en” → Bahasa Inggris

Tag head: Otak Halaman HTML

Tag head berisi informasi penting yang tidak tampil langsung di halaman web, tapi sangat penting untuk browser dan mesin pencari. 

<head>
  <meta charset="UTF-8">
  <title>Judul Halaman</title>
</head>

Meta charset

Meta charset memastikan teks tampil dengan benar (tidak rusak atau jadi simbol aneh). 

<meta charset="UTF-8">

Gunakan UTF-8 agar:

  • Huruf Indonesia aman
  • Emoji tidak rusak
  • Bahasa lain tetap terbaca

Title: Judul Halaman

Tag title adalah:

  • Judul tab browser
  • Judul hasil pencarian Google
  • Salah satu faktor SEO penting

<title>Belajar HTML Part 2: Struktur Dasar HTML</title>

Tips SEO:

  • Panjang ideal 50–60 karakter
  • Masukkan keyword utama
  • Jangan keyword stuffing

Tag body: Isi Halaman

Tag body berisi semua konten yang terlihat oleh pengunjung:

  • Judul
  • Paragraf
  • Gambar
  • Link
  • Form
<body>
  <h1>Judul</h1>
  <p>Paragraf</p>
</body>

Semua yang ingin ditampilkan di website HARUS berada di dalam body.

Heading: h1 sampai h6

Heading digunakan untuk membuat struktur konten. Bukan sekadar besar-kecil teks. 

<h1>Judul Utama</h1>
<h2>Sub Judul</h2>
<h3>Sub dari Sub Judul</h3>
<h4>Sub Judul h4</h4>
<h5>Sub Judul h5</h5>
<h6>Sub Judul h6</h6>

Aturan penting:

  • h1 hanya satu per halaman
  • Urutan harus rapi
  • Jangan lompat h1 ke h4

Struktur heading yang baik = SEO lebih kuat.

Paragraf dan Baris

Paragraf dibuat dengan tag p. 

<p>Ini adalah paragraf.</p>

Untuk pindah baris gunakan br: 

Baris pertama<br>
Baris kedua

Catatan:

  • br untuk baris pendek
  • p untuk konten utama

Komentar dalam HTML

Komentar tidak akan tampil di browser, tapi sangat berguna untuk dokumentasi. 

<!-- Ini adalah komentar -->

Komentar membantu:

  • Membaca kode lebih mudah
  • Kolaborasi tim
  • Maintenance jangka panjang

Kesalahan Umum Pemula

  • Tidak pakai DOCTYPE
  • Tag tidak ditutup
  • h1 dipakai banyak
  • Konten di luar body

Kesalahan kecil ini sering bikin:

  • SEO lemah
  • Layout bermasalah
  • Susah lanjut ke CSS

Ringkasan Part 2

  • Struktur HTML adalah fondasi utama
  • DOCTYPE wajib
  • head penting untuk SEO
  • body berisi semua konten
  • Heading menentukan struktur

Jika kamu sudah paham Part 2 ini, kamu sudah siap masuk ke Part 3.

Lanjutan Materi

Di Part 3, kita akan membahas:

  • Tag teks (strong, em, span)
  • Formatting teks
  • Best practice HTML untuk konten

Sebelumnya: Part 1 → Dasar HTML | Lanjut: Part 3 → Tag Teks & Formatting HTML

Leave a Comment