Semantic HTML

May 2, 2025

Semantic HTML adalah penggunaan elemen HTML sesuai dengan maknanya, bukan sekadar untuk tampilan.
Artinya, kita memilih tag berdasarkan arti kontennya, bukan hanya bentuk visualnya.

Dengan semantic HTML, struktur halaman jadi:

Lebih mudah dipahami oleh manusia
Lebih akurat dipahami mesin pencari (SEO)
Lebih ramah aksesibilitas (screen reader)

Kenapa Harus Menggunakan Semantic HTML?

SEO lebih baik
Mesin pencari seperti Google bisa lebih cepat memahami konten halaman kamu.
Aksesibilitas meningkat
Alat bantu seperti screen reader bisa membacakan halaman dengan lebih masuk akal.
Struktur kode lebih rapi dan profesional
Developer lain akan lebih gampang memahami kode kamu.
Maintainability
Kalau struktur jelas, mengembangkan/memperbaiki halaman jadi lebih gampang.

Contoh Tag Semantic HTML

Tag	Fungsi
`<header>`	Bagian kepala atau pembuka halaman/section
`<nav>`	Menu navigasi utama
`<main>`	Konten utama dari halaman
`<section>`	Seksi/kelompok konten yang berhubungan
`<article>`	Konten independen seperti artikel, postingan blog
`<aside>`	Konten sampingan (sidebar, related links)
`<footer>`	Bagian kaki halaman atau section
`<figure>` dan `<figcaption>`	Gambar dengan caption
`<mark>`	Menandai teks yang penting
`<time>`	Menandai waktu atau tanggal

Contoh Penggunaan Semantic HTML

Tanpa semantic:

<div id="header">Logo dan navigasi</div>
<div id="main">Isi konten</div>
<div id="footer">Hak cipta</div>

Dengan semantic:

<header>Logo dan navigasi</header>
<main>Isi konten</main>
<footer>Hak cipta</footer>

Lebih rapi, lebih bermakna!

Struktur Halaman dengan Semantic HTML

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <title>Contoh Semantic HTML</title>
  </head>
  <body>
    <header>
      <h1>Judul Website</h1>
      <nav>
        <ul>
          <li><a href="#">Beranda</a></li>
          <li><a href="#">Tentang</a></li>
          <li><a href="#">Kontak</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <article>
        <h2>Judul Artikel</h2>
        <p>Ini adalah isi artikel utama.</p>
      </article>

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

    <footer>
      <p>Hak Cipta © 2025</p>
    </footer>
  </body>
</html>

Kesimpulan

Semantic HTML = kode yang punya arti, bukan cuma gaya.
Membuat website lebih SEO-friendly, accessible, dan gampang dipahami.
Biasakan menggunakan tag semantic sejak awal belajar HTML.

Ingat, bikin website itu bukan cuma buat manusia, tapi juga buat mesin. 😉