Ganti Tag <div> Ke Tag Semantik Untuk Meningkatkan SEO Web

Coba bayangkan jika kamu membuat proyek besar, namun penulisan kodenya seperti gambar berikut:

Terlihat rumit dan penuh banget, kan?🤯

Yaps, penulisan kode HTML seperti gambar di atas akan terkesan rumit dan susah dibaca, apalagi jika proyek website kamu semakin kompleks.👾

Penulisan kode tag <div> yang berlebihan seperti gambar di atas dalam dunia SEO (Search Engine Optimization), akan menyebabkan peluang website kamu di halaman pertama Google berkurang. Hal ini disebabkan karena penulisan kode seperti itu nggak akan memberi informasi semantik tambahan terhadap konten website kamu.

Nah! Solusi dari permasalahan tersebut, kamu perlu mengganti tag <div> ke tag semantik lainnya untuk membantu meningkatkan SEO website kamu.😇☝🏻

Kenapa Harus Ganti Tag <div> ke Tag Semantik?🧐

Selain membantu meningkatkan SEO website agar mudah tampil di halaman pertama Google, terdapat beberapa keuntungan lain jika kamu menggatu tag <div> ke tag semantik, antara lain:

1. Lebih Mudah Dalam Pemeliharaan Kode

Kalau kamu selalu menggunajan tag <div> untuk menggabungkan semua elemen, nantinya kode kamu akan lebih susah dipahami dan dikelola. Hal ini akan berimbas saat memperbaiki atau memperbarui elemen tertentu.

Dengan mengganti ke tag semantik, kamu nggak perlu takut atau kesusahan saat merawat proyek websitemu.

Apalagi kalau website kamu semakin berkembang, dalam penulisan kode CSS, JavaScript, dan bahasa lainnya juga akan lebih mudah kalau pakai tag semantik.

2. Mengurangi Ukuran DOM HTML

Penggunaan tag <div> yang berlebihan akan meningkatkan ukuran DOM HTML. Dengan mengganti tag <div> akan ukuran DOM HTML akan berkurang, sehingga website kamu akan lebih cepat dalam proses load dan mengurangi penggunaan memori.

Lalu, tag semantik apa saja yang bisa digunakan untuk mengganti tag <div>?

Tag Semantik yang Bisa Gantiin Tag <div>

Berikut ini beberapa tag semantik yang bisa kamu pakai untuk mengganti tag <div> agar penulisan kode jauh lebih efisien dan ramah terhadap SEO, antara lain:

1. <header>

Tag <header> dapat kamu gunakan untuk mempermudah dalam pemberian konteks dengan jelas untuk bagian atas halaman. Daripada menggunakan tag <div class=”header”>,kamu bisa langsung ganti pakai <header>. Penulisan tersebut nggak hanya simpel, tapi lebih mudah dipahami oleh search engine.

Contoh Sebelum:

<div class="header">
  <h1>Web</h1>
</div>

Contoh Sesudah

<header>
  <h1>Web</h1>
</header>

2. `<main>` dan `<aside>`

Saat menuliskan kode untuk bagian utama halaman web, alih-alih menggunakan <div class=”main-content”>, kamu bisa menuliskan tag <main>. Dengan menuliskan tag <main> akan mempermudah dikenali oleh search engine sebagai bagian inti sebuah halaman web. Tag ini bantu ngasih tanda untuk lebih memperhatikan bagian halaman tersebut.

Selain itu, daripada pakai <div class=”sidebar”> untuk mendeskripsikan bagian tambahan halaman, kamu bisa ganti ke tag <aside> yang lebih simpel.

Contoh Sebelum:

<div class="main-content">
  <h2>Layanan</h2>
</div>

<div class="sidebar">
  <h3>Artikel Terbaru</h3>
  <ul>
    <li><a href="#">Artikel 1</a></li>
  </ul>
</div>

Contoh Sesudah:

<main>
  <h2>Layanan</h2>
</main>

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

3. `<section>`

Dengan mengganti ke tag <section>, kamu dapat dengan mudah memisahkan bagian konten lebih terstruktur dan rapi. Penggunaan tag semantik ini bikin penataan konten lebih cepat tanpa harus menuliskan class <div> untuk setiap bagiannya.

Contoh Sebelum:

<div class="service">
  <h2>Layanan Utama</h2>
  <p>...</p>
</div>

Contoh Sesudah:

<section>
  <h2>Layanan Utama</h2>
  <p>...</p>
</section>

4. `<nav>`

Penggunaan tag <nav> dapat mempermudah kamu saat kamu ingin menambahkan elemen navigasi dengan tautan ke halaman lain pada website, daripada menuliskan <div class=”navigation”>. Dengan mengganti tag <div> ke tag <nav>, search engine akan mudah dalam mengidentifikasi navigasi website kamu.

Contoh Sebelum:

<div class="navigation">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

Contoh Sesudah:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

5. `<blockquote>`

Kamu juga bisa menampilkan kutipan dengan mudah tanpa harus menuliskan kode <div class=”quote”>, yakni cukup pakai tag <blockquote>. Dengan menggunakan tag tersebut, kode kamu akan jauh lebih sistematis.

Contoh Sebelum:

<div class="quote">
  <p>“Kutipan … ”</p>
</div>

Contoh Sesudah:

<blockquote>
  “Kutipan … ”
</blockquote>

6. `<time>`

Dalam menuliskan informasi tanggal, waktu maupun durasi, kamu juga bisa dengan mudah menuliskan tag <time>. So, kamu nggak perlu repot-repot pakai tag <div> dan menuliskan class-nya. Jangan lupa, tulis atribut datetime saat menggunakan tag <time> untuk menambah detail tentang waktu atau tanggal yang kamu tulis.

Contoh Sebelum:

<div class="event">
  <p>Tanggal: 04 Agustus 2025</p>
</div>

Contoh Sesudah:

<time datetime="2025-08-04">04 Agustus 2025</time>

6. `<footer>`

Untuk menandai bagian akhir halaman, kamu hanya perlu menuliskan tag <footer> agar lebih semantik. Seperti penggunaan tag semantik lain, penggunaan tag <footer> juga mempermudah search engine dalam mengenali bagian akhir atau bagian penting pada halaman website.

Contoh Sebelum:

<div class="footer">
  <p>© 2025 Website Saya</p>
</div>

Contoh Sesudah:

<footer>
  <p>© 2025 Website Saya</p>
</footer>

Gimana? Lebih mudah dan simpel pakai tag semantik di atas, bukan?

Menurut kamu dengan mengganti tag <div> ke tag semantik di atas pilihan tepat atau nggak?

Jangan ragu untuk terus menggali pengetahuan lebih dalam tentang HTML, agar proyek kamu jadi lebih efisien dan terstruktur. Untuk mempelajari lebih lanjut, kamu bisa belajar HTML dari NOL secara mendalam di Sekolah Koding.

Dapatkan akses ke kursus secara lengkap tentang HTML dan materi lainnya di platform Sekolah Koding.

Yuk tingkatkan kemampuan coding kamu mulai sekarang 👩🏼‍💻✔️🚀