Atribut HTML

0

Back to: Pemrograman HTML

0

Atribut HTML

Atribut HTML memberikan informasi tambahan tentang elemen. Pada dasarnya, semua elemen HTML dapat memiliki atribut yang menyediakan informasi tambahan tentang elemen. Dia selalu ditentukan di tag awal dan biasanya muncul dalam pasangan nama/nilai seperti: nama=”nilai”. Dalam pelajaran kali ini Anda akan mengenal beberapa atribut yang sering kali kita gunakan dalam dokumen HTML.

Atribut href

Tag <a> mendefinisikan tautan. Atribut href menentukan alamat URL dari halaman yang akan kita tuju. Lihat contoh di bawah ini.

Contoh atribut href

<a href="https://www.sadewo.com">Kunjungi situs sadewo.com</a>

Atribut src

Kita menggunakan tag <img> untuk menempelkan gambar dalam halaman HTML. Dalam tag ini, atribut src menentukan jejak lokasi gambar yang akan ditampilkan. Lihat contoh di bawah.

Contoh atribut src

<img src="img_girl.jpg">

Terdapat dua cara untuk menentukan URL dalam atribut src:

  1. URL Absolut – Tautan ke gambar eksternal yang berasal dari situs web lain. Contoh: src=”https://www.sadewo.com/wp-content/uploads/2024/06/Logo-Circle-250×250-1.png”. Gambar eksternal mungkin memiliki hak cipta. Jika Anda tidak mendapatkan izin untuk menggunakannya, Anda mungkin melanggar undang-undang hak cipta. Selain itu, Anda tidak dapat mengendalikan gambar eksternal; gambar tersebut dapat tiba-tiba hilang karea pemiliknya menghapus atau mengubahnya.
  2. URL Relatif – Tautan ke gambar yang berasal dari dalam situs web. Di sini, URL tidak menyertakan nama domain. Jika URL dimulai tanpa garis miring, URL akan relatif terhadap halaman saat ini. Contoh: src=”img_girl.jpg”. Jika URL dimulai dengan garis miring, URL akan relatif terhadap domain. Contoh: src=”/images/img_girl.jpg”.

Kiat: Kami sarankan untuk menggunakan URL relatif, karena URL tersebut tidak akan rusak jika Anda mengubah domain.

Atribut width dan height

Tag <img> juga sebaiknya menggunakan atribut width dan height yang menentukan lebar dan tinggi gambar dalam piksel, seperti contoh dibawah ini.

Contoh atribut width dan height

<img src="img_girl.jpg" width="500" height="600">

Atribut alt

Dalam tag <img> kita memerlukan atribut alt untuk menentukan teks alternatif dari sebuah gambar, apabila karena alasan tertentu gambar tidak dapat ditampilkan. Gambar tidak dapat tampil bisa jadi karena koneksi internet atau terdapat kesalahan dalam atribut src, atau apabila pengguna memakai pembaca layar. Lihat contoh di bawah ini.

Contoh atribut alt

<img src="img_girl.jpg" alt="Girl with a jacket">

Atribut style

Untuk menambahkan gaya pada sebuah elemen kita menggunakan atribut style, seperti warna, jenis huruf, ukuran huruf dan lain sebagainya. Lihat contoh di bawah ini.

Contoh atribut style

<p style="color:red;">This is a red paragraph.</p>

Atribut lang

Anda sebaiknya selalu menyertakan atribut lang di dalam tag untuk menyatakan bahasa dari halaman web. Ini untuk membantu mesin pencari dan peramban. Berikut ini adalah contoh untuk menentukan Inggris sebagai bahasa.

Contoh atribut lang

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

Kode negara juga dapat kita tambahkan ke dalam kode bahasa di dalam atribut lang. Jadi, dua karakter pertama mendefinisikan bahasa dari halaman HTML, dan dua karakter terakhir mendefinisikan negaranya. Contoh berikut ini menentukan Inggris sebagai bahasa dan Amerika sebagai negaranya.

Contoh atribut lang

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

Atribut title

Atribut title mendefinisikan beberapa informasi tambahan tentang sebuah elemen. Nilai dari atribut ini akan tampil sebagai tooltip saat Anda mengarahkan mouse ke elemen tersebut.

Contoh atribut title

<p title="I'm a tooltip">This is a paragraph.</p>

Beberapa Saran

Berikut ini beberapa saran dalam penggunaan atribut

  • Selalu gunakan atribut dengan huruf kecil. Standar HTML tidak mensyaratkan penggunaan huruf kecil untuk penulisan atribut. Namun demikian, kami sarankan untuk menggunakan huruf kecil untuk atribut HTML, dan sangat kami anjurkan untuk menggunakan huruf kecil untuk dokumen yang lebih ketat seperti XHTML.
  • Selalu gunakan tanda petik untuk nilai atribut. Sekalipun standar HTML tidak mensyaratkan demikian, namun kami sarankan untuk menggunakan tanda petik untuk menulis nilai atribut dalam dokumen HTML serta sangat kami sarankan untuk menggunakannya dalam dokumen yang lebih ketat seperti XHTML.
  • Anda dapat menggunakan tanda petik tunggal atau tanda petik ganda, namun kami sarankan untuk konsisten saja, karena kadang-kadang Anda harus menggunakan tanda petik tersebut di dalam nilai atribut.

Referensi