Semantic HTML: Jangan Semua Dibungkus <div>

Apa Masalahnya dengan <div>?#

Sebenarnya tidak ada yang salah dengan <div>.

Serius.

Kita tidak sedang memusuhi <div>.

Elemen ini sangat berguna sebagai container atau pembungkus ketika kita memang membutuhkan sebuah elemen yang tidak membawa makna khusus.

Contohnya:

1
<div>
2
  <h2>Artikel Terbaru</h2>
3
  <p>Belajar HTML dari nol.</p>
4
</div>

Masalahnya muncul kalau semua bagian halaman kita bungkus dengan <div> tanpa memikirkan arti bagian tersebut.

Bayangkan halaman sederhana seperti ini:

1
BapakGabut
2

3
Beranda | Programming | Game
4

5
--------------------------------
6

7
Belajar HTML
8

9
Isi artikel...
10

11
--------------------------------
12

13
Artikel lainnya...
14

15
--------------------------------
16

17
© 2026 BapakGabut

Kita bisa membuat strukturnya seperti:

1
<div>
2
  <div>BapakGabut</div>
3

4
  <div>
5
    Beranda | Programming | Game
6
  </div>
7

8
  <div>
9
    <div>Belajar HTML</div>
10
    <div>Isi artikel...</div>
11
  </div>
12

13
  <div>
14
    Artikel lainnya...
15
  </div>
16

17
  <div>
18
    © 2026 BapakGabut
19
  </div>
20
</div>

Browser masih bisa menampilkannya.

Tapi kalau kita hanya membaca HTML-nya, banyak <div> tersebut tidak menjelaskan perannya.

Kita tahu sebuah bagian adalah navigasi karena melihat isinya.

Kita tahu bagian lain adalah artikel karena membaca teksnya.

HTML-nya sendiri tidak banyak membantu menjelaskan struktur tersebut.

Di sinilah elemen semantik mulai berguna.

Semantic HTML Itu Apa?#

Kata semantic berkaitan dengan makna.

Jadi secara sederhana, Semantic HTML berarti menggunakan elemen HTML yang membantu menjelaskan makna atau peran sebuah bagian konten.

Daripada menulis:

1
<div>
2
  Beranda | Programming | Game
3
</div>

kita punya elemen:

1
<nav>
2
  Beranda | Programming | Game
3
</nav>

Sekarang bahkan sebelum membaca isinya, kita sudah mendapatkan petunjuk:

Oh, bagian ini adalah navigasi.

Daripada:

1
<div>
2
  © 2026 BapakGabut
3
</div>

kita bisa menggunakan:

1
<footer>
2
  © 2026 BapakGabut
3
</footer>

HTML kita bukan hanya menjadi kumpulan kotak.

Strukturnya mulai mempunyai arti.

Kenapa Makna Itu Penting?#

Mungkin Gabuters berpikir:

Tapi kalau tampilannya sama, memangnya kenapa?

Pertanyaan yang masuk akal.

Semantic HTML bukan terutama soal membuat halaman terlihat berbeda.

Misalnya:

1
<div>Menu</div>

dan:

1
<nav>Menu</nav>

bisa saja secara visual terlihat sama.

Perbedaannya ada pada makna struktur.

Menggunakan elemen yang sesuai dapat membantu:

• developer memahami struktur kode;
• browser dan teknologi lain memahami bagian halaman;
• teknologi bantu seperti screen reader menavigasi konten;
• mesin pencari memahami struktur konten dengan lebih baik.

Tapi jangan salah kaprah.

Mengganti semua <div> menjadi elemen semantik bukan tombol rahasia yang otomatis membuat SEO kita sempurna. 😄

Tujuan utamanya adalah membuat struktur HTML lebih bermakna dan sesuai dengan fungsi kontennya.

header: Bagian Pembuka#

Kita mulai dari:

1
<header>

header digunakan untuk bagian pengantar atau pembuka dari sebuah halaman atau bagian konten.

Misalnya:

1
<header>
2
  <h1>BapakGabut</h1>
3
  <p>Ngoding, main game, dan ngulik apa saja.</p>
4
</header>

Dalam sebuah halaman, header sering berisi hal seperti:

• judul;
• logo;
• informasi pengantar;
• navigasi.

Tapi jangan menganggap <header> hanya boleh muncul satu kali di seluruh halaman.

Sebuah <article> misalnya juga bisa memiliki header-nya sendiri.

Contoh:

1
<article>
2
  <header>
3
    <h2>Belajar Semantic HTML</h2>
4
    <p>Ditulis oleh BapakGabut</p>
5
  </header>
6

7
  <p>Isi artikel...</p>
8
</article>

Jadi maknanya tergantung konteks elemen tempat ia berada.

nav: Untuk Navigasi#

Kalau halaman kita memiliki sekumpulan link navigasi utama:

1
<a href="/">Beranda</a>
2
<a href="/programming/">Programming</a>
3
<a href="/game/">Game</a>

kita bisa membungkusnya dengan:

1
<nav>
2
  <a href="/">Beranda</a>
3
  <a href="/programming/">Programming</a>
4
  <a href="/game/">Game</a>
5
</nav>

nav memberi tahu bahwa kumpulan link tersebut digunakan untuk navigasi.

Tapi bukan berarti setiap link harus dimasukkan ke <nav>.

Misalnya sebuah paragraf:

1
<p>
2
  Baca juga artikel
3
  <a href="/belajar-html/">belajar HTML</a>.
4
</p>

Link tersebut tidak otomatis membutuhkan <nav>.

Gunakan <nav> untuk bagian yang memang berfungsi sebagai blok navigasi.

main: Isi Utama Halaman#

Setiap halaman biasanya memiliki sesuatu yang menjadi fokus utamanya.

Misalnya pada halaman artikel BapakGabut, bagian utama tentu adalah artikel yang sedang dibaca.

Kita bisa menggunakan:

1
<main>
2
  <h1>Belajar Semantic HTML</h1>
3
  <p>Isi utama halaman...</p>
4
</main>

main menandai konten utama dari halaman.

Header situs, navigasi global, sidebar berulang, dan footer biasanya bukan bagian dari konten utama tersebut.

Sebagai kebiasaan untuk halaman biasa, kita umumnya memiliki satu <main> yang merepresentasikan konten utama halaman.

article: Konten yang Bisa Berdiri Sendiri#

Sekarang kita punya:

1
<article>

Nama elemennya cukup membantu.

Elemen ini cocok untuk konten yang relatif dapat berdiri sendiri.

Misalnya:

• artikel blog;
• berita;
• posting forum;
• komentar pengguna;
• entri konten yang independen.

Contohnya:

1
<article>
2
  <h2>Belajar HTML dari Nol</h2>
3

4
  <p>
5
    Hari ini kita belajar tentang Semantic HTML.
6
  </p>
7
</article>

Kalau halaman menampilkan beberapa artikel:

1
<main>
2
  <article>
3
    <h2>Belajar HTML</h2>
4
    <p>...</p>
5
  </article>
6

7
  <article>
8
    <h2>Belajar CSS</h2>
9
    <p>...</p>
10
  </article>
11
</main>

Masing-masing <article> memiliki konten yang bisa dipahami sebagai unit tersendiri.

section: Membagi Konten Berdasarkan Topik#

Lalu ada:

1
<section>

Elemen ini digunakan untuk mengelompokkan bagian konten yang memiliki tema atau topik tertentu.

Misalnya sebuah artikel:

1
<article>
2
  <h1>Cara Belajar HTML</h1>
3

4
  <section>
5
    <h2>Persiapan</h2>
6
    <p>...</p>
7
  </section>
8

9
  <section>
10
    <h2>Mulai Menulis HTML</h2>
11
    <p>...</p>
12
  </section>
13
</article>

Di sini masing-masing section punya topik yang jelas.

Sebagai kebiasaan yang baik, sebuah <section> biasanya memiliki heading yang menjelaskan bagian tersebut.

Tapi jangan menggunakan <section> hanya karena kita membutuhkan pembungkus untuk styling.

Kalau tidak ada makna atau pengelompokan topik yang jelas dan kita hanya butuh container biasa, <div> mungkin justru lebih tepat.

Nah, ternyata <div> belum pensiun. 😄

article atau section?#

Ini salah satu pertanyaan yang cukup sering muncul:

Pakai <article> atau <section>?

Cara sederhana untuk mulai membedakannya:

article

Cocok ketika kontennya merupakan unit yang relatif bisa berdiri sendiri.

section

Cocok ketika kita sedang membagi sebuah konten menjadi bagian berdasarkan topik.

Misalnya:

1
<article>
2
  <h1>Panduan Belajar HTML</h1>
3

4
  <section>
5
    <h2>Tag HTML</h2>
6
    <p>...</p>
7
  </section>
8

9
  <section>
10
    <h2>Form HTML</h2>
11
    <p>...</p>
12
  </section>
13
</article>

Seluruhnya adalah satu artikel.

Di dalam artikel tersebut ada beberapa section.

Tidak perlu terlalu stres mencari jawaban sempurna untuk setiap kasus.

Yang penting kita mulai bertanya:

Bagian ini sebenarnya punya peran apa?

Pertanyaan itu jauh lebih berguna daripada:

Enaknya pakai tag apa biar kelihatan keren? 😄

aside: Konten Tambahan#

Kadang kita punya informasi yang masih berhubungan dengan konten utama, tetapi bukan bagian inti.

Misalnya:

1
<aside>
2
  <h2>Baca Juga</h2>
3
  <a href="/html-form/">Membuat Form dengan HTML</a>
4
</aside>

aside cocok untuk konten tambahan atau tangensial seperti:

• sidebar;
• informasi tambahan;
• rekomendasi terkait;
• catatan yang bukan bagian utama konten.

Tapi sekali lagi, jangan memilih elemen hanya berdasarkan posisi visual.

Sesuatu yang berada di sebelah kanan layar tidak otomatis harus menjadi <aside>.

Yang kita lihat adalah maknanya, bukan sekadar posisinya.

footer: Bagian Penutup#

Terakhir ada:

1
<footer>

Pada level halaman, footer sering berisi:

• copyright;
• informasi penulis atau pemilik situs;
• link tambahan;
• informasi penutup.

Contohnya:

1
<footer>
2
  <p>© 2026 BapakGabut</p>
3
</footer>

Sama seperti <header>, <footer> juga tidak selalu hanya muncul satu kali.

Sebuah artikel bisa memiliki footer sendiri.

1
<article>
2
  <h2>Belajar HTML</h2>
3

4
  <p>Isi artikel...</p>
5

6
  <footer>
7
    <p>Ditulis oleh BapakGabut</p>
8
  </footer>
9
</article>

Jadi jangan menghafalkan:

1
header = paling atas layar
2
footer = paling bawah layar

Lebih tepat pikirkan:

1
header
2
↓
3
bagian pembuka dari konteksnya
4

5
footer
6
↓
7
bagian penutup dari konteksnya

Dari Tumpukan <div> Menjadi Struktur yang Bermakna#

Sekarang mari kembali ke halaman kita tadi.

Awalnya:

1
<div>
2
  <div>BapakGabut</div>
3

4
  <div>
5
    Beranda | Programming | Game
6
  </div>
7

8
  <div>
9
    <div>Belajar HTML</div>
10
    <div>Isi artikel...</div>
11
  </div>
12

13
  <div>
14
    Artikel lainnya...
15
  </div>
16

17
  <div>
18
    © 2026 BapakGabut
19
  </div>
20
</div>

Sekarang kita bisa membuat struktur yang lebih bermakna:

1
<header>
2
  <h1>BapakGabut</h1>
3

4
  <nav>
5
    <a href="/">Beranda</a>
6
    <a href="/programming/">Programming</a>
7
    <a href="/game/">Game</a>
8
  </nav>
9
</header>
10

11
<main>
12
  <article>
13
    <h2>Belajar HTML</h2>
14

15
    <section>
16
      <h3>Tag HTML</h3>
17
      <p>Isi pembahasan...</p>
18
    </section>
19

20
    <section>
21
      <h3>Form HTML</h3>
22
      <p>Isi pembahasan...</p>
23
    </section>
24
  </article>
25

26
  <aside>
27
    <h2>Artikel Lainnya</h2>
28
    <p>Rekomendasi artikel...</p>
29
  </aside>
30
</main>
31

32
<footer>
33
  <p>© 2026 BapakGabut</p>
34
</footer>

Sekarang coba baca hanya nama elemennya:

1
header
2
│
3
└── nav
4

5
main
6
│
7
├── article
8
│   ├── section
9
│   └── section
10
│
11
└── aside
12

13
footer

Tanpa membaca seluruh isi teksnya pun kita sudah mendapatkan gambaran tentang struktur halaman.

Itulah salah satu kekuatan Semantic HTML.

Jadi, Apakah <div> Harus Dihindari?#

Tidak.

Justru ini penting.

Setelah belajar Semantic HTML, jangan sampai kita berubah dari:

Semua pakai <div>.

menjadi:

<div> haram. Semua harus semantic element!

😄

<div> tetap berguna.

Misalnya kita membutuhkan wrapper untuk keperluan layout atau styling:

1
<div class="card-wrapper">
2
  ...
3
</div>

Kalau wrapper tersebut memang tidak mempunyai makna khusus dalam struktur konten, <div> adalah pilihan yang wajar.

Jadi bukan soal:

1
semantic element = bagus
2
div = jelek

Lebih tepat:

1
Apakah bagian ini punya makna/peran yang sesuai
2
dengan semantic element tertentu?
3

4
        │
5
   ┌────┴────┐
6
   │         │
7
  Ya       Tidak
8
   │         │
9
   ▼         ▼
10
gunakan     <div>
11
elemen
12
yang sesuai

Tidak perlu memaksakan semantic element kalau memang tidak cocok.

Coba Baca Struktur Halaman BapakGabut#

Sekarang coba lihat halaman yang sedang Gabuters baca.

Tanpa perlu mengetahui kode asli BapakGabut, kita bisa membayangkan sebuah halaman artikel memiliki struktur kurang lebih:

1
header
2
│
3
├── identitas situs
4
└── nav
5

6
main
7
│
8
└── article
9
    │
10
    ├── judul
11
    ├── isi artikel
12
    └── beberapa section
13

14
aside
15
│
16
└── informasi tambahan
17

18
footer
19
│
20
└── informasi situs

Implementasi situs nyata tentu bisa berbeda dan lebih kompleks.

Tapi sekarang ketika melihat sebuah halaman web, coba jangan hanya melihat:

Ini teks.

Ini gambar.

Ini menu.

Mulailah bertanya:

Bagian ini berperan sebagai apa dalam struktur halaman?

Itulah cara berpikir yang ingin kita bangun lewat Semantic HTML.

Apa yang Sudah Kita Pelajari?#

Kita sekarang mengenal beberapa elemen semantik:

1
<header>
2
↓
3
bagian pembuka
4

5
<nav>
6
↓
7
blok navigasi
8

9
<main>
10
↓
11
konten utama halaman
12

13
<article>
14
↓
15
konten yang relatif dapat berdiri sendiri
16

17
<section>
18
↓
19
bagian konten berdasarkan topik
20

21
<aside>
22
↓
23
konten tambahan/tangensial
24

25
<footer>
26
↓
27
bagian penutup

Dan yang paling penting:

Semantic HTML bukan soal mengganti semua <div> dengan tag yang namanya lebih keren.

Tujuannya adalah membuat struktur HTML lebih bermakna.

Kadang elemen semantik adalah pilihan yang tepat.

Kadang <div> memang yang kita butuhkan.

Yang berubah sekarang adalah kita sudah mulai memikirkan arti dari struktur yang kita buat.

Selanjutnya: Kita Gabungkan Semuanya#

Sampai sini kita sudah belajar cukup banyak.

Kita sudah membuat halaman HTML pertama.

Kita mengenal tag, elemen, dan atribut.

Kita membuat form.

Sekarang kita juga sudah memahami bagaimana menyusun halaman dengan elemen yang lebih bermakna.

Daripada menambah teori baru terus-menerus, di artikel berikutnya kita akan menggabungkan semuanya menjadi sebuah mini project HTML.

Kita akan membuat halaman profil sederhana dari nol.

Belum cantik.

Belum ada animasi.

Belum ada tombol yang terbang ketika disentuh. 😄

Tapi strukturnya akan benar-benar kita buat sendiri menggunakan apa yang sudah dipelajari sepanjang series ini.