Understanding Attributes

Setelah lesson ini, kamu dapat menambahkan atribut id, class, dan title pada tag pembuka dengan nilai yang tepat.

MULAI DARI SEBUAH PERTANYAAN

Pemahaman berawal dari pertanyaan.

Dua kotak bisa sama-sama bernama “kotak”, tetapi punya label berbeda. Atribut memberi informasi tambahan pada elemen tanpa mengganti jenis elemennya.

Menambahkan atribut id, class, dan title pada tag pembuka dengan nilai yang tepat.

PAHAMI KONSEPNYA

Nama, tanda sama dengan, nilai

Dalam <p id="ringkasan">...</p>, id adalah nama atribut dan ringkasan adalah nilainya. Atribut berada pada tag pembuka, dipisahkan spasi. Biasakan membungkus nilai dalam tanda kutip, terutama jika nilainya mengandung spasi.

Identitas dan kelompok

Id mengidentifikasi satu elemen secara unik dalam dokumen. Class memberi nama kelompok dan boleh dipakai banyak elemen; satu elemen juga boleh punya beberapa class yang dipisahkan spasi. Keduanya tidak otomatis memberi gaya visual.

Title hanya informasi tambahan

Atribut title dapat memberi keterangan tambahan yang sering muncul saat mouse berhenti di elemen. Jangan jadikan title satu-satunya sumber informasi penting: pengguna sentuh dan keyboard mungkin tidak menemukannya. Atribut title berbeda dari elemen <title> dalam head.

CONTOH / KONTEKS

Contoh memperjelas konsep.

CONTOH HTML

<h2 id="koleksi">Koleksi Pilihan</h2>
<p class="catatan" title="Pilihan bacaan minggu ini">Buku tentang taman kota.</p>
<p class="catatan">Buku tentang langit malam.</p>

HASIL DI BROWSER

Koleksi adalah identitas unik heading. Dua paragraf berbagi class catatan. Semua informasi penting tetap ada sebagai teks.

KESALAHAN YANG SERING TERJADI

<p>Catatan harian</p id="catatan">

Atribut tidak ditaruh pada tag penutup. Pindahkan id ke pembuka: <p id="catatan">.

COBA BERSAMA

Praktik memperjelas pemahaman.

Beri paragraf ini class catatan.

<p ="catatan">Bawa buku favoritmu.</p>

Lihat petunjuk

Yang diminta adalah kelompok, bukan identitas unik.

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

TULIS · LIHAT · PAHAMI

Labeli papan pengumuman

Beri h2 id="pengumuman". Beri kedua paragraf class="catatan". Tambahkan title="Bawa botol minum" pada paragraf pertama; informasi ini juga harus tetap tertulis di paragraf.

<h2>Pengumuman Kebun</h2>
<p>Bawa botol minum saat berkebun.</p>
<p>Kita bertemu pagi hari.</p>

index.htmlHTMLLn 1, Col 13 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.

Atribut ditulis pada pembuka.
Id unik per dokumen; class boleh berulang.
Atribut title hanya pelengkap, bukan pengganti teks atau label.

Atribut

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

Hubungkan dengan konsep lain

HTML attribute °HTML element °

Library: Tiga bahasa di balik satu halaman ↗

Ke lesson berikutnya →