AHLI NGODINK
Learning PathTersimpanSemua Artikel Telegram
Dasar Web

Struktur HTML yang Benar untuk Website Pemula

Pelajari struktur HTML yang benar mulai dari DOCTYPE, html, head, body, semantic HTML, hingga contoh struktur halaman website yang rapi dan mudah dipahami pemula.

Ditulis Ahli Ngodink 7 menit membaca

Setelah memahami apa itu HTML, langkah berikutnya adalah mempelajari bagaimana sebuah dokumen HTML disusun dengan benar. Struktur yang rapi akan membuat website lebih mudah dikembangkan, dibaca, dan dirawat ketika proyek mulai bertambah besar.

Bagi pemula, memahami struktur HTML jauh lebih penting daripada menghafal banyak tag sekaligus. Dengan struktur yang benar, kamu akan lebih mudah melanjutkan ke CSS, JavaScript, PHP, maupun teknologi web lainnya.

Kalau kamu masih belum memahami fungsi dasar HTML, baca terlebih dahulu artikel Apa Itu HTML? Pengertian, Fungsi, dan Contoh untuk Pemula.

Struktur Dasar Dokumen HTML

Dokumen HTML modern umumnya dimulai dengan struktur seperti berikut:

<!DOCTYPE html>
<html lang="id">

<head>
  <meta charset="UTF-8">

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

  <title>Website Saya</title>
</head>

<body>

  <h1>Halo Dunia</h1>

  <p>
    Saya sedang belajar HTML.
  </p>

</body>

</html>

Walaupun terlihat sederhana, setiap bagian memiliki fungsi yang berbeda.

1. DOCTYPE

Baris pertama biasanya berisi:

<!DOCTYPE html>

DOCTYPE memberi tahu browser bahwa dokumen yang sedang dibaca menggunakan standar HTML modern.

DOCTYPE bukan tag HTML biasa. Penulisannya cukup satu kali dan diletakkan pada bagian paling atas dokumen.

2. Elemen HTML

Setelah DOCTYPE terdapat elemen:

<html lang="id">

</html>

Elemen <html> menjadi pembungkus utama seluruh isi dokumen HTML.

Atribut:

lang="id"

menjelaskan bahwa bahasa utama halaman tersebut adalah Bahasa Indonesia.

Informasi bahasa membantu browser, mesin pencari, serta teknologi aksesibilitas memahami isi halaman dengan lebih baik.

Bagian <head> berisi informasi mengenai halaman yang biasanya tidak tampil langsung sebagai isi utama website.

<head>

  <meta charset="UTF-8">

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

  <title>Website Saya</title>

</head>

Beberapa konfigurasi penting biasanya ditempatkan di dalam bagian ini.

Charset UTF-8

<meta charset="UTF-8">

UTF-8 digunakan agar halaman dapat menampilkan berbagai karakter dengan benar, termasuk huruf, simbol, dan karakter dari banyak bahasa.

Viewport

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

Viewport membantu halaman menyesuaikan ukuran layar perangkat, terutama smartphone dan tablet.

Tanpa konfigurasi viewport yang benar, tampilan website pada perangkat mobile dapat terlihat terlalu kecil atau tidak proporsional.

Title

<title>
  Belajar HTML untuk Pemula
</title>

Elemen <title> menentukan judul halaman yang biasanya terlihat pada tab browser.

4. Bagian Body

Bagian <body> berisi konten yang benar-benar ditampilkan kepada pengguna.

Contohnya:

<body>

  <h1>Belajar HTML</h1>

  <p>
    Selamat datang di website saya.
  </p>

  <button>
    Mulai Belajar
  </button>

</body>

Judul, paragraf, gambar, tombol, formulir, tabel, video, dan sebagian besar komponen halaman akan berada di dalam <body>.

Apa Itu Semantic HTML?

Selain struktur dasar, HTML modern menyediakan elemen semantic yang membantu menjelaskan fungsi setiap bagian halaman.

Beberapa elemen semantic yang umum digunakan antara lain:

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>

Penggunaan elemen semantic membuat struktur halaman lebih mudah dipahami dibanding menggunakan <div> untuk seluruh bagian website.

Elemen <header> biasanya digunakan untuk bagian atas halaman.

<header>

  <h1>Ahli Ngodink</h1>

  <p>
    Belajar coding untuk pemula.
  </p>

</header>

Header dapat berisi logo, nama website, tagline, atau navigasi.

Untuk kumpulan menu navigasi, gunakan elemen <nav>.

<nav>

  <a href="/">
    Beranda
  </a>

  <a href="/artikel/">
    Artikel
  </a>

  <a href="/belajar/">
    Belajar
  </a>

</nav>

Dengan struktur tersebut, browser dan teknologi aksesibilitas dapat mengenali bahwa bagian itu merupakan navigasi utama.

Main Content

Konten utama halaman sebaiknya ditempatkan pada:

<main>

</main>

Sebuah halaman pada umumnya memiliki satu elemen <main> yang berisi informasi utama.

Section

Elemen <section> dapat digunakan untuk membagi halaman menjadi beberapa bagian berdasarkan topik.

<section>

  <h2>
    Belajar HTML
  </h2>

  <p>
    Materi dasar HTML untuk pemula.
  </p>

</section>

Setiap section idealnya memiliki konteks atau topik yang jelas.

Article

Elemen <article> cocok digunakan untuk konten yang dapat berdiri sendiri.

Contohnya:

<article>

  <h2>
    Apa Itu HTML?
  </h2>

  <p>
    HTML merupakan bahasa markup...
  </p>

</article>

Artikel blog, berita, posting forum, dan konten tutorial merupakan contoh penggunaan elemen ini.

Aside

Elemen <aside> digunakan untuk konten tambahan yang masih berhubungan dengan konten utama.

<aside>

  <h3>
    Artikel Terkait
  </h3>

  <a href="#">
    Belajar CSS
  </a>

</aside>

Contohnya adalah sidebar, artikel terkait, informasi tambahan, atau rekomendasi.

Bagian bawah website biasanya menggunakan:

<footer>

  <p>
    Copyright 2026 Ahli Ngodink
  </p>

</footer>

Footer dapat berisi copyright, link navigasi tambahan, informasi kontak, atau informasi lain mengenai website.

Contoh Struktur Website yang Lebih Lengkap

Jika semua bagian tersebut digabungkan, struktur HTML sederhana dapat terlihat seperti berikut:

<!DOCTYPE html>
<html lang="id">

<head>

  <meta charset="UTF-8">

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

  <title>
    Website Pertama Saya
  </title>

</head>

<body>

  <header>

    <h1>
      Website Saya
    </h1>

    <nav>

      <a href="/">
        Beranda
      </a>

      <a href="/artikel/">
        Artikel
      </a>

    </nav>

  </header>

  <main>

    <section>

      <h2>
        Belajar Coding
      </h2>

      <p>
        Mulai belajar HTML,
        CSS, dan JavaScript.
      </p>

    </section>

    <section>

      <h2>
        Artikel Terbaru
      </h2>

      <article>

        <h3>
          Apa Itu HTML?
        </h3>

        <p>
          Panduan HTML untuk pemula.
        </p>

      </article>

    </section>

  </main>

  <footer>

    <p>
      © 2026 Ahli Ngodink
    </p>

  </footer>

</body>

</html>

Struktur tersebut sudah cukup sebagai fondasi untuk mulai membangun website sederhana.

Gunakan Indentasi yang Rapi

Walaupun browser masih dapat membaca HTML yang tidak rapi, indentasi yang konsisten sangat membantu developer memahami hubungan antar elemen.

Contoh yang kurang rapi:

<main>
<section>
<h2>Belajar HTML</h2>
<p>Materi HTML</p>
</section>
</main>

Lebih baik ditulis:

<main>

  <section>

    <h2>
      Belajar HTML
    </h2>

    <p>
      Materi HTML
    </p>

  </section>

</main>

Saat proyek memiliki ratusan baris kode, struktur seperti ini jauh lebih mudah dibaca.

Kesalahan Struktur HTML yang Sering Dilakukan Pemula

Beberapa kesalahan yang cukup sering terjadi ketika baru belajar HTML antara lain:

  • Tidak menuliskan DOCTYPE.
  • Lupa menutup elemen HTML.
  • Meletakkan konten halaman di luar <body>.
  • Menggunakan terlalu banyak <div> tanpa semantic HTML.
  • Menggunakan lebih dari satu <main> tanpa kebutuhan yang tepat.
  • Membuat heading tanpa urutan yang jelas.
  • Tidak menggunakan atribut alt pada gambar.
  • Menulis kode tanpa indentasi yang konsisten.

Struktur File Website

Selain struktur HTML, organisasi file website juga perlu diperhatikan.

Untuk proyek sederhana, kamu bisa menggunakan:

website-saya/
│
├── index.html
├── style.css
├── script.js
│
└── images/
    └── logo.png

Struktur tersebut membuat file HTML, CSS, JavaScript, dan gambar lebih mudah dikelola.

Menghubungkan CSS dan JavaScript

CSS biasanya dipanggil dari bagian <head>.

<link
  rel="stylesheet"
  href="style.css"
>

Sementara JavaScript dapat dipanggil sebelum penutup </body> atau menggunakan atribut defer.

<script
  src="script.js"
  defer
></script>

Dengan pemisahan tersebut, struktur HTML tetap fokus pada konten, CSS mengatur presentasi, dan JavaScript menangani interaksi.

Untuk memahami pembagian fungsi tersebut, baca juga Perbedaan HTML, CSS, dan JavaScript.

Setelah Memahami Struktur HTML

Setelah memahami struktur dasar, jangan berhenti pada teori. Cobalah membuat halaman sederhana dengan header, menu navigasi, beberapa section, dan footer.

Kamu dapat melanjutkan dengan panduan Cara Membuat Website Pertama dari Nol.

Setelah website selesai dibuat, tahap berikutnya adalah mempublikasikannya agar dapat diakses melalui internet. Untuk itu, kamu bisa mengikuti panduan Cara Upload Website HTML ke cPanel.

Kesimpulan

Struktur HTML yang baik dimulai dari DOCTYPE, elemen <html>, <head>, dan <body>. Di dalam body, elemen semantic seperti <header>, <nav>, <main>, <section>, <article>, dan <footer> dapat digunakan untuk membuat struktur halaman lebih jelas.

Bagi pemula, fokuslah terlebih dahulu pada struktur yang rapi dan mudah dipahami. Setelah itu, tambahkan CSS untuk mengatur tampilan dan JavaScript untuk memberikan interaksi.

Topik: #Dasar Web #HTML #Pemula #Struktur HTML #Web Development
Lanjut Belajar
Semua artikel →

Artikel berikutnya

Apa Itu HTML? Pengertian, Fungsi, dan Contoh untuk Pemula →