adydetra_
30 Jun 2025

Atribut HTML

Sebelumnya, kita telah mempelajari berbagai elemen HTML seperti heading, paragraf, gambar, tautan, dan lainnya. Kali ini kita akan masuk lebih dalam ke bagian penting dari HTML yaitu atribut.

Apa itu Atribut HTML?

Atribut HTML adalah informasi tambahan yang diletakkan di dalam tag HTML untuk mengubah perilaku atau tampilan elemen tersebut.

Format umum penulisan atribut seperti ini:

<tagname atribut="nilai">Konten</tagname>

Atribut biasanya diletakkan di dalam tag pembuka dan ditulis dalam pasangan nama="nilai".

Contoh Struktur Dasar

Berikut adalah struktur dasar tempat kamu bisa memasukkan semua contoh:

index.html
<!doctype html>
<html>
  <head>
    <title>blog.adydetra.my.id</title>
  </head>
  <body>
    <!-- Tempatkan semua contoh atribut HTML di sini -->
  </body>
</html>

Atribut href pada Tautan

Digunakan untuk menentukan alamat tujuan dari tautan.

<a href="https://www.adydetra.my.id">Kunjungi Blog Saya</a>

Atribut src dan alt pada Gambar

src adalah lokasi gambar, dan alt adalah teks alternatif jika gambar gagal dimuat.

<img src="gambar.jpg" alt="Deskripsi gambar" />

Atribut type dan placeholder pada Input

type menentukan jenis input, placeholder memberi petunjuk kepada pengguna.

<input type="email" placeholder="Masukkan email Anda" />

Atribut id dan class

Digunakan untuk mengidentifikasi elemen secara unik (id) atau sebagai bagian dari kelompok (class). Sangat berguna untuk CSS dan JavaScript.

<p id="paragraf1" class="teks-biru">Ini adalah paragraf dengan id dan class.</p>

Atribut style

Mengatur gaya langsung dari elemen (inline CSS).

<h1 style="color: blue; font-size: 24px;">Judul Berwarna Biru</h1>

Atribut title

Menampilkan teks saat kursor diarahkan ke elemen.

<p title="Ini tooltip">Arahkan kursor ke teks ini</p>

Menentukan bagaimana link dibuka. Contohnya, _blank membuka di tab baru.

<a href="https://www.adydetra.my.id" target="_blank">Buka di Tab Baru</a>

Atribut disabled dan readonly

Digunakan pada elemen form agar tidak bisa diubah.

<input type="text" value="Tidak bisa diubah" readonly />
<button disabled>Klik Saya</button>

Atribut lang dan charset

Digunakan di elemen <html> atau <meta> untuk mendefinisikan bahasa dan encoding.

<html lang="id">
<head>
  <meta charset="UTF-8">
</head>

Kesimpulan

Atribut HTML memperkaya elemen dengan fungsionalitas dan informasi tambahan. Memahami cara kerja atribut akan sangat membantu saat kamu mulai menggunakan CSS dan JavaScript.

Pada bagian selanjutnya, kita akan membahas bagaimana cara memformat teks dalam HTML seperti huruf tebal, miring, dan lainnya.