HTML (HyperText Markup Language) adalah fondasi dari setiap website. Sebelum belajar CSS, JavaScript, atau framework apapun — kamu harus paham HTML dulu. Kabar baiknya: HTML itu sederhana dan bisa dipelajari dalam hitungan jam.

Apa Itu HTML?

HTML bukan bahasa pemrograman — HTML adalah bahasa markup. Fungsinya untuk memberi struktur pada halaman web: paragraf, heading, gambar, link, form, dan sebagainya.

Bayangkan kamu sedang membangun rumah:

HTML = struktur bangunan (dinding, pintu, jendela)
CSS = dekorasi (cat, furniture, tata letak)
JavaScript = fungsi interaktif (saklar lampu, AC, smart home)

Anatomi Elemen HTML

Setiap elemen HTML terdiri dari:

<tag atribut="nilai">Konten</tag>

Contoh nyata:

<a href="https://learnhypersheets.com">Buka Hyper Sheets</a>

<a> — tag pembuka
href="..." — atribut (alamat link)
Buka Hyper Sheets — konten yang terlihat di layar
</a> — tag penutup

Struktur Dasar Halaman HTML

Setiap halaman web punya struktur dasar yang sama:

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Website Pertamaku</title>
  </head>
  <body>
    <h1>Halo Dunia!</h1>
    <p>Ini paragraf pertamaku.</p>
  </body>
</html>

<!DOCTYPE html> — memberitahu browser ini dokumen HTML5
<html> — elemen root, membungkus semuanya
<head> — metadata (judul, charset, viewport) — tidak terlihat di layar
<body> — konten yang terlihat oleh pengunjung

Coba Langsung

Edit kode HTML di bawah dan lihat hasilnya secara real-time:

Contoh

HTML

Preview

Halo Dunia!

Ini paragraf pertamaku. HTML itu mudah dan menyenangkan.

Elemen yang Wajib Kamu Tahu

Heading

HTML punya 6 level heading. Gunakan <h1> untuk judul utama, <h2> untuk subjudul, dan seterusnya:

<h1>Judul Utama</h1>
<h2>Sub Judul</h2>
<h3>Sub-sub Judul</h3>

Penting: hanya gunakan satu <h1> per halaman untuk SEO yang baik.

Paragraf dan Teks

<p>Ini paragraf biasa.</p>
<strong>Ini teks tebal (penting)</strong>
<em>Ini teks miring (penekanan)</em>

Link

<a href="https://belajarweb.dev">Kunjungi BelajarWeb.dev</a>

Gambar

<img src="foto.jpg" alt="Deskripsi gambar" />

Selalu isi atribut alt — ini penting untuk aksesibilitas dan SEO.

List

<!-- Unordered list (bullet) -->
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<!-- Ordered list (nomor) -->
<ol>
  <li>Belajar HTML</li>
  <li>Belajar CSS</li>
  <li>Belajar JavaScript</li>
</ol>

Semantic HTML — Kenapa Penting?

Semantic HTML berarti menggunakan elemen yang menjelaskan isinya. Ini bukan cuma soal tampilan — tapi soal makna.

<!-- ❌ Non-semantic -->
<div class="header">
  <div class="nav">...</div>
</div>

<!-- ✅ Semantic -->
<header>
  <nav>...</nav>
</header>

Elemen semantic yang sering dipakai:

Elemen	Fungsi
`<header>`	Bagian atas halaman/section
`<nav>`	Navigasi
`<main>`	Konten utama
`<article>`	Konten mandiri (blog post, berita)
`<section>`	Bagian tematik dari konten
`<aside>`	Konten sampingan (sidebar)
`<footer>`	Bagian bawah halaman/section

Kenapa semantic penting?

SEO — Google memahami struktur halaman lebih baik
Aksesibilitas — Screen reader bisa navigasi dengan benar
Maintainability — Kode lebih mudah dibaca oleh developer lain

Form HTML

Form adalah cara user berinteraksi dengan website — login, registrasi, pencarian:

<form action="/submit" method="POST">
  <label for="nama">Nama:</label>
  <input type="text" id="nama" name="nama" required />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required />

  <button type="submit">Kirim</button>
</form>

Tipe input yang sering dipakai: text, email, password, number, date, checkbox, radio, file.

Tips untuk Pemula

Selalu validasi — Gunakan W3C Validator untuk mengecek HTML kamu
Indentasi yang rapi — Buat kode mudah dibaca dengan indent yang konsisten
Jangan skip heading level — Jangan langsung dari <h1> ke <h4>
Alt text di semua gambar — Ini bukan opsional, ini keharusan
Gunakan semantic HTML — Hindari <div> untuk semuanya

Langkah Selanjutnya

Setelah paham HTML, langkah berikutnya:

CSS — Beri style dan layout pada halaman HTML kamu
JavaScript — Tambahkan interaktivitas
Responsive Design — Buat website yang tampil baik di semua ukuran layar

HTML adalah fondasi. Kalau fondasinya kuat, semua yang dibangun di atasnya akan jauh lebih mudah.