HTML Academy · Pelajaran

id class style dan title

Terapkan atribut global inti ke elemen HTML apa pun.

id class style dan title adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 1 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 HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Atribut Global

Atribut global dapat diterapkan pada elemen HTML apa pun:

id — pengenal unik
class — satu atau beberapa kelas CSS
style — CSS sebaris
title — teks keterangan alat
Dan banyak lagi: lang, hidden, tabindex, data-*...

Atribut id

Atribut id menetapkan pengenal unik pada sebuah elemen:

<h2 id="installation">Installation Guide</h2>
<form id="signup-form">...</form>
<div id="hero-banner">...</div>

<!-- Rules:
  - Must be unique per page
  - No spaces
  - Use hyphens: user-profile
  - Case-sensitive: #hero ≠ #Hero
-->

Penggunaan id

Atribut id memiliki beberapa kegunaan:

Penentuan target CSS: #hero-banner { ... }
Pemilihan JavaScript: document.getElementById('signup-form')
Navigasi fragmen: <a href="#installation">
Pemberian label ARIA: aria-labelledby="modal-title"

Atribut class

Atribut class menetapkan satu atau beberapa kelas CSS:

<p class="text-large">Large text paragraph.</p>
<button class="btn btn-primary">Submit</button>
<div class="card card-featured highlighted">...</div>

<!-- Multiple classes separated by spaces -->
<!-- Elements can share classes (unlike id) -->
<!-- JavaScript: element.classList.add('active') -->

id vs class

Kapan menggunakan masing-masing atribut:

id — satu elemen tertentu pada halaman
class — pola gaya yang diterapkan pada beberapa elemen

<!-- id: unique element -->
<main id="main-content">...</main>

<!-- class: reusable style -->
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card card-featured">Featured</div>

Atribut style

Atribut style menambahkan CSS sebaris:

<p style="color: red; font-weight: bold;">Warning message</p>
<div style="background: #f0f4f8; padding: 1rem; border-radius: 0.5rem;">
  Info box
</div>

<!-- Inline styles have the highest specificity
     They are hard to override and hard to maintain
     Prefer external CSS classes whenever possible -->

Kapan Menggunakan style Sebaris

style sebaris dapat digunakan dalam kasus berikut:

Nilai dinamis yang ditetapkan oleh JavaScript
Nilai yang belum dapat diketahui saat menulis CSS (warna dan lebar yang ditetapkan pengguna)
HTML email (klien email menghapus CSS eksternal)

Jangan gunakan style untuk pilihan tampilan statis — pilihan tersebut seharusnya berada dalam CSS.

Atribut title

Atribut title menyediakan teks keterangan alat saat diarahkan:

<abbr title="HyperText Markup Language">HTML</abbr>
<button title="Submit the registration form">Submit</button>
<a href="/docs" title="Full documentation (opens in new tab)" target="_blank" rel="noopener">Docs</a>

Keterbatasan Aksesibilitas title

Atribut title memiliki masalah aksesibilitas yang signifikan:

Tidak dapat diakses melalui navigasi keyboard
Tidak ditampilkan pada layar sentuh
Perilaku pembaca layar tidak konsisten
Jangan pernah menaruh informasi penting hanya di dalam title

Gunakan aria-label atau teks yang terlihat untuk informasi penting.

Spesifisitas: id vs class vs Sebaris

Spesifisitas CSS dari yang terendah hingga tertinggi:

/* Element selector: 0-0-1 */
p { color: gray; }

/* Class selector: 0-1-0 */
.text { color: blue; }

/* ID selector: 1-0-0 */
#unique { color: green; }

/* Inline style: 1-0-0-0 (highest) */
<p style="color: red;">Red wins</p>

Konvensi Penamaan class

Konvensi penamaan class yang populer:

<!-- BEM (Block Element Modifier) -->
<div class="card">
  <div class="card__header">
    <h2 class="card__title card__title--featured">Title</h2>
  </div>
</div>

<!-- Utility classes (Tailwind style) -->
<div class="flex items-center gap-4 p-4 bg-white rounded-lg shadow">

Pemeriksaan Singkat

Apa aturan utama untuk atribut id?

Rangkuman: id class style title

Atribut global inti:

id — unik di setiap halaman; digunakan untuk CSS, JavaScript, fragmen, dan ARIA
class — dapat digunakan ulang; beberapa class dipisahkan dengan spasi
style — CSS sebaris (gunakan seperlunya; utamakan CSS eksternal)
title — keterangan alat; tidak mudah diakses oleh pengguna keyboard atau layar sentuh
Spesifisitas id > spesifisitas class dalam CSS

Pertanyaan yang Sering Diajukan

Apakah pelajaran “id class style dan title” gratis?

Ya — teks lengkap “id class style dan title” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “id class style dan title”?

Terapkan atribut global inti ke elemen HTML apa pun. Kamu berlatih HTML 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 HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML 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 1 dari 4.

Berapa lama pelajaran “id class style dan title” 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 HTML Academy ini?

Ya. Setiap pelajaran HTML 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

← Kembali ke HTML Academy