Home » HTML » Atribut di HTML: Contoh dan Cara Membuatnya

Atribut di HTML: Contoh dan Cara Membuatnya

by Catur Kurnia Sari
by Catur Kurnia Sari

Atribut HTML berguna untuk 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 berbentuk pasangan nama / nilai seperti: name = “value”

Atribut href

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

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>The href Attribute</h2>

<p> Tautan HTML ditentukan dengan tag. Alamat tautan ditentukan dalam atribut href: </p>
<a href="https://www.dosenit.com">Visit DosenIT</a>

</body>
</html>

Atribut src

Tag <img> digunakan untuk menyematkan gambar di halaman HTML. Atribut src menentukan jalur (path) menuju gambar yang akan ditampilkan.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>The src Attribute</h2>
<p> Gambar HTML ditentukan dengan tag img, dan nama file dari sumber gambar ditentukan dalam atribut src: </p>
<img src="https://dosenit.com/wp-content/uploads/2020/10/dosen-ti.png" width="500" height="600">

</body>
</html>

Ada dua cara untuk menentukan URL di atribut src, yaitu:

  1. Absolute URL – Tautan menuju gambar eksternal yang dihosting di situs web lain. Contoh: src = “https://dosenit.com/wp-content/uploads/2020/10/dosen-ti.png”.

Catatan: Gambar eksternal kemungkinan memiliki hak cipta. Jika Anda tidak mendapatkan izin untuk menggunakannya, maka itu melanggar undang-undang hak cipta. Selain itu, Anda tidak dapat mengontrol gambar eksternal; gambar tersebut bisa dihapus atau diubah.

2. Relative URL– Tautan menuju gambar yang dihosting di dalam situs web. Di sini, URL tidak menyertakan nama domain. Jika URL dimulai tanpa garis miring maka akan menjadi relatif terhadap halaman saat ini. Contoh: src = “img_girl.jpg”. Jika URL diawali dengan garis miring, maka akan menjadi relatif terhadap domain. Contoh: src = “/ images / img_girl.jpg”.

Tip: Cara terbaik untuk menautkan gambar adalah menggunakan URL relatif. Gambar tidak akan rusak jika Anda mengubah domain.

Atribut Height dan Weight

Tag <img> juga harus berisi atribut height dan weight untuk menentukan lebar dan tinggi gambar (dalam pixel).

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Atribut Width dan Height</h2>

<p> Atribut height dan weight pada tag img, menentukan lebar dan tinggi gambar: </p>
<img src="https://dosenit.com/wp-content/uploads/2020/10/dosen-ti.png" width="500" height="600">

</body>
</html>

Atribut alt

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

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>The alt Attribute</h2>
<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p>

<img src="https://dosenit.com/wp-content/uploads/2020/10/dosen-ti.png" alt="Dosenit" width="500" height="600">

</body>
</html>

Contoh:
Lihat apa yang terjadi ketika kita mencoba menampilkan gambar yang tidak ada.

<!DOCTYPE html>
<html>
<body>

<img src="img_typo.jpg" alt="DosenIT">

<p> Jika mencoba menampilkan gambar yang tidak ada, nilai atribut alt akan ditampilkan. </p>
</body>
</html>

Atribut Style

Atribut style digunakan untuk menambahkan style pada elemen, seperti warna, font, ukuran, dan lainnya.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>Atribut Style</h2>
<p>Atribut style digunakan untuk menambahkan style pada elemen, seperti warna</p>

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

</body>
</html>

Atribut lang

Dalam membuat kode HTML diharuskan selalu menyertakan atribut lang di dalam tag , untuk menyatakan bahasa halaman Web. Hal ini dimaksudkan untuk membantu mesin pencari dan browser.

Contoh berikut menetapkan bahasa Inggris sebagai bahasa pada HTML.

<!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 bahasa Inggris sebagai bahasa dan Amerika Serikat sebagai negaranya:

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

Atribut title

Atribut title mendefinisikan beberapa informasi tambahan tentang suatu elemen.

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

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2 title="I'm a header">Atribut title</h2>

<p title="I'm a tooltip">Arahkan mouse ke paragraf ini, untuk menampilkan atribut title sebagai tooltip.</p>

</body>
</html>

Saran: Selalu Gunakan Atribut Huruf Kecil

Standar HTML tidak menentukan penulisan nama atribut huruf kecil.

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

Namun, disarankan selalu gunakan atribut huruf kecil dalam HTML, dan harus menggunakan atribut 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, direkomendasikan menggunakankutipan dalam HTML, dan harus menggunakan kutipan untuk jenis dokumen yang lebih ketat seperti XHTML.

Baik:

<a href="https://www.dosenit.com">Kunjungi website ini</a>

Buruk:

<a href=https://www.dosenit.com>Kunjungi website ini</a>

Terkadang kita harus menggunakan tanda kutip. Contoh dibawah ini tidak akan menampilkan atribut title dengan benar, karena mengandung spasi.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h1>About DosenIT</h1>

<p title=About Dosenit>
Anda tidak dapat menghilangkan tanda kutip di sekitar nilai atribut
jika nilainya mengandung spasi.
</p>

<p><b>
Jika Anda menggerakkan mouse ke atas paragraf di atas,
browser Anda hanya akan menampilkan kata pertama dari judul.
</b></p>

</body>
</html>

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, maka perlu menggunakan tanda kutip tunggal pada sekitar atribut.

Contoh:

<p title='John "ShotGun" Nelson'>

Atau sebaliknya

<!DOCTYPE html>
<html>
<body>

<h2>Kutipan Tunggal atau Ganda?</h2>
<p>Dalam beberapa situasi, ketika nilai atribut itu sendiri berisi tanda kutip ganda, maka perlu menggunakan tanda kutip tunggal pada sekitar atribut.</p>

<p title='John "ShotGun" Nelson'>John kutip ganda</p>
<p title="John 'ShotGun' Nelson">John kutip tunggal</p>

</body>
</html>

Ringkasan BAB

  • Semua elemen HTML dapat memiliki atribut
  • Atribut href menentukan URL halaman yang dituju link
  • Atribut src menentukan jalur menuju gambar yang akan ditampilkan
  • Atribut weight dan heightmemberikan informasi ukuran untuk gambar
  • Atribut alt menyediakan teks alternatif untuk gambar
  • Atribut style digunakan untuk menambahkan style pada elemen, seperti warna, font, ukuran, dan lainnya
  • Atribut lang dari tag mendeklarasikan bahasa halaman Web
  • Atribut title mendefinisikan beberapa informasi tambahan tentang sebuah elemen

You may also like