Kalau Anda sudah belajar HTML dasar, biasanya tahap berikutnya adalah mulai membuat halaman yang lebih lengkap: ada header, menu, isi artikel, sidebar, dan footer.

Masalahnya, banyak pemula (termasuk saya dulu) membuat semuanya pakai <div>.

Hasilnya memang jalan… tapi begitu file HTML-nya sudah panjang, kita mulai bingung sendiri:

  • bagian header yang mana?
  • menu navigasi ditaruh di mana?
  • konten utama yang benar itu apa?

Nah, HTML5 sebenarnya sudah menyediakan solusi: Semantic Elements.

Semantic HTML ini penting bukan karena “biar keren”, tapi karena memang membuat struktur halaman lebih rapi, lebih enak dibaca, dan lebih bagus untuk SEO.

Sebelum lanjut, pastikan sudah paham materi HTML dasar dulu

Kalau Anda masih baru belajar HTML, sebaiknya baca dulu materi-materi dasar berikut:

  • Tutorial HTML: Membuat Paragraf
  • Tutorial HTML: Membuat Hyperlink
  • Tutorial HTML: Menampilkan Gambar
  • Tutorial HTML: Membuat Tabel
  • Tutorial HTML: Membuat Form

Semua tutorial itu bisa Anda pelajari di sini.

Apa itu Semantic Elements?

Semantic element adalah elemen HTML yang memiliki arti sesuai fungsinya, dengan tujuan untuk menyampaikan fungsi-fungsi elemen tersebut kepada pengembang, browser dan algoritma mesin pencari.

Contoh:

  • <header> → bagian atas halaman (judul/logo)
  • <nav> → navigasi/menu
  • <main> → konten utama
  • <article> → artikel yang berdiri sendiri
  • <footer> → bagian bawah halaman

Kalau Anda bandingkan dengan <div>, semantic element ini lebih “jelas”.

Kenapa Semantic HTML itu penting?

Banyak yang bertanya: “Kalau pakai <div> semua juga bisa, kenapa harus pakai semantic?”

Jawabannya ada 3:

1) Struktur HTML lebih rapi

Saat membuka ulang file HTML beberapa hari kemudian, Anda langsung paham struktur halamannya.

2) Lebih bagus untuk SEO

Mesin pencari seperti Google lebih mudah memahami konten utama, artikel, navigasi, dll.

3) Lebih ramah aksesibilitas

Beberapa alat bantu seperti screen reader bisa membaca struktur halaman lebih jelas.

Semantic Elements yang sering dipakai

Kita bahas yang paling sering dipakai dulu, yang benar-benar kepakai saat membuat website.

1) <header>

Biasanya berisi logo, judul website, atau judul halaman.

<header>
  <h1>Wimz Computer</h1>
  <p>Tutorial IT dan Pemrograman</p>
</header>

2) <nav>

Untuk menu navigasi.

<nav>
  <a href="#">Home</a> |
  <a href="#">HTML</a> |
  <a href="#">CSS</a> |
  <a href="#">Python</a>
</nav>

3) <main>

Menandai konten utama. Umumnya hanya 1 dalam 1 halaman.

<main>
  <h2>Konten Utama</h2>
  <p>Ini adalah bagian utama halaman.</p>
</main>

4) <section>

Digunakan untuk membagi konten berdasarkan bagian.

<section>
  <h2>Tutorial Terbaru</h2>
  <p>Daftar tutorial terbaru akan tampil di sini.</p>
</section>

5) <article>

Untuk konten yang berdiri sendiri (artikel blog).

<article>
  <h3>Mengenal Semantic HTML</h3>
  <p>Semantic HTML membuat struktur halaman lebih rapi.</p>
</article>

6) <aside>

Untuk sidebar/konten sampingan.

<aside>
  <h3>Artikel Populer</h3>
  <ul>
    <li><a href="#">Belajar HTML Dasar</a></li>
    <li><a href="#">Membuat Tabel HTML</a></li>
  </ul>
</aside>

7) <footer>

Bagian bawah halaman.

<footer>
  <p>&copy; 2026 WimzComputer.com</p>
</footer>

Sekarang kita gabungkan semuanya.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Belajar Semantic HTML</title>
</head>
<body>

  <header>
    <h1>Wimz Computer</h1>
    <p>Tutorial IT dan Pemrograman</p>
  </header>

  <nav>
    <a href="#">Home</a> |
    <a href="#">Tutorial</a> |
    <a href="#">Artikel</a> |
    <a href="#">Kontak</a>
  </nav>

  <main>

    <section>
      <h2>Artikel Terbaru</h2>

      <article>
        <h3>Mengenal HTML5 Semantic Elements</h3>
        <p>Semantic elements membuat struktur halaman lebih rapi dan SEO friendly.</p>
      </article>

      <article>
        <h3>Tutorial HTML Form</h3>
        <p>Belajar membuat form input sederhana di HTML.</p>
      </article>

    </section>

    <aside>
      <h3>Artikel Populer</h3>
      <ul>
        <li><a href="#">Belajar HTML Dasar</a></li>
        <li><a href="#">Cara Membuat Tabel</a></li>
        <li><a href="#">Cara Menampilkan Gambar</a></li>
      </ul>
    </aside>

  </main>

  <footer>
    <p>&copy; 2026 WimzComputer.com</p>
  </footer>

</body>
</html>

Sudah mulai paham??

Semantic vs Div (Biar Tidak Salah Paham)

Kalau dulu kita sering membuat seperti ini:

<div class="header">...</div>
<div class="nav">...</div>
<div class="content">...</div>
<div class="footer">...</div>

Sebenarnya boleh saja. Tapi dengan semantic HTML akan jadi seperti ini:

<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>

Lebih jelas dan lebih standar.

HTML semantic ini kelihatannya sederhana, tapi efeknya besar. Kalau dari awal Anda sudah terbiasa membuat struktur yang rapi, maka saat masuk ke CSS, layouting, bahkan framework, proses belajar akan jauh lebih mudah.

Kunjungi terus website kami di sini untuk artikel kami yang lain. Semoga bermanfaat. 🙂