Struktur Dasar HTML: Membangun Fondasi Web

Oke, sekarang Anda sudah tahu HTML itu apa. Sekarang waktunya ngulik lebih dalam soal struktur dokumen HTML. Soalnya, kalau struktur-nya salah, bisa berantakan di browser.

1. Template HTML — Wajib Hafal!

Setiap file HTML pasti punya struktur ini. Wajib. Nggak ada yang bisa dilewatin.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Judul Halaman</title>
</head>
<body>
    <!-- Konten ada di sini -->
</body>
</html>

Ingat pola ini: DOCTYPE → html → head → body. Sampai mual-mual juga harus ingat (lebay sih, tapi seriusan penting).

2. DOCTYPE — Yang Harus Ditulis Paling Atas

<!DOCTYPE html>

Ini bilang ke browser: “Hei, ini dokumen HTML5.”

Tanpa DOCTYPE, browser masuk quirks mode — mode kompatibilitas lama yang bikin tampilan unpredictable. Jadi kalau website Anda aneh, cek dulu apakah DOCTYPE-nya ada.

Dulu (HTML 4, XHTML) DOCTYPE-nya panjang banget:

<!-- HTML 4.01 — jangan pake ini lagi -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

Untuk HTML5? Cukup <!DOCTYPE html>. Simple.

3. Tag `<html>` — Kotak Besar

<html lang="id">
    <!-- semua kode HTML di sini -->
</html>

Ini root element — semua elemen lain ada di dalamnya. Kayak kontainer utama.

Atribut lang itu penting banget buat:

Screen reader — bantu buta netra baca konten dengan benar
Google — mesin pencari ngerti bahasa konten Anda
Browser — bisa munculkan “Terjemahkan halaman ini?”

<html lang="id">  <!-- Bahasa Indonesia -->
<html lang="en">  <!-- Bahasa Inggris -->
<html lang="ja">  <!-- Bahasa Jepang -->

4. Tag `<head>` — Yang Gak Keliatan

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Deskripsi untuk SEO">
    <title>Judul Halaman</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="favicon.ico">
</head>

Bagian ini gak ditampilin di halaman. Tapi isinya krusial.

Meta Tags — Kenalan Yuk

charset — Encoding karakter. Tanpa ini, karakter khusus (emoji, aksara) bisa muncul dengan karakter yang salah atau tidak terbaca.

<meta charset="UTF-8">

viewport — Ini yang bikin website responsive di HP. Tanpa ini, website Anda bakal keliatan seperti versi desktop yang dikecilkan — tidak nyaman dilihat di layar kecil.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

description — Deskripsi yang muncul di Google. Buat ini semenarik mungkin (150-160 karakter), karena ini yang bikin orang klik website Anda.

<meta name="description" content="Belajar HTML dari nol — tutorial lengkap untuk pemula">

5. Tag `<title>` — Judul di Tab Browser

<title>Pengenalan HTML - Belajar Web Development</title>

Ini yang muncul di:

Tab browser
Bookmark
Hasil pencarian Google

Tips: Buat 50-60 karakter. Jangan terlalu pendek (SEO-jelek), jangan terlalu panjang (di-truncate Google).

<!-- ❌ Terlalu pendek -->
<title>HTML</title>

<!-- ❌ Terlalu panjang -->
<title>Belajar HTML Dari Nol Untuk Pemula Lengkap Dengan Contoh Kode Dan Penjelasan</title>

<!-- ✅ Pas -->
<title>Pengenalan HTML - Belajar Web Development</title>

6. Tag `<body>` — Konten Yang Keliatan

<body>
    <h1>Selamat Datang</h1>
    <p>Ini konten halaman.</p>
    <img src="foto.jpg" alt="Foto profil">
</body>

Semua yang keliatan di browser ada di sini — teks, gambar, video, form, tombol, apapun.

Yang gak boleh di body:

<meta> → harusnya di <head>
<title> → harusnya di <head>

Kalau Anda liat meta tag di body, itu udah salah dari sononya.

7. Nesting — Elemen Di Dalam Elemen

Nesting itu cara naro elemen di dalam elemen lain. Kayak kotak di dalam kotak.

Yang Bener

<div>
    <h1>Judul</h1>
    <p>Paragraf pertama.</p>
    <p>Paragraf kedua.</p>
</div>

Yang Salah

<!-- ❌ Overlapping -->
<div>
    <h1>Judul</h1>
</div>
<p>Paragraf</p>
</div>  <!-- ini error! -->

Aturan emas: Elemen yang dibuka terakhir harus ditutup terlebih dahulu. Kayak stack — Last In, First Out (LIFO).

<!-- ✅ Bener -->
<div>
    <p>
        <strong>Teks tebal</strong>
    </p>
</div>

<!-- ❌ Salah -->
<div>
    <p>
        <strong>Teks tebal
    </p>
</strong>
</div>

8. Indentasi — Biar Gak Pusing

Indentasi itu spasi di awal baris yang bikin kode rapi dan mudah dibaca.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Judul</title>
</head>
<body>
    <div>
        <h1>Judul</h1>
        <p>Paragraf</p>
    </div>
</body>
</html>

Berapa spasi yang bener? Terserah Anda, yang penting konsisten.

2 spasi → paling umum di web dev
4 spasi → umum di Python/Ruby
Tab → beberapa developer suka ini

Yang penting jangan campur-campur. Kalau pakai 2 spasi, pakai 2 spasi terus. Jangan ada yang 2, ada yang 4, ada yang tab — bikin pusing baca-nya.

9. Komentar — Catatan Buat Diri Sendiri

<!-- Ini komentar -->
<p>Paragraf ini keliatan</p>

<!--
    Komentar bisa
    panjang juga
-->

Saya biasanya pake komentar buat:

Nandain section (“”)
Nonaktifkan kode sementara
Kasih catatan kalau ada yang perlu di-fix nanti

<body>
    <!-- Header -->
    <header>
        <h1>Website Saya</h1>
    </header>
    
    <!-- TODO: Tambahkan fitur search -->
    
    <!-- Main Content -->
    <main>
        <p>Konten utama</p>
    </main>
</body>

10. Contoh Lengkap

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Belajar HTML dari nol">
    <title>Website Saya - Belajar HTML</title>
</head>
<body>
    <!-- Header -->
    <header>
        <h1>Selamat Datang di Website Saya</h1>
        <nav>
            <a href="/">Home</a>
            <a href="/about">About</a>
            <a href="/contact">Contact</a>
        </nav>
    </header>
    
    <!-- Main Content -->
    <main>
        <article>
            <h2>Artikel Pertama</h2>
            <p>Ini paragraf pertama gue.</p>
            <p>Belajar HTML itu <strong>menyenangkan</strong>!</p>
        </article>
    </main>
    
    <!-- Footer -->
    <footer>
        <p>&copy; 2026 Website Saya</p>
    </footer>
</body>
</html>

11. Recap

Elemen	Fungsi	Posisi
`<!DOCTYPE html>`	Deklarasi HTML5	Paling atas
`<html>`	Root element	Membungkus head + body
`<head>`	Metadata (gak keliatan)	Di dalam html
`<body>`	Konten visual	Di dalam html
`<title>`	Judul tab/bookmark	Di dalam head
`<meta charset>`	Encoding karakter	Di dalam head
`<meta viewport>`	Responsif mobile	Di dalam head

Penutup

Struktur dasar HTML itu simpel tapi krusial. Kalau struktur-nya bener, browser gak akan bingung baca website Anda. Kalau salah? Well, Anda bakal liat halaman aneh yang bikin frustasi.

Di artikel selanjutnya, kita akan bahas soal Teks & Heading — cara bikin paragraf, heading, teks tebal, miring, dan elemen block lainnya.