Belajar HTML dari Nol: Struktur, Semantik, Form & SEO

HTML • 2026-01-12

Panduan lengkap HTML untuk pemula: struktur dokumen, tag semantik, form, dan praktik terbaik agar rapi dan ramah SEO.

HTML adalah fondasi website. Dengan struktur yang benar, website kamu lebih mudah dirawat, tampil rapi, dan lebih cepat dipahami mesin pencari.

Apa itu HTML dan perannya di website

HTML (HyperText Markup Language) adalah bahasa markup untuk menyusun konten: judul, paragraf, gambar, link, tabel, dan form. CSS mengatur tampilan, JavaScript mengatur interaksi.

Struktur dokumen HTML yang benar

Gunakan struktur dasar berikut agar valid dan konsisten:

<!doctype html>
<html lang="id">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Judul Halaman - Nama Brand</title>
    <meta name="description" content="Ringkasan singkat 1–2 kalimat untuk membantu Google memahami halaman." />
    <link rel="canonical" href="https://www.domainkamu.com/halaman.html" />
  </head>
  <body>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </body>
</html>

Tip: Pastikan setiap halaman punya <title> unik dan meta description relevan. Ini membantu SEO on-page.

Tag semantik (SEO + aksesibilitas)

Tag semantik membantu Google dan pembaca layar memahami struktur halaman.

<header> untuk bagian atas (logo/judul).
<nav> untuk menu navigasi.
<main> untuk konten utama (hanya 1 per halaman).
<article> untuk konten artikel/berita.
<section> untuk mengelompokkan topik.
<footer> untuk bagian bawah (kontak, link penting).

Membuat form kontak yang aman dan rapi

Contoh form kontak sederhana (tanpa backend) yang bisa kamu hubungkan ke WhatsApp atau email service:

<form id="contactForm">
  <label for="name">Nama</label>
  <input id="name" name="name" required />

  <label for="message">Pesan</label>
  <textarea id="message" name="message" rows="4" required></textarea>

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

Nanti validasi dan pengiriman bisa dibantu JavaScript (lihat artikel JavaScript).

Praktik terbaik: heading, alt, meta

Urutan heading rapi: h1 (1x), lalu h2, h3 sesuai struktur.
Selalu isi alt pada gambar (deskriptif, bukan spam keyword).
Gunakan link internal ke halaman penting (contoh: layanan, portofolio, blog).
Jaga HTML tetap valid (hindari tag tidak ditutup).

Template starter HTML siap pakai

Template landing page sederhana:

<header>
  <nav>
    <a href="/">Brand</a>
    <a href="#services">Layanan</a>
    <a href="#portfolio">Portofolio</a>
    <a href="#contact">Kontak</a>
  </nav>
</header>

<main>
  <section id="hero">
    <h1>Jasa Website Cepat & Profesional</h1>
    <p>Website siap online, mobile-friendly, dan mudah ditemukan di Google.</p>
    <a href="#contact">Konsultasi</a>
  </section>

  <section id="services">
    <h2>Layanan</h2>
    <ul>
      <li>Website UMKM</li>
      <li>Landing Page</li>
      <li>Optimasi SEO</li>
    </ul>
  </section>
</main>

<footer>
  <small>© 2026 Brand. All rights reserved.</small>
</footer>

Langkah berikutnya

Setelah HTML beres, lanjutkan ke CSS untuk layout responsive dan JavaScript untuk interaksi.

Rekomendasi bacaan terkait: SEO Dasar dan Checklist sebelum website live.

Butuh bantuan bikin website? Cek layanan dan konsultasi gratis di halaman kontak.