Atribut HTML


Atribut HTML memberikan informasi tambahan tentang elemen HTML.


Atribut HTML

  • Semua elemen HTML dapat memiliki atribut
  • Atribut memberikan informasi tambahan tentang elemen
  • Atribut selalu ditentukan di tag awal
  • Atribut biasanya datang dalam pasangan nama / nilai seperti: nama = "nilai"

Atribut Href

Tag <a> mendefinisikan hyperlink. Atribut href menentukan URL halaman yang dituju link.


Contoh

<a href="https://www.ianzune.com">Kunjungi Ian Zune</a>

Atribut Src

Tag <img> digunakan untuk menyematkan gambar di halaman HTML. Atribut src menentukan sumber ke gambar yang akan ditampilkan.


Contoh

<img src="img_boy.jpg">

Ada dua cara untuk menentukan URL di atribut src:

1. Absolute URL (URL Mutlak) - Link/tautan ke gambar eksternal yang dihosting di situs web lain. Contoh: src="https://www.ianzune.com/images/img_boy.jpg".

Catatan: 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 mengontrol gambar eksternal; itu bisa tiba-tiba dihapus atau diubah.

2. Relative URL (URL Relatif) - Link/tautan ke gambar yang dihosting di dalam situs web. Di sini, URL tidak menyertakan nama domain. Jika URL dimulai tanpa garis miring, itu akan menjadi relatif terhadap halaman saat ini. Contoh: src="img_boy.jpg". Jika URL dimulai dengan garis miring, itu akan menjadi relatif terhadap domain. Contoh: src="/images/img_boy.jpg".

Tip: Cara terbaik adalah menggunakan URL relatif. Mereka tidak akan rusak jika Anda mengubah domain.


Atribut Width (Lebar) dan Height (Tinggi)

Tag <img> juga harus berisi atribut width dan height, yang menentukan lebar dan tinggi gambar (dalam piksel).


Contoh

<img src="img_boy.jpg" width="500" height="700">

Atribut Alt

Atribut alt yang diperlukan untuk tag <img> menentukan teks alternatif untuk gambar, jika gambar karena alasan tertentu tidak dapat ditampilkan. Hal ini dapat terjadi karena koneksi yang lambat, atau kesalahan pada atribut src.


Contoh

<img src="img_boy.jpg" alt="Anak laki-laki">

Atribut Style

Atribut style digunakan untuk menambahkan style/gaya ke elemen, seperti warna, font, ukuran, dan lainnya.


Contoh

<p style="color: red;">Ini adalah paragraf merah.</p>

Atribut Lang

Anda harus selalu menyertakan atribut lang di dalam tag <html>, untuk menyatakan bahasa halaman Web. Ini dimaksudkan untuk membantu mesin pencari dan browser.


Contoh berikut menetapkan web dalam bahasa Inggris:

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

Kode negara juga dapat ditambahkan ke kode bahasa di atribut lang. Jadi, dua karakter pertama menentukan bahasa halaman HTML, dan dua karakter terakhir menentukan negara.


Contoh berikut menetapkan web dalam bahasa Inggris dan Amerika Serikat sebagai negaranya: 

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

Atribut Title (Judul)

Atribut title mendefinisikan beberapa informasi tambahan tentang sebuah elemen.

Nilai atribut title akan ditampilkan sebagai tooltip saat Anda mengarahkan mouse ke elemen.


Contoh

<p title="I'm a tooltip">Ini adalah paragraf.</p>

Saran: Selalu Gunakan Atribut Huruf Kecil

Standar HTML tidak memerlukan nama atribut huruf kecil.

Atribut title (dan semua atribut lainnya) dapat ditulis dengan huruf besar atau kecil seperti title atau TITLE.

Namun, banyak yang merekomendasikan atribut huruf kecil dalam HTML, dan harus menggunakan huruf kecil untuk jenis dokumen yang lebih ketat seperti XHTML.


Saran: Selalu Kutip Nilai Atribut

Standar HTML tidak membutuhkan tanda kutip di sekitar nilai atribut.

Namun, banyak yang merekomendasikan menggunakan kutipan dalam HTML, dan harus menggunakan kutipan untuk jenis dokumen yang lebih ketat seperti XHTML.


Contoh yang baik:

<a href="https://www.ianzune.com/html/">Kunjungi tutorial Web saya</a>

Contoh yang buruk:

<a href=https://www.ianzune.com/html/>Kunjungi tutorial Web saya</a>

Terkadang Anda harus menggunakan tanda kutip. Contoh ini tidak akan menampilkan atribut judul dengan benar, karena mengandung spasi: 

<p title=Website Ian Zune>

Menggunakan Kutipan Tunggal atau Ganda

Tanda kutip ganda di sekitar nilai atribut adalah yang paling umum di HTML, tetapi tanda kutip tunggal juga dapat digunakan.

Dalam beberapa situasi, ketika nilai atribut itu sendiri berisi tanda kutip ganda, perlu menggunakan tanda kutip tunggal.


Contoh

<p title='Muhammad "Alyasa" Azka'>

Atau sebaliknya,

<p title="Muhammad 'Alyasa' Azka">

Ringkasan

  • Semua elemen HTML dapat memiliki atribut
  • Atribut href dari <a> menentukan URL halaman yang dituju link
  • Atribut src dari <img> menentukan sumber ke gambar yang akan ditampilkan
  • Atribut width dan height dari <img> memberikan informasi ukuran untuk gambar
  • Atribut alt dari <img> menyediakan teks alternatif untuk gambar
  • Atribut style digunakan untuk menambahkan style/gaya ke elemen, seperti warna, font, ukuran, dan lainnya
  • Atribut lang dari tag <html> mendeklarasikan bahasa halaman Web
  • Atribut title mendefinisikan beberapa informasi tambahan tentang sebuah elemen

Sumber referensi: w3schools

Komentar

Posting Komentar