Frontend Academy · Pelajaran

HTML5 Semantik: Semantik vs Sup Div

Ganti div pembungkus yang tidak bermakna dengan elemen semantik dan pahami algoritme kerangka dokumen serta hierarki judul.

Pelajaran 3 dari 413 langkah

HTML5 Semantik: Semantik vs Sup Div adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Sup Div — Masalahnya

Sup div adalah halaman yang seluruhnya dibangun dari elemen <div> dan <span>. Halaman ini memerlukan nama kelas untuk menyampaikan struktur, tidak dapat dipahami oleh pembaca layar tanpa kelas tersebut, dan tidak menyampaikan makna apa pun kepada mesin telusur.

<!-- Div soup (avoid) -->
<div class="container">
  <div class="header">
    <div class="logo">...</div>
    <div class="nav">...</div>
  </div>
  <div class="content">...</div>
  <div class="footer">...</div>
</div>

Alternatif Semantik

Ganti div tanpa makna dengan elemen semantik yang menyampaikan tujuan. Struktur tersebut kini menjelaskan dirinya sendiri dan dapat dipahami tanpa CSS apa pun.

<!-- Semantic HTML (preferred) -->
<body>
  <header>
    <a href="/"><img src="logo.svg" alt="Brand"></a>
    <nav>...</nav>
  </header>
  <main>...</main>
  <footer>...</footer>
</body>

Algoritme Kerangka Dokumen

Elemen judul (h1-h6) membentuk kerangka dokumen. Pengguna pembaca layar menavigasi berdasarkan judul. Teknologi bantu mengumumkan tingkat kerangka. Pertahankan hierarki yang logis: h1 untuk judul halaman, h2 untuk bagian utama, dan h3 untuk subbagian.

<time> — Tanggal yang Dapat Dibaca Mesin

Elemen <time> menandai tanggal dan waktu dengan atribut datetime yang dapat dibaca mesin. Mesin telusur memahami tanggal acara, dan pembaca layar dapat mengumumkan tanggal yang telah diformat.

<p>Published on <time datetime="2025-06-15">June 15, 2025</time></p>
<time datetime="2025-06-15T14:30">2:30 PM</time>

<address>

Elemen <address> membungkus informasi kontak untuk artikel terdekat atau dokumen. Isinya tidak harus berupa alamat pos — surel, telepon, dan nama pengguna media sosial juga termasuk.

<address>
  <a href="mailto:hello@coddy.app">hello@coddy.app</a><br>
  <a href="https://twitter.com/coddykit">@coddykit</a>
</address>

<figure> dan <figcaption>

<figure> membungkus konten mandiri seperti gambar, bagan, contoh kode, atau video. <figcaption> menyediakan keterangan yang terhubung secara semantik dengan figure.

<figure>
  <img src="chart.png" alt="Monthly active users 2025">
  <figcaption>Figure 1: Monthly active users increased 42% in Q4 2025.</figcaption>
</figure>

<blockquote> dan <cite>

<blockquote> menandai kutipan panjang. Gunakan atribut cite untuk URL sumber. Elemen <cite> menandai judul suatu karya kreatif (buku, artikel, film).

<blockquote cite="https://developer.mozilla.org">
  <p>HTML is the standard markup language for creating web pages.</p>
  <footer>—<cite>MDN Web Docs</cite></footer>
</blockquote>

<details> dan <summary>

Pasangan <details> + <summary> membuat widget akordeon/pengungkapan bawaan tanpa JavaScript. Peramban menangani buka/tutup, interaksi papan ketik, dan aksesibilitas secara otomatis.

<details>
  <summary>What is the refund policy?</summary>
  <p>We offer a 30-day money-back guarantee on all plans.</p>
</details>

<mark> — Teks yang Disorot

<mark> mewakili teks yang disorot sebagai rujukan — seperti kecocokan hasil pencarian. Secara semantik, elemen ini berbeda dari memberi warna kuning pada teks dengan CSS.

<p>Search results for <q>flexbox</q>:</p>
<p>Use <mark>flexbox</mark> for one-dimensional layouts...</p>

<abbr> — Singkatan

Bungkus singkatan dan akronim dengan <abbr>, lalu berikan istilah lengkap dalam atribut title. Pembaca layar dan peramban menampilkan kepanjangan tersebut kepada pengguna saat kursor diarahkan ke teks.

<abbr title="Cascading Style Sheets">CSS</abbr>
<abbr title="Accessible Rich Internet Applications">ARIA</abbr>

Kapan Menggunakan <div> dan <span>

Keduanya masih berguna. <div> adalah pilihan yang tepat untuk pembungkus blok umum yang tidak memiliki makna semantik — wadah tata letak dan akar komponen dalam React. Gunakan <span> untuk pengait gaya sebaris yang tidak memiliki makna semantik.

Pemeriksaan Singkat

Elemen HTML mana yang membuat widget pengungkapan yang dapat diciutkan secara bawaan tanpa memerlukan JavaScript?

Jawab di pelajaran interaktif

Ringkasan: HTML5 Semantik

Ganti sup div dengan elemen semantik: header, nav, main, article, section, aside, dan footer. Gunakan time untuk tanggal, figure/figcaption untuk media, details/summary untuk akordeon, serta mark untuk sorotan. Sisakan div dan span untuk wadah tata letak yang tidak memiliki makna semantik.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 41
Pelajaran: 163

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “HTML5 Semantik: Semantik vs Sup Div” gratis?

Ya — teks lengkap “HTML5 Semantik: Semantik vs Sup Div” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “HTML5 Semantik: Semantik vs Sup Div”?

Ganti div pembungkus yang tidak bermakna dengan elemen semantik dan pahami algoritme kerangka dokumen serta hierarki judul. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “HTML5 Semantik: Semantik vs Sup Div” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Kontrol Formulir: tipe input, select, textarea
ARIA dan Aksesibilitas: label, role, aria-*
HTML5 Semantik: Semantik vs Sup Div
Atribut Validasi Formulir

← Kembali ke Frontend Academy