Pernahkah kamu membayangkan sebuah gedung tanpa kerangka beton? Pasti akan roboh. Begitu juga dengan sebuah website. Sebelum kita bicara soal warna yang keren atau animasi yang canggih, kita harus membangun arsitektur yang benar menggunakan HTML5.

HTML (HyperText Markup Language) bukanlah bahasa pemrograman dengan logika rumit, melainkan sebuah bahasa markup untuk memberi tahu browser: "Ini adalah judul, ini adalah paragraf, dan ini adalah navigasi."

1. Struktur "Wajib" Setiap File HTML

Setiap kali kamu membuat file .html, ada struktur standar yang tidak boleh absen. Ini adalah cara kita menyapa browser dan memberi tahu bahwa kita menggunakan standar HTML modern.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Judul Tab Browser Kamu</title>
</head>
<body>
    <h1>Halo Dunia!</h1>
</body>
</html>

Bedah Struktur:

  • <!DOCTYPE html>: Deklarasi bahwa ini adalah dokumen HTML5.

  • <html>: Akar dari semua elemen web. Atribut lang="id" membantu mesin pencari tahu web ini berbahasa Indonesia.

  • <head>: Tempat menyimpan metadata. User tidak melihat isinya, tapi Google dan Browser sangat membutuhkannya.

  • <body>: Kanvas utama kita. Apapun yang kamu tulis di sini akan muncul di layar.

    2. Revolusi HTML5: Semantic Tags

    Dulu, developer web sangat hobi menggunakan tag <div> untuk semua bagian web. Hasilnya? Kode jadi berantakan (sering disebut Div-itis). HTML5 memperkenalkan Semantic Tags—tag yang memiliki makna jelas bagi browser dan mesin pencari (SEO).

    Bayangkan kamu sedang membedah sebuah koran. Kamu tahu mana berita utama, mana iklan di pinggir, dan mana catatan kaki. Di HTML5, kita menulisnya seperti ini:

    <header>
        <h1>Logo Website</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Belajar</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h2>Judul Blog Post</h2>
            <p>Konten artikel yang sangat menarik sedang ditulis di sini...</p>
        </article>
        <aside>
            <p>Informasi tambahan atau iklan di kolom samping.</p>
        </aside>
    </main>
    <footer>
        <p>&copy; 2026 Hak Cipta Terlindungi.</p>
    </footer>

    3. Mengapa Arsitektur Semantik Itu Wajib?

    Mungkin kamu bertanya, "Kan kalau pakai div semua, tampilannya bisa sama saja?". Secara visual mungkin iya, tapi secara teknis ada tiga alasan fatal:

    1. SEO (Search Engine Optimization): Google akan lebih mudah menaikkan peringkat webmu jika ia tahu mana konten utama (<main>) dan mana judul utamanya (<h1>).
    2. Accessibility (Aksesibilitas): Teman-teman kita yang menggunakan screen reader (alat bantu baca layar) akan terbantu karena alat tersebut tahu mana navigasi dan mana artikel.
    3. Maintenance: Kode kamu jadi lebih mudah dibaca oleh developer lain (atau dirimu sendiri di masa depan). Kamu tidak akan tersesat di dalam "hutan" <div>.

    4. Elemen Teks dan Media Populer

    Sebagai pelengkap arsitektur, inilah beberapa "bahan bangunan" yang paling sering kamu pakai di dalam tag <body>:

          • Heading (<h1> sampai <h6>): Menentukan hierarki pentingnya teks.
          • List (<ul>, <ol>, & <li>): Untuk membuat daftar poin atau menu.
          • Image (<img>): Menampilkan gambar. Penting: Selalu gunakan atribut alt untuk menjelaskan isi gambar jika gambar gagal dimuat.
          • Anchor (<a>): Untuk membuat link antar halaman.
          <section>
              <h3>Daftar Skill yang Akan Dipelajari</h3>
              <ul>
                  <li>Struktur HTML5 Semantik</li>
                  <li>Styling dengan CSS Modern</li>
                  <li>Logika JavaScript (ES6+)</li>
              </ul>
              <img src="coding.jpg" alt="Ilustrasi belajar coding" width="400">
          </section>

          Tips Pro: Jangan pernah gunakan <h1> lebih dari satu kali dalam satu halaman. <h1> adalah "Judul Utama", dan sebuah buku tidak mungkin punya dua judul utama yang berbeda, bukan?

          Apa Selanjutnya?

          Setelah kerangka gedung selesai, saatnya kita mengecat dinding dan memasang dekorasi agar website terlihat cantik. Di artikel berikutnya, kita akan masuk ke dunia CSS (Cascading Style Sheets).