Pelajari cara membuat layout halaman web menggunakan elemen HTML seperti <header>, <nav>, <section>, <article>, dan <footer>.

Layout HTML

Layout dalam HTML adalah struktur dasar dari sebuah halaman web. Dengan menggunakan elemen-elemen layout yang semantik, kita bisa membuat halaman yang lebih mudah dipahami oleh browser dan mesin pencari.

Elemen Layout Utama

HTML5 memperkenalkan beberapa elemen semantik untuk membantu menyusun layout halaman:

<header> – bagian atas halaman atau bagian dari konten
<nav> – navigasi
<section> – bagian dalam halaman
<article> – konten mandiri
<aside> – konten sampingan, seperti sidebar
<footer> – bagian bawah halaman

Contoh Layout Sederhana

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Layout</title>
</head>
<body>
 
  <header>
    <h1>Judul Situs</h1>
  </header>
 
  <nav>
    <a href="#">Beranda</a> |
    <a href="#">Tentang</a> |
    <a href="#">Kontak</a>
  </nav>
 
  <section>
    <h2>Konten Utama</h2>
    <article>
      <h3>Artikel Pertama</h3>
      <p>Ini adalah isi artikel pertama.</p>
    </article>
  </section>
 
  <aside>
    <h3>Sidebar</h3>
    <p>Beberapa info tambahan di sini.</p>
  </aside>
 
  <footer>
    <p>Hak Cipta &copy; 2025</p>
  </footer>
 
</body>
</html>

Tips:

Gunakan CSS untuk mengatur posisi dan tampilan layout.
Gunakan elemen semantik untuk membuat kode HTML lebih mudah dipahami.
Pastikan layout responsif agar dapat tampil baik di semua perangkat.

HTML Layout

Layout HTML

Elemen Layout Utama

Contoh Layout Sederhana

Tips:

On this page