Layout HTML: Menyusun Tata Letak Seluruh Halaman

Sampai di titik ini, kamu sudah bisa menulis hampir semua jenis elemen yang dibutuhkan sebuah halaman — heading, teks, tautan, gambar, form, tabel, sampai list. Layout adalah tingkat berikutnya. Kalau sebelumnya pertanyaannya “elemen yang satu ini fungsinya apa?”, sekarang kamu mundur sejenak dan bertanya, “gimana sih seluruh halaman ini disusun?” Logonya taruh di mana? Bagian mananya menu? Mana konten utamanya, dan apa yang ditempatkan di samping?

Susunan bagian-bagian besar itulah — header di atas, navigasi, konten utama, mungkin sebuah sidebar, lalu footer di bawah — yang orang maksud dengan layout. Di artikel ini kamu bakal belajar cara baku menyusun tata letak halaman dengan HTML, pola-pola halaman yang akan terus kamu temui, dan yang tak kalah penting: persisnya di mana tugas HTML berhenti dan CSS mengambil alih. Memahami batas itu dengan benar bakal menyelamatkan kamu dari banyak kebingungan nanti.

Apa sebenarnya arti “layout”

Coba buka hampir situs web mana pun, dan kamu akan menemukan kerangka yang sama: ada pita di bagian atas berisi logo dan menu, satu kolom lebar di tengah tempat konten sesungguhnya berada, kadang ada kolom yang lebih sempit di sampingnya untuk tautan tambahan atau iklan, dan sebuah bar di paling bawah berisi hak cipta serta detail kontak. Bagian-bagian itulah yang disebut layout.

Tugas HTML dalam semua ini adalah menandai bagian mana itu apa — menyatakan “bagian ini header, ini navigasi, ini konten utama.” HTML tidak memutuskan di mana letak setiap bagian di layar, seberapa lebar, atau apakah sidebar-nya ada di kiri atau kanan. Penempatan visual itu urusan CSS. Jadi waktu kita ngomongin layout HTML, sebenarnya yang kita bicarakan adalah struktur: menulis wadah yang tepat, dengan urutan yang tepat, dan makna yang tepat.

HTML menyusun struktur, CSS menempatkan posisi

Ini gagasan paling penting di seluruh artikel ini. HTML menyatakan apa setiap bagian itu; CSS yang memutuskan di mana letaknya dan seberapa besar. Sebuah <header> tidak muncul di atas gara-gara namanya “header” — dia muncul di mana pun CSS-mu menempatkannya (yang biasanya memang di atas, karena ke situlah kamu mengatur stylenya). Pisahkan dua tugas ini di kepalamu, dan layout langsung berhenti terasa misterius.

Tata letak semantik standar

Di artikel HTML semantik, kamu sudah berkenalan dengan elemen-elemen yang menamai bagian-bagian halaman: <header>, <nav>, <main>, <aside>, dan <footer>. Nah, layout adalah tempat semua elemen itu menyatu menjadi satu halaman yang utuh. Berikut struktur yang akan jadi pilihan defaultmu:

<body>
  <header>
    <h1>ACY Partner Indonesia</h1>
    <nav>
      <a href="/">Beranda</a>
      <a href="/layanan">Layanan</a>
      <a href="/kontak">Kontak</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Selamat Datang</h2>
      <p>Ini adalah konten utama halaman.</p>
    </article>
  </main>

  <aside>
    <h3>Terkait</h3>
    <ul>
      <li><a href="/blog/artikel-1">Sebuah tulisan terbaru</a></li>
      <li><a href="/blog/artikel-2">Tulisan lainnya</a></li>
    </ul>
  </aside>

  <footer>
    <p>&copy; 2026 ACY Partner Indonesia. Hak cipta dilindungi.</p>
  </footer>
</body>

Baca dari atas ke bawah, dan bentuk halamannya langsung jelas tanpa perlu satu komentar pun: header dengan judul situs dan menu, konten utama berisi sebuah artikel, sidebar berisi tautan terkait, lalu footer. Keterbacaan seperti inilah alasan utama kita memakai elemen-elemen tadi ketimbang setumpuk <div> polos.

Perhatikan, urutan menulisnya lebih penting dari yang mungkin kamu kira. Urutan di kode sumber adalah urutan kemunculan konten bagi pembaca layar, bagi mesin pencari yang merayapi halaman, dan bagi siapa pun yang membaca dengan CSS dimatikan. Jadi tulislah bagian-bagian itu dalam urutan baca yang masuk akal — header dulu, baru konten utama, lalu konten pendukung, terakhir footer — sekalipun nanti CSS memindahkan sidebar ke kanan atau menyembunyikan menu ke dalam tombol hamburger.

Mengenal sekilas elemen-elemen layout

Tiap bagian punya tugasnya masing-masing. Elemen-elemen ini sudah pernah kamu lihat, tapi inilah cara mereka saling melengkapi khusus sebagai blok penyusun layout:

Elemen	Perannya dalam layout
`<header>`	Pita atas — logo, judul situs, sering juga navigasi utama
`<nav>`	Menu navigasi utama
`<main>`	Satu bagian tengah yang memuat konten unik halaman
`<article>`	Potongan mandiri di dalam `<main>` — sebuah tulisan, sebuah kartu
`<section>`	Pengelompokan bertema saat tak ada elemen yang lebih spesifik
`<aside>`	Konten di samping alur utama — sidebar, tautan terkait, iklan
`<footer>`	Pita bawah — hak cipta, kontak, tautan sekunder

Ada beberapa catatan soal penempatan yang sering bikin orang keliru:

<main> cuma muncul sekali per halaman dan hanya membungkus konten utama. Header, nav, dan footer berada di luar-nya.
<aside> tidak harus berupa sidebar secara visual. Maknanya sekadar “konten yang berhubungan secara tidak langsung dengan konten utama.” CSS-lah yang menentukan apakah dia berakhir di samping, di bawah, atau disembunyikan di tampilan ponsel.
<nav> untuk navigasi besar, seperti menu situs — kamu tidak perlu membungkus setiap tautan yang nyasar ke dalamnya.

Pola tata letak halaman yang umum

Sebagian besar halaman sebenarnya cuma variasi dari segelintir pola. Begitu kamu mengenalinya, kamu bakal melihatnya di mana-mana.

Header — main — footer

Ini layout paling sederhana yang sudah berguna: ada header, kontennya, dan footer. Tanpa sidebar. Pola ini cocok untuk sebuah tulisan blog, halaman dokumentasi, atau halaman pendaratan — apa pun yang ingin kamu buat agar pembaca fokus pada satu kolom konten.

<body>
  <header>
    <h1>Blog Saya</h1>
    <nav>
      <a href="/">Beranda</a>
      <a href="/tentang">Tentang</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Tulisan Pertama Saya</h2>
      <p>Teks lengkap tulisannya ada di sini...</p>
    </article>
  </main>

  <footer>
    <p>&copy; 2026 John Doe</p>
  </footer>
</body>

Tambahkan satu <aside> di sebelah <main>, dan jadilah layout dua kolom klasik — area konten yang lebar dengan sidebar yang lebih sempit untuk navigasi, iklan, atau tautan terkait. Secara struktur, ini cuma pola sebelumnya ditambah satu elemen:

<body>
  <header>...</header>

  <main>
    <article>
      <h2>Judul Artikel</h2>
      <p>Konten utamanya...</p>
    </article>
  </main>

  <aside>
    <h3>Di bagian ini</h3>
    <ul>
      <li><a href="#pendahuluan">Pendahuluan</a></li>
      <li><a href="#persiapan">Persiapan</a></li>
    </ul>
  </aside>

  <footer>...</footer>
</body>

Ingat baik-baik: menulis <aside> setelah <main> tidak otomatis memaksanya ke kanan atau bahkan ke samping konten. HTML cuma menyatakan bahwa kedua bagian itu ada. CSS-lah — lewat Flexbox atau Grid — yang menatanya berdampingan. Sebentar lagi kita kembali ke batas pemisah ini.

Section di dalam konten utama

Di dalam <main>, halaman yang panjang biasanya dipecah menjadi beberapa blok <section>, masing-masing dengan headingnya sendiri. Sebuah halaman beranda, misalnya, bisa menumpuk beberapa section bertema:

<main>
  <section>
    <h2>Apa yang Kami Kerjakan</h2>
    <p>...</p>
  </section>

  <section>
    <h2>Karya Kami</h2>
    <p>...</p>
  </section>

  <section>
    <h2>Hubungi Kami</h2>
    <p>...</p>
  </section>
</main>

Setiap <section> adalah satu pita halaman yang berdiri sendiri. Pendekatan ini bikin markup-mu tertata rapi sekaligus memberi pembaca layar dan CSS-mu pegangan yang jelas untuk diolah.

Selalu beri heading pada setiap section

<section> itu dimaksudkan untuk mengelompokkan konten di bawah sebuah heading. Kalau sebuah blok tidak punya heading yang wajar, kemungkinan besar dia memang bukan section — pakai <div> polos saja. Pegangan praktisnya: setiap <section> sebaiknya memuat heading (<h2>, <h3>, dan seterusnya) yang menamai isinya. Section tanpa heading biasanya pertanda kamu salah pilih elemen.

Di mana HTML berhenti dan CSS mulai

Bagian inilah yang paling sering bikin pemula bingung, jadi mari kita perjelas betul-betul.

Layout HTML-mu — <header>, <main>, <aside>, <footer> — hanya menyatakan bagian-bagian itu apa dan dalam urutan apa mereka muncul di dokumen. Dengan sendirinya, markup itu akan tampil sebagai tumpukan polos dari atas ke bawah: header, lalu main, lalu aside, lalu footer, masing-masing selebar penuh dan saling bertumpuk ke bawah. Tidak ada kolom, tidak ada header yang menempel, tidak ada sidebar di kanan. Belum ada apa pun yang diatur posisinya.

Untuk menyulap tumpukan itu menjadi tata letak visual yang sesungguhnya — kolom yang berjajar, header yang menempel di atas, sidebar dengan lebar tetap — kamu memakai CSS. Dua alat utamanya adalah Flexbox dan Grid, dan justru karena itulah section ini punya artikel khusus tentang CSS Flexbox dan CSS Grid. HTML membangun kerangkanya; alat-alat CSS itu yang menata tulang-tulangnya.

Jangan mengatur posisi lewat HTML

Tidak ada atribut HTML untuk “taruh ini di kanan” atau “buat jadi dua kolom.” Tutorial-tutorial lama kadang masih memperlihatkan layout yang dibangun dari elemen <table> atau setumpuk <div> dengan atribut align — pendekatan itu sudah lama mati. Tabel itu untuk data tabular, bukan untuk tata letak halaman. Kalau kamu sampai menjangkau HTML untuk memindahkan sesuatu di layar, berhenti dulu: itu tugasnya CSS. HTML-mu sebaiknya hanya menggambarkan struktur dan makna, serta benar-benar bebas dari urusan penempatan.

Jadi model berpikir yang sehat adalah proses dua langkah. Langkah satu (HTML): tulis bagian-bagianmu dalam urutan baca yang masuk akal memakai elemen semantik yang tepat. Langkah dua (CSS): atur posisi bagian-bagian itu sesuai kebutuhan desain. Pisahkan keduanya, dan masing-masing tetap sederhana. Campur aduk, dan dua-duanya jadi berantakan.

Kapan memakai `<div>` dalam layout

Kamu tidak akan membangun seluruh layout cuma dari elemen semantik, dan itu wajar. Elemen semantik menamai bagian-bagian yang bermakna, tapi kamu tetap butuh wadah polos murni untuk mengelompokkan dan menata tampilan — dan untuk itulah <div> ada.

Pola yang umum dan benar-benar sah adalah membungkus konten dalam sebuah <div> supaya CSS punya sesuatu untuk dipegang. Misalnya, kamu mau menengahkan konten halaman dengan sebuah pembungkus:

<main>
  <div class="container">
    <article>
      <h2>Judul Artikel</h2>
      <p>...</p>
    </article>
  </div>
</main>

<div class="container"> itu tidak membawa makna apa pun — dia cuma pegangan untuk styling, dipakai untuk menetapkan lebar maksimum dan menengahkan konten. Tidak ada elemen semantik yang berarti “pembungkus untuk menengahkan”, jadi <div> adalah alat yang tepat di sini. Aturannya tetap sama seperti biasa: jangkau elemen semantik kalau ada yang cocok dengan maknanya, dan jatuh ke <div> untuk pengelompokan polos kalau tidak ada yang pas. Memakai <div> di sini bukan kerja asal-asalan — yang asal-asalan itu memakainya menggantikan <header> atau <nav> yang sebenarnya tersedia.

Sebuah layout utuh dari awal sampai akhir

Mari kita satukan semuanya menjadi satu halaman nyata yang memakai setiap bagian secara semestinya:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ACY Partner Indonesia</title>
</head>
<body>
  <header>
    <h1>ACY Partner Indonesia</h1>
    <nav>
      <a href="/">Beranda</a>
      <a href="/layanan">Layanan</a>
      <a href="/blog">Blog</a>
      <a href="/kontak">Kontak</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Membangun Situs Web yang Lebih Baik</h2>
      <p>Selamat datang di situs kami. Inilah yang sedang kami kerjakan...</p>
    </article>

    <section>
      <h2>Proyek Terbaru</h2>
      <p>Sekilas tentang karya terbaru kami.</p>
    </section>
  </main>

  <aside>
    <h3>Tulisan Terbaru</h3>
    <ul>
      <li><a href="/blog/artikel-1">Memulai dengan HTML</a></li>
      <li><a href="/blog/artikel-2">Kenapa semantik itu penting</a></li>
    </ul>
  </aside>

  <footer>
    <p>&copy; 2026 ACY Partner Indonesia. Hak cipta dilindungi.</p>
    <p>Kontak: <a href="mailto:hello@example.com">hello@example.com</a></p>
  </footer>
</body>
</html>

Ini kerangka halaman yang utuh dan profesional. Setiap bagian menyatakan dirinya apa, urutan bacanya masuk akal, dan tidak ada satu pun trik penempatan di dalamnya — karena memang seharusnya begitu. Serahkan ini ke seorang desainer (atau buka berkas CSS-mu) dan kamu bisa menatanya sesuka hati, di ukuran layar berapa pun, tanpa menyentuh strukturnya sama sekali. Pemisahan seperti itulah hasil dari menyusun layout secara rapi.

Penutup

Layout adalah langkah saat kamu berhenti memikirkan elemen satu per satu dan mulai memikirkan halaman secara keseluruhan:

Layout adalah susunan bagian-bagian besar sebuah halaman — header, nav, main, aside, footer.
Tugas HTML adalah menandai bagian mana itu apa, memakai elemen semantik, dalam urutan baca yang masuk akal. HTML tidak mengatur posisi apa pun.
Tata letak standar menumpuk <header>, <main> (dengan <article>/<section> di dalamnya), <aside>, dan <footer>.
Kebanyakan halaman cuma variasi dari beberapa pola — header/main/footer, dua kolom konten-plus-sidebar, dan section-section di dalam konten utama.
CSS — Flexbox dan Grid — yang melakukan penempatan sesungguhnya. Jangan pernah mencoba memindahkan sesuatu lewat HTML, dan jangan pakai <table> untuk layout.
Jangkau <div> kalau kamu cuma butuh wadah polos untuk ditata, dan elemen semantik kalau ada yang cocok dengan maknanya.

Susun strukturnya dengan benar lebih dulu, dan urusan styling jadi bagian yang gampang. Dengan kerangka yang bersih dan semantik, kamu bisa membangun halaman yang sama sebagai satu kolom di ponsel atau dashboard multi-kolom di desktop — semuanya dari CSS, tanpa menulis ulang satu baris pun HTML-mu.