Semantic Elements di HTML: Header, Footer, Nav, Main, Article, Section, Aside

Pelajari berbagai semantic elements di HTML seperti header, footer, nav, main, article, section, aside, figure, danfigcaption. Pahami cara menggunakannya.

Tutorial9 September 2026Muhammad Hanif

Artikel ini merupakan bagian dari seri Belajar HTML untuk Pemula di hanifmu.com. Setelah memahami mengapa semantic HTML penting, kita bahas satu per satu tag semantic yang tersedia.

`<header>`

Tag <header> menandakan bagian atas dari sebuah section atau halaman. Biasanya berisi judul, navigasi, logo, atau pencarian.

<header>
  <h1>Nama Website</h1>
  <nav>
    <a href="/">Beranda</a>
    <a href="/tentang">Tentang</a>
    <a href="/kontak">Kontak</a>
  </nav>
</header>

<header> bisa digunakan beberapa kali dalam satu halaman, misalnya untuk header halaman dan header artikel.

`<footer>`

Tag <footer> menandakan bagian bawah dari sebuah section atau halaman. Biasanya berisi copyright, link legal, atau informasi kontak.

<footer>
  <p>&copy; 2026 Nama Website</p>
  <nav>
    <a href="/privasi">Kebijakan Privasi</a>
    <a href="/syarat">Syarat & Ketentuan</a>
  </nav>
</footer>

`<nav>`

Tag <nav> menandakan bagian navigasi. Gunakan untuk menu utama, sidebar navigation, atau breadcrumbs.

<nav>
  <ul>
    <li><a href="/">Beranda</a></li>
    <li><a href="/produk">Produk</a></li>
    <li><a href="/layanan">Layanan</a></li>
    <li><a href="/kontak">Kontak</a></li>
  </ul>
</nav>

Hindari menggunakan <nav> untuk setiap link. Gunakan hanya untuk navigasi utama.

`<main>`

Tag <main> menandakan konten utama dari halaman. Hanya boleh ada satu <main> per halaman.

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

  <main>
    <article>
      <h1>Judul Artikel</h1>
      <p>Isi artikel...</p>
    </article>
  </main>

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

Screen reader bisa langsung melompat ke <main> untuk melewati header dan navigasi.

`<article>`

Tag <article> menandakan konten yang mandiri dan bisa didistribusikan ulang. Cocok untuk:

Artikel blog
Postingan forum
Komentar pengguna
Widget yang bisa di-embed

<article>
  <header>
    <h2>Judul Artikel</h2>
    <time datetime="2026-09-07">7 September 2026</time>
  </header>

  <p>Isi artikel di sini...</p>

  <footer>
    <p>Ditulis oleh Muhammad Hanif</p>
  </footer>
</article>

<article> bisa bersarang, misalnya komentar di dalam artikel:

<article>
  <h2>Artikel Utama</h2>
  <p>Isi artikel...</p>

  <article>
    <h3>Komentar</h3>
    <p>Bagus artikelnya!</p>
  </article>

  <article>
    <h3>Komentar</h3>
    <p>Sangat membantu, terima kasih.</p>
  </article>
</article>

`<section>`

Tag <section> menandakan pengelompokan konten berdasarkan topik. Bedanya dengan <div>, <section> punya makna semantik.

<article>
  <h2>Cara Belajar HTML</h2>

  <section>
    <h3>Pengenalan</h3>
    <p>HTML adalah bahasa markup...</p>
  </section>

  <section>
    <h3>Langkah Pertama</h3>
    <p>Mulai dengan belajar tag dasar...</p>
  </section>

  <section>
    <h3>Tips Lanjutan</h3>
    <p>Setelah menguasai dasar, lanjut ke...</p>
  </section>
</article>

Gunakan <section> ketika konten punya heading sendiri. Jika hanya untuk grouping tanpa heading, gunakan <div>.

`<aside>`

Tag <aside> menandakan konten yang berhubungan tapi tidak bagian utama dari konten. Biasanya untuk sidebar, iklan, atau related content.

<main>
  <article>
    <h1>Artikel Utama</h1>
    <p>Isi artikel...</p>
  </article>

  <aside>
    <h3>Artikel Terkait</h3>
    <ul>
      <li><a href="/artikel-1">Artikel 1</a></li>
      <li><a href="/artikel-2">Artikel 2</a></li>
    </ul>
  </aside>
</main>

`<figure>` dan `<figcaption>`

Tag <figure> membungkus konten yang dirujuk dari konten utama (gambar, diagram, kode). <figcaption> jadi caption-nya.

<figure>
  <img src="grafik.png" alt="Grafik penjualan" />
  <figcaption>Gambar 1: Grafik penjualan Q1 2026</figcaption>
</figure>

Bisa juga untuk kode:

<figure>
  <pre><code>
    &lt;p&gt;Hello World&lt;/p&gt;
  </code></pre>
  <figcaption>Contoh kode HTML dasar</figcaption>
</figure>

`<time>`

Tag <time> menandakan waktu atau tanggal. Berguna untuk SEO dan microdata.

<time datetime="2026-09-07">7 September 2026</time>
<time datetime="14:30">Jam 2 sore</time>

`<address>`

Tag <address> menandakan informasi kontak. Bukan untuk alamat fisik semata, tapi untuk informasi kontak pemilik konten.

<address>
  Ditulis oleh <a href="mailto:[email protected]">Muhammad Hanif</a>.<br />
  Kunjungi <a href="https://hanifmu.com">hanifmu.com</a> untuk info lebih lanjut.
</address>

Contoh Layout Lengkap

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <title>Contoh Semantic HTML</title>
    <style>
      body { font-family: Arial, sans-serif; margin: 0; }
      header, footer { background: #333; color: white; padding: 20px; }
      nav a { color: white; margin-right: 15px; }
      main { padding: 20px; display: flex; gap: 20px; }
      article { flex: 2; }
      aside { flex: 1; background: #f4f4f4; padding: 15px; }
      section { margin-bottom: 20px; border-bottom: 1px solid #ddd; padding-bottom: 10px; }
    </style>
  </head>
  <body>
    <header>
      <h1>Website Saya</h1>
      <nav>
        <a href="/">Beranda</a>
        <a href="/blog">Blog</a>
        <a href="/tentang">Tentang</a>
        <a href="/kontak">Kontak</a>
      </nav>
    </header>

    <main>
      <article>
        <header>
          <h2>Panduan Semantic HTML</h2>
          <time datetime="2026-09-07">7 September 2026</time>
        </header>

        <section>
          <h3>Apa itu Semantic HTML?</h3>
          <p>Semantic HTML adalah penggunaan tag yang bermakna...</p>
        </section>

        <section>
          <h3>Manfaat Semantic HTML</h3>
          <p>SEO lebih baik, aksesibilitas lebih baik...</p>
        </section>

        <footer>
          <p>Ditulis oleh <a href="mailto:[email protected]">Muhammad Hanif</a></p>
        </footer>
      </article>

      <aside>
        <h3>Artikel Terkait</h3>
        <ul>
          <li><a href="#">Cara Belajar CSS</a></li>
          <li><a href="#">Pengenalan JavaScript</a></li>
        </ul>
      </aside>
    </main>

    <footer>
      <p>&copy; 2026 Website Saya</p>
      <address>
        Hubungi: <a href="mailto:[email protected]">[email protected]</a>
      </address>
    </footer>
  </body>
</html>

Kapan Menggunakan `<div>` vs `<section>` vs `<article>`?

Tag	Kapan Digunakan
`<div>`	Kontainer styling tanpa makna
`<section>`	Pengelompokan konten berdasarkan topik
`<article>`	Konten mandiri yang bisa didistribusikan ulang

Aturan praktis:

Kalau konten bisa RSS feed, gunakan <article>
Kalau konten punya heading sendiri, gunakan <section>
Kalau hanya untuk styling, gunakan <div>

Ringkasan

<header> — Bagian atas halaman atau section
<footer> — Bagian bawah halaman atau section
<nav> — Navigasi utama
<main> — Konten utama (hanya satu per halaman)
<article> — Konten mandiri
<section> — Pengelompokan topik
<aside> — Konten sampingan
<figure> + <figcaption> — Gambar/konten dengan caption
<time> — Waktu atau tanggal
<address> — Informasi kontak

Langkah Selanjutnya

Kamu sudah memahami berbagai semantic elements. Artikel selanjutnya membahas audio di HTML, cara menampilkan dan mengontrol pemutar audio.

<header>#

<footer>#

<nav>#

<main>#

<article>#

<section>#

<aside>#

<figure> dan <figcaption>#

<time>#

<address>#

Contoh Layout Lengkap#

Kapan Menggunakan <div> vs <section> vs <article>?#

Ringkasan#

Langkah Selanjutnya#