Atribut HTML

Semua elemen HTML memiliki atribut yang akan memberikan informasi tambahan tentang elemen tertentu. Dibutuhkan 2 parameter, yaitu, nama & nilai yang menentukan properti elemen dan ditempatkan di dalam tag elemen.

Parameter name mengambil nama properti yang ingin kita tetapkan ke elemen dan nilainya mengambil nilai properti atau luasnya nama properti yang dapat disejajarkan di atas elemen. Setiap nama memiliki beberapa nilai yang harus ditulis dalam tanda kutip.

Di bawah ini adalah beberapa Atribut html yang paling umum digunakan dalam HTML.

  • Semua elemen HTML dapat memiliki atribut
  • Atribut memberikan informasi tambahan tentang elemen
  • Atribut selalu ditentukan dalam tag awal
  • Atribut biasanya datang dalam pasangan nama/nilai seperti: name="value"
  • Atribut menentukan URL halaman yang dituju tautanhref <a>
  • Atribut menentukan jalur ke gambar yang akan ditampilkansrc <img>
  • Dan atribut memberikan informasi ukuran untuk gambarwidthheight<img>
  • Atribut menyediakan teks alternatif untuk gambaralt <img>
  • Atribut ini digunakan untuk menambahkan gaya ke elemen, seperti warna, font, ukuran, dan lainnyastyle
  • Atribut tag mendeklarasikan bahasa halaman Weblang<html>
  • Atribut mendefinisikan beberapa informasi tambahan tentang suatu elementitle

Atribut href

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

Contoh:
<a href="https://www.odimera.com">Visit odimera</a>

Atribut src

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

Ada dua cara untuk menentukan URL di atribut:src

  • 1. URL Absolut - Tautan ke gambar eksternal yang dihosting di situs web lain. Contoh: src="https://www.odimera.com/images/img_girl.jpg". Catatan: Gambar eksternal mungkin berada di bawah 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 tiba-tiba dapat dihapus atau diubah.
  • 2. URL Relatif - Tautan ke gambar yang dihosting di dalam situs web. Di sini, URL tidak menyertakan nama domain. Jika URL dimulai tanpa garis miring, itu akan relatif terhadap halaman saat ini. Contoh: src="img_girl.jpg". Jika URL dimulai dengan garis miring, url tersebut akan relatif terhadap domain. Contoh: src="/images/img_girl.jpg".
Contoh:
<img src="img_girl.jpg">

Atribut lebar dan tinggi

Tag juga harus berisi atribut dan atribut, yang menentukan lebar dan tinggi gambar (dalam piksel):<img>width height
Contoh:
<img src="img_girl.jpg" width="500" height="600">

Atribut alt

Atribut yang diperlukan untuk tag menentukan teks alternatif untuk gambar, jika gambar karena alasan tertentu tidak dapat ditampilkan. Ini bisa disebabkan oleh koneksi yang lambat, atau kesalahan dalam atribut, atau jika pengguna menggunakan pembaca layar.alt<img>src

Contoh:
<img src="img_girl.jpg" alt="Girl with a Moms">

Atribut gaya

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

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

Atribut lang

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

Contoh berikut menentukan bahasa Inggris sebagai bahasa:

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

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

Contoh berikut menentukan bahasa Inggris sebagai bahasa dan Amerika Serikat sebagai negaranya:

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

Atribut judul

Atribut mendefinisikan beberapa informasi tambahan tentang suatu elemen.title

Nilai atribut title akan ditampilkan sebagai tooltip ketika Anda mengarahkan mouse ke atas elemen:

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

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.

Rekomendasi:

atribut huruf kecil dalam HTML, dan menuntut atribut huruf kecil untuk jenis dokumen yang lebih ketat seperti XHTML.

Selalu Kutip Nilai Atribut

Standar HTML tidak memerlukan tanda kutip di sekitar nilai atribut. Kutipan dalam HTML, dan menuntut kutipan untuk jenis dokumen yang lebih ketat seperti XHTML.

Kutipan Tunggal atau Ganda?

Tanda kutip ganda di sekitar nilai atribut adalah yang paling umum dalam 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='John "ShotGun" Nelson'>
atau serbaliknya
<p title="John 'ShotGun' Nelson">

Referensi Atribut

Atribut HTML adalah kata-kata khusus yang ditempatkan di dalam tag pembuka dan digunakan untuk menentukan karakteristik elemen HTML. Atribut HTML berisi dua bagian, nama atribut, dan nilainya. Pasangan atribut (attribute_name, attribute_value) dipisahkan menggunakan operator yang sama (=). Nilai atribut ditutup di dalam tanda kutip ganda (" ").

Untuk lebih memahami dan mengetahui Referensi Atribut html silahkan buka disini: Atribut HTML 

Materi atribut html ini diambil dari : 

Previous Post Next Post