HTML Attributes

❮ Previous Next ❯

Bab 1: Memberikan Kekuatan pada Element

Jika HTML Element adalah orangnya, maka Attribute adalah properti atau sifat yang melekat pada orang tersebut (seperti warna rambut, tinggi badan, atau nama).

Atribut memberikan informasi tambahan kepada element agar browser tahu cara bertindak lebih spesifik. Tanpa atribut, tag seperti <a> tidak akan tahu harus pergi ke mana, dan tag <img> tidak tahu gambar mana yang harus diambil.

💡 Aturan Dasar Atribut:

  • Atribut SELALU ditulis di dalam Tag Pembuka.
  • Atribut biasanya datang dalam pasangan **nama="nilai"** (contoh: name="value").
  • Nilai atribut harus selalu dibungkus dengan tanda kutip (disarankan kutip dua "").

Bab 2: Atribut Paling Populer

Mari kita pelajari beberapa atribut yang akan paling sering kamu gunakan dalam membangun website profesional.

1. href (Hyperlink Reference)

Digunakan pada tag <a> untuk menentukan alamat URL tujuan link.

<a href="https://google.com">

2. src (Source)

Digunakan pada tag <img> untuk menentukan lokasi file gambar.

<img src="gambar.jpg">

3. alt (Alternative Text)

Teks pengganti jika gambar gagal tampil. Sangat penting untuk Google (SEO) dan aksesibilitas.

alt="Deskripsi Gambar"

Penerapan Atribut:

<a href="https://codivay.com" target="_blank" title="Klik ke CODIVAY">
  Kunjungi Website Kami
</a>

Bab 3: Atribut Ukuran (Width & Height)

Atribut width dan height digunakan untuk mengatur lebar dan tinggi elemen, biasanya pada gambar atau video. Nilainya secara default adalah **Pixel (px)**.

<img src="logo.png" width="500" height="600">

Bab 4: Atribut Bahasa (lang)

Atribut ini diletakkan pada tag <html> untuk memberitahu browser dan Google bahasa apa yang digunakan website tersebut. Ini membantu fitur *translate* otomatis di browser.

<html lang="id">

⚡ Misi: Memberi "Identitas" pada Gambar

Tugasmu sekarang adalah membuat element gambar yang lengkap dengan atribut identitasnya. Jangan copy-paste!

🎯 Target Misi Kamu:

  • ✅ Buat tag <img>.
  • ✅ Tambahkan atribut src dengan isi: kucing.jpg
  • ✅ Tambahkan atribut alt dengan isi: Foto Kucing Lucu
  • ✅ Tambahkan atribut width sebesar: 300

Pusat Dokumentasi Developer

Kalau kamu butuh jawaban cepat saat lagi ngoding, kamu bisa intip dokumentasi teknis di bawah ini:

Layanan & Jasa

Pembuatan Website Template Web Jasa Iklan

Fondasi Utama

Tag & Struktur Atribut Elemen Atribut Global Simbol & Karakter

Visual & Media

Kamus Warna Grafik Canvas Audio & Video Cek Browser

Alat Bantu Dev

Konversi PX ke EM Shortcut Keyboard Status HTTP URL Encoding

Standar Global

Kode Bahasa Kode Negara Atribut Event

Langkah Selanjutnya

Struktur elemen dan kekuatannya (Atribut) sudah kamu kuasai! Sekarang saatnya fokus pada konten teks yang paling penting di website, yaitu Headings.

INSPIRED BY GLOBAL WEB STANDARDS • POWERED BY CODIVAY

Lanjut ke HTML Headings »
❮ Previous Next: HTML Headings ❯