Semantic HTML & SEO-Friendly

Apa Itu Semantic HTML?

Semantic HTML adalah penggunaan elemen-elemen HTML yang memiliki makna jelas tentang isi yang dikandungnya. Dengan kata lain, kita tidak hanya membuat layout pakai <div> dan <span>, tapi menggunakan tag yang sesuai fungsinya seperti:

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>

Kenapa Semantic HTML Penting?

Lebih Mudah Dibaca dan Dipelihara
Developer lain bisa cepat paham struktur halaman hanya dengan melihat tag-nya.
SEO-Friendly
Mesin pencari (seperti Google) memahami struktur konten dan memberikan nilai lebih untuk konten yang terstruktur baik.
Aksesibilitas Lebih Baik
Pembaca layar (screen reader) bisa menavigasi dengan mudah karena tahu mana bagian navigasi, artikel, dsb.
Masa Depan Lebih Aman
Standar web modern sangat mendorong penggunaan elemen semantik.

Elemen-Elemen Semantik Utama

Tag	Fungsi
`<header>`	Kepala halaman atau bagian (judul, logo, nav)
`<nav>`	Navigasi utama atau sekunder
`<main>`	Konten utama (hanya satu per halaman)
`<section>`	Bagian tematik dari halaman
`<article>`	Konten yang bisa berdiri sendiri (postingan, berita)
`<aside>`	Informasi tambahan (sidebar, catatan, iklan)
`<footer>`	Bagian bawah halaman atau bagian (kontak, copyright)

Contoh: Struktur Dasar Halaman dengan Semantic HTML

<body>
  <header>
    <h1>Belajar Web Development</h1>
    <nav>
      <ul>
        <li><a href="#">Beranda</a></li>
        <li><a href="#">Artikel</a></li>
        <li><a href="#">Kontak</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section>
      <h2>Artikel Terbaru</h2>
      <article>
        <h3>Belajar HTML dari Nol</h3>
        <p>HTML adalah bahasa markup untuk membuat struktur dasar website...</p>
      </article>
      <article>
        <h3>Tips Membuat Form yang User-Friendly</h3>
        <p>Formulir adalah komponen penting dalam interaksi pengguna...</p>
      </article>
    </section>

    <aside>
      <h3>Artikel Populer</h3>
      <ul>
        <li><a href="#">CSS Flexbox Dasar</a></li>
        <li><a href="#">JavaScript untuk Pemula</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2025 BelajarKoding. All rights reserved.</p>
  </footer>
</body>