Div, Span, ID & Class

Setelah lesson ini, kamu dapat memakai div dan span untuk kebutuhan generik, sambil menjaga id unik dan class yang dapat dipakai ulang.

MULAI DARI SEBUAH PERTANYAAN

Pemahaman berawal dari pertanyaan.

Setelah mengenal banyak elemen semantik, apakah div menjadi terlarang? Tidak. Kadang sebuah pembungkus memang tidak membutuhkan makna tambahan.

Memakai div dan span untuk kebutuhan generik, sambil menjaga id unik dan class yang dapat dipakai ulang.

PAHAMI KONSEPNYA

Generik tetap berguna

Div adalah pembungkus generik untuk kelompok konten. Span adalah penanda generik pada bagian teks atau konten frasa. Keduanya tidak otomatis menyatakan “navigasi”, “penting”, atau “artikel”. Pilih elemen khusus jika makna tersebut memang ada.

Id dan class tidak mengganti semantik

<div class="nav"> tidak memiliki makna elemen nav hanya karena namanya nav. Class dan id adalah label yang dapat digunakan CSS, JavaScript, dan fragment. Nama yang deskriptif membantu orang membaca kode, tetapi elemen tetap menentukan semantik dasarnya.

Periksa kebutuhan sebelum membungkus

Untuk menandai label kategori dalam kalimat, span class="kategori" cukup. Untuk menandai bagian yang penting, strong lebih tepat. Gunakan id hanya ketika membutuhkan identitas unik; gunakan class untuk kelompok yang berulang.

CONTOH / KONTEKS

Contoh memperjelas konsep.

CONTOH HTML

<div class="kelompok-buku">
  <p id="buku-langit">Atlas Langit <span class="kategori">Sains</span></p>
  <p id="buku-kebun">Kebun Kota <span class="kategori">Lingkungan</span></p>
</div>

HASIL DI BROWSER

Div mengelompokkan item, span menandai teks kategori, id berbeda untuk setiap item, dan class kategori dipakai ulang.

KESALAHAN YANG SERING TERJADI

<p id="buku">Atlas Langit</p>
<p id="buku">Kebun Kota</p>

Id tidak boleh dipakai dua elemen dalam dokumen yang sama. Buat id berbeda, atau gunakan class jika maksudnya mengelompokkan.

COBA BERSAMA

Praktik memperjelas pemahaman.

Pilih elemen generik untuk sebagian teks dalam paragraf.

<p>Topik: < class="kategori">Sains</span></p>

Lihat petunjuk

Span menandai bagian teks di dalam kalimat.

Boleh mencoba berkali-kali. Tugas mandiri berikutnya menjadi bukti penyelesaian lesson.

TULIS · LIHAT · PAHAMI

Rapikan dua kartu bacaan

Pertahankan div class="koleksi". Beri dua paragraf id berbeda: buku-langit dan buku-kebun. Bungkus kategori Sains dan Lingkungan masing-masing dengan span class="kategori".

<div class="koleksi">
  <p id="buku">Atlas Langit — Sains</p>
  <p id="buku">Kebun Kota — Lingkungan</p>
</div>

index.htmlHTMLLn 1, Col 14 baris2 spasi

Pintasan & bantuan editor

Ctrl + Space: Tampilkan saran · ↑ ↓ memilih · Enter menerima · Esc menutup
Shift + Alt + F: Rapikan kode
Ctrl/⌘ + F: Cari dan ganti teks
Ctrl/⌘ + [ / ]: Kurangi / tambah indentasi
Tab: Pindah fokus; dalam snippet, pindah ke isian berikutnya. Esc lalu Tab untuk keluar.
Ctrl/⌘ + Z: Batalkan perubahan, termasuk format

Saran berasal dari bahasa, snippet, dan konteks lokal kode. Format berjalan di browser.

Preview dokumen

Ctrl/⌘ + Enter menjalankan preview. Preview memakai gaya bantu baca. Script dan pengiriman form dinonaktifkan. Ilustrasi contoh: assets/observatory.svg.

BAWA PEMAHAMAN INI BERSAMAMU

Praktik memberi dasar.

Div dan span tidak memiliki makna khusus.
Nama class tidak menggantikan elemen semantik.
Gunakan id unik, class berulang bila diperlukan.

AtributStruktur semantik

Lesson tuntas setelah tugas mandiri memenuhi tujuan. Kamu bebas membaca kembali kapan saja.

Hubungkan dengan konsep lain

HTML attribute °Semantic HTML °HTML element °

Library: Tiga bahasa di balik satu halaman ↗

Ke lesson berikutnya →