Docs/HTML/Semantic HTML

Semantic HTML

Semantic elements secara jelas mendeskripsikan makna kontennya kepada browser dan developer.

Semantic Elements

  • <header> — header halaman/section
  • <nav> — navigasi
  • <main> — konten utama
  • <article> — konten independen
  • <section> — section tematik
  • <aside> — konten sidebar
  • <footer> — footer halaman/section
  • <figure> — konten media dengan caption
  • <time> — waktu/tanggal

Kenapa Penting?

  • SEO lebih baik — mesin pencari memahami konten
  • Aksesibilitas — screen reader bisa navigasi lebih mudah
  • Kode lebih mudah dibaca dan di-maintain
index.html
Try It →
<header>
  <h1>My Website</h1>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>
</header>

<main>
  <article>
    <h2>Article Title</h2>
    <p>This is a semantic article element.</p>
  </article>
  <aside>
    <h3>Sidebar</h3>
    <p>Related content here.</p>
  </aside>
</main>

<footer>
  <p>&copy; 2024 My Website</p>
</footer>
← Previous
Forms
Next →
Attributes