Dokumentasi HTML interaktif: HTML Semantik

Q: Apa saja tag semantik di HTML?

Tag layout-nya adalah , , , , , dan . Tag semantik umum lainnya termasuk , , , , , dan heading sampai .

Q: Apakah div termasuk elemen semantik?

Tidak. tidak punya makna sendiri; elemen ini adalah kotak umum untuk styling dan layout. Pakai saat tidak ada tag semantik yang cocok, dan pakai , , dan lainnya saat ada yang cocok.

Q: Berapa banyak elemen main yang boleh ada di satu halaman?

Satu yang terlihat per halaman. Elemen ini membungkus konten yang unik untuk halaman itu, dan tidak boleh berada di dalam , , , atau .

Apa itu HTML semantik

HTML semantik berarti memilih setiap tag berdasarkan apa kontennya: navigasi masuk ke <nav>, konten utama ke <main>, postingan blog ke <article>. Tag-tag ini terlihat seperti kotak biasa, tapi memberi tahu browser, screen reader dan mesin pencari apa fungsi setiap bagian halaman. Berikut halaman lengkap yang dibuat dari tag layout semantik, masing-masing diberi garis tepi dan label:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Semantic layout</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    header, nav, main, article, aside, footer {
      border: 2px dashed #2563eb; padding: 8px; margin: 6px 0;
    }
    header::before, nav::before, main::before,
    article::before, aside::before, footer::before {
      display: block; font: 12px monospace; color: #2563eb;
    }
    header::before { content: "<header>"; }
    nav::before { content: "<nav>"; }
    main::before { content: "<main>"; }
    article::before { content: "<article>"; }
    aside::before { content: "<aside>"; }
    footer::before { content: "<footer>"; }
    .cols { display: flex; gap: 8px; }
    .cols article { flex: 2; }
    .cols aside { flex: 1; }
  </style>
</head>
<body>
  <header>
    <strong>My Blog</strong>
    <nav><a href="#">Home</a> | <a href="#">Posts</a> | <a href="#">About</a></nav>
  </header>
  <main>
    <div class="cols">
      <article>
        <h1>Learning HTML</h1>
        <p>A post about semantic tags.</p>
      </article>
      <aside>Related posts</aside>
    </div>
  </main>
  <footer>&copy; 2026 My Blog</footer>
</body>
</html>

Hapus elemen <style> dan halaman itu terlihat seperti teks biasa, tapi strukturnya tetap ada bagi siapa pun yang membaca kodenya, dan bagi software yang membacanya tanpa melihat piksel.

Tag layout semantik

Tag	Pakai untuk	Landmark screen reader
`<header>`	Pembuka halaman atau article: logo, judul, nama penulis	banner (hanya kalau tidak berada di dalam `article`, `aside`, `main`, `nav` atau `section`)
`<nav>`	Blok link navigasi utama	navigation
`<main>`	Konten yang unik untuk halaman ini, sekali per halaman	main
`<article>`	Bagian yang berdiri sendiri dan masuk akal sendirian: postingan, komentar, kartu produk	tidak ada secara default
`<section>`	Kelompok konten bertema dengan heading-nya sendiri	region, hanya kalau punya nama yang aksesibel
`<aside>`	Konten terkait di samping alur utama: sidebar, catatan	complementary
`<footer>`	Info penutup halaman atau article: hak cipta, penulis, link	contentinfo (hanya di tingkat halaman)

Setiap tag punya halamannya sendiri dengan penjelasan lebih lengkap: header, nav, section dan footer. Halaman ini membahas bagaimana semuanya saling melengkapi.

Kenapa tidak pakai div saja

Halaman yang hanya dibuat dari elemen <div> bisa terlihat sama persis dengan halaman semantik. Bedanya ada pada apa yang dikatakan markup-nya. Tekan tombol-tombolnya untuk memberi garis tepi pada elemen yang membawa makna di setiap versi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs semantic</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .page { border: 1px solid #e5e7eb; padding: 6px; margin-bottom: 10px; }
    .page > * { padding: 4px 8px; background: #f3f4f6; margin: 4px 0; }
    .on { outline: 3px solid #16a34a; }
  </style>
</head>
<body>
  <div class="page" id="divs">
    <div class="header">Site name</div>
    <div class="nav"><a href="#">Home</a> <a href="#">Posts</a></div>
    <div class="main">Page content</div>
    <div class="footer">Footer</div>
  </div>
  <div class="page" id="semantic">
    <header>Site name</header>
    <nav><a href="#">Home</a> <a href="#">Posts</a></nav>
    <main>Page content</main>
    <footer>Footer</footer>
  </div>
  <button onclick="mark('divs')">Outline meaning in div version</button>
  <button onclick="mark('semantic')">Outline meaning in semantic version</button>
  <p id="out"></p>
  <script>
    function mark(id) {
      document.querySelectorAll('.on').forEach(el => el.classList.remove('on'));
      const found = document.querySelectorAll('#' + id + ' :is(header, nav, main, aside, article, footer)');
      found.forEach(el => el.classList.add('on'));
      document.getElementById('out').textContent = found.length + ' semantic elements found';
    }
  </script>
</body>
</html>

Versi div menemukan 0, versi semantik menemukan 4. Itulah yang dilihat teknologi bantu: pengguna screen reader bisa langsung melompat ke navigasi atau konten utama di halaman semantik, tapi harus membaca semuanya di halaman div. Nama class seperti class="nav" tidak berarti apa-apa bagi browser.

<div> tetap pilihan yang tepat untuk kotak yang ada hanya demi styling atau layout, seperti pembungkus flex .cols di contoh pertama.

main, article dan aside

<main> membungkus apa yang unik untuk halaman ini dan hanya muncul sekali. Di dalamnya, <article> menandai konten yang tetap masuk akal kalau disalin sendirian ke situs lain, dan <aside> menandai konten yang berkaitan tapi bisa dihapus tanpa merusak article-nya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>article and aside</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 2px solid #e5e7eb; padding: 0 12px; }
    aside.note {
      float: inline-end; width: 40%; margin: 0 0 8px 12px;
      background: #fef3c7; border: 1px solid #f59e0b; padding: 8px; font-size: 14px;
    }
    time { color: #6b7280; }
  </style>
</head>
<body>
  <main>
    <article>
      <header>
        <h1>Baking bread at home</h1>
        <p>By Dana, <time datetime="2026-09-24">September 24, 2026</time></p>
      </header>
      <aside class="note">
        <strong>Note:</strong> flour types vary, so adjust the water a little.
      </aside>
      <p>Mix flour, water, salt and yeast. Knead for ten minutes, then let the dough rise for an hour.</p>
      <p>Shape the loaf and bake it at 230&deg;C until the crust is dark.</p>
      <footer>Filed under: cooking</footer>
    </article>
  </main>
</body>
</html>

Article itu punya <header> dan <footer>-nya sendiri. Keduanya tidak terbatas pada tingkat halaman: masing-masing membuka atau menutup article atau section terdekatnya. Elemen <time datetime> memberikan tanggal dalam bentuk yang bisa dibaca mesin sambil menampilkannya dalam bentuk yang mudah dibaca manusia.

Periksa kerangka heading-mu

Heading adalah setengah bagian lain dari struktur. Pengguna screen reader sering menjelajahi halaman dari heading ke heading, jadi tingkatannya harus terbaca seperti daftar isi tanpa tingkat yang dilompati. Script ini mencetak kerangka halaman tempat script itu berjalan:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Outline</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    pre { background: #111827; color: #e5e7eb; padding: 10px; }
  </style>
</head>
<body>
  <h1>Coffee guide</h1>
  <h2>Beans</h2>
  <h3>Arabica</h3>
  <h3>Robusta</h3>
  <h2>Brewing</h2>
  <h4>French press</h4>
  <pre id="outline"></pre>
  <script>
    const lines = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')].map(h => {
      const level = Number(h.tagName[1]);
      return '  '.repeat(level - 1) + h.tagName + ' ' + h.textContent;
    });
    document.getElementById('outline').textContent = lines.join('\n');
  </script>
</body>
</html>

h4 di bawah "Brewing" melompati satu tingkat. Ganti menjadi h3 dan kerangkanya terbaca rapi. Pilih tingkat heading berdasarkan struktur, lalu ubah ukurannya dengan CSS kalau kamu ingin lebih besar atau lebih kecil.

Tag semantik lainnya

Semantik bukan hanya soal layout. Tag tingkat teks berikut juga membawa makna:

Tag	Makna
`<strong>`	Teks penting (tebal secara default)
`<em>`	Penekanan (miring secara default)
`<figure>` dan `<figcaption>`	Gambar, grafik atau contoh kode beserta keterangannya
`<time datetime="...">`	Tanggal atau waktu dalam bentuk yang bisa dibaca mesin
`<address>`	Detail kontak penulis halaman atau article
`<mark>`	Teks yang disorot, seperti hasil pencarian yang cocok
`<abbr title="...">`	Singkatan beserta kepanjangannya
`<button>`	Sesuatu yang menjalankan sebuah aksi

<!DOCTYPE html>
<figure style="margin: 0; border: 1px solid #e5e7eb; padding: 8px; display: inline-block;">
  <img alt="Blue square" width="120" height="80"
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Crect width='120' height='80' fill='%232563eb'/%3E%3C/svg%3E">
  <figcaption>Figure 1: a caption tied to its image.</figcaption>
</figure>
<p>Search results for <mark>semantic</mark>. The <abbr title="World Wide Web Consortium">W3C</abbr> writes web standards.</p>

Arahkan kursor ke singkatan "W3C" untuk melihat kepanjangannya di tooltip.

Kesalahan umum

Memakai tag demi tampilannya. <blockquote> untuk kutipan, bukan untuk indentasi; <h3> untuk tingkat heading, bukan untuk teks tebal berukuran sedang. Atur gayanya dengan CSS.
Membungkus semuanya dengan <section>. Section harus punya heading dan tema. Kalau kamu butuh kotak untuk styling, pakai <div>.
Lebih dari satu <main> yang terlihat. Cukup satu per halaman, dan jangan pernah menyarangkannya di dalam <article>, <aside>, <header>, <nav> atau <footer>.
Memasukkan setiap daftar link ke <nav>. Simpan untuk blok navigasi utama, seperti menu situs atau daftar isi. Beberapa link di footer tidak membutuhkannya.
Elemen <div> yang bisa diklik. <div onclick> tidak bisa dijangkau dengan keyboard. Pakai <button> untuk aksi dan <a href> untuk navigasi.

Pertanyaan yang sering diajukan

Apa itu HTML semantik?

HTML semantik adalah markup yang setiap tag-nya menjelaskan makna kontennya: <nav> untuk navigasi, <article> untuk satu bagian yang berdiri sendiri, <button> untuk tombol. Dengan begitu, browser, screen reader dan mesin pencari bisa memahami halaman tanpa menebak-nebak dari nama class atau gaya.

Apa saja tag semantik di HTML?

Tag layout-nya adalah <header>, <nav>, <main>, <article>, <section>, <aside> dan <footer>. Tag semantik umum lainnya termasuk <figure>, <figcaption>, <time>, <address>, <strong>, <em> dan heading <h1> sampai <h6>.

Apakah div termasuk elemen semantik?

Tidak. <div> tidak punya makna sendiri; elemen ini adalah kotak umum untuk styling dan layout. Pakai saat tidak ada tag semantik yang cocok, dan pakai <header>, <main>, <nav> dan lainnya saat ada yang cocok.

Untuk apa tag aside dipakai?

<aside> berisi konten yang berkaitan dengan konten utama tapi bukan bagian dari alurnya: sidebar, kotak link terkait, catatan glosarium atau kutipan yang ditonjolkan. Di tingkat halaman, screen reader mencantumkannya sebagai landmark complementary.

Berapa banyak elemen main yang boleh ada di satu halaman?

Satu <main> yang terlihat per halaman. Elemen ini membungkus konten yang unik untuk halaman itu, dan tidak boleh berada di dalam <header>, <nav>, <article>, <aside> atau <footer>.

Apakah HTML semantik membantu SEO?

HTML semantik membantu mesin pencari memahami bagian mana yang merupakan konten utama, mana yang navigasi, dan bagaimana heading saling berhubungan. Ini bukan jalan pintas untuk peringkat, tapi menghilangkan tebak-tebakan dan meningkatkan aksesibilitas, yang memang layak dilakukan.

Konsep terkait

HTML Semantik: Tag, Struktur Halaman dan Aksesibilitas