Atribut pada Elemen HTML


Elemen HTML juga memiliki atribut / attribute, yang bertujuan untuk memberikan informasi tambahan tentang elemen tersebut. Semua elemen HTML dapat menggunakan attribute, dan attribute selalu diletakkan pada tag pembuka.

Atribut Elemen HTML

Di bawah ini adalah beberapa contoh attribute yang sering digunakan :

Atribut Class

Atribut class digunakan untuk menunjukkan nama kelas sebuah elemen. Nama kelas dapat digunakan untuk mendefinisikan style / model elemen HTML. Kalian juga harus berhati dalam menulis nama kelas, karena huruf besar dan huruf kecil dibedakan (case sensitive).

Contoh :

<p class="nama-kelas">Nama saya budi</p>

Atribut Id

Atribut id memiliki fungsi yang sama dengan atribut class, namun atribut id ini digunakan untuk menentukan id unik sebuah elemen HTML.

Contoh :

<p id="nama">Nama saya budi</p>

Kelebihan atribut id dari pada atribut class adalah atribut id dapat digunakan sebagai link yang menunjukkan posisi / keberadaan sebuah elemen tersebut. Link untuk menunjukkan posisi elemen tersebut adalah isi dari atribut tersebut serta ditambahkan tanda ‘#’ di depan nama atributnya.

Contoh :

<p id="nama">Nama saya budi</p>

<!-- Untuk menunjukkan posisi elemen tersebut ialah dengan menggunakan tag <a> -->

<a href="#nama">Menuju ke nama saya</a>

Atribut href (Link / Tautan)

Untuk menyematkan link / tautan ke dalam sebuah halaman HTML, diperlukan tag <a> dan alamat link tersebut ditempatkan ke dalam atribut href.

Contoh :

<a href="https://www.macode.web.id">Link website MACode</a>

Output :

Atribut src (Source / Sumber)

Untuk menyematkan atau menampilkan gambar ke halaman HTML, diperlukan tag <img> untuk mendefinisikannya. Serta nama file yang merupakan sumber dari gambar yang ingin disematkan, ditempatkan pada attribute src.

Contoh :

<img src="Logo.png">

Atribut style (Tampilan elemen)

Atribut style digunakan untuk menentukan model atau tampilan sebuah elemen, seperti warna teks, huruf, ukuran teks, dll.

Contoh :

<p style="color: red">Tulisan ini berwarna merah</p>

Output :

Tulisan ini berwarna merah

*Note : Kamu dapat mempelajari lebih lanjut tentang tampilan sebuah halaman / elemen HTML pada tutorial CSS.

Aturan dalam mendefinisikan atribut

  1. Memiliki ruang kosong atau jarak atau spasi antara attribute tersebut dengan nama elemen atau attribute sebelumnya (jika terdapat lebih dari satu attribute).
  2. Penggunaan huruf kecil (Lowercase) dalam membuat dan mendefinisikan attribute. Dalam HTML versi terbaru memang tidak ada persyaratan untuk mengharuskan penggunaan huruf besar atau huruf kecil. Namun untuk lebih memudahkan pembacaan kode, W3C menyarankan penggunaan huruf kecil dalam penulisan attribute.
  3. Meskipun dalam menentukan nilai sebuah atribut masih dapat didefinisikan tanpa penggunaan tanda kutip. Namun, alangkah lebih baik jika menggunakan tanda kutip dalam menulis nilai atribut. Karena mungkin saja akan terjadi kesalahan atau error pada titik dimana sebuah browser salah menafsirkan markup kamu dan berpikir bahwa terdapat tiga atribut atau lebih dalam sebuah elemen.

Contoh :

<a href="https://www.macode.web.id" title="link dan title">Link website MACode</a>

Atau

<a href=https://www.macode.web.id title=link dan title >Link website MACode</a>

Atribut Boolean

Mungkin kalian sudah pernah melihat sebuah atribut yang ditulis tanpa nilai dan sama dengan. Ini disebut atribut Boolean, dan mereka hanya memiliki satu nilai yang umumnya sama dengan nama atribut.

Contoh :

<input type="checkbox" checked />

Sama dengan

<input type="checkbox" checked ="checked" />

Penggunaan Tanda Kutip

Mungkin kalian melihat pada artikel ini, tutorial yang ada di website ini menggunakan kutip dua “…” di sekitar nilai atribut. Akan tetapi tanda kutip satu/tunggal ‘…’ juga dapat digunakan, namun yang paling umum digunakan adalah kutip dua.

Contoh :

<a href="https://www.macode.web.id">Link website MACode</a>

<a href=’https://www.macode.web.id’>Link website MACode</a>

Dalam beberapa kondisi, ketika nilai atribut tersebut mengandung tanda kutip dua “…”, maka perlu menggunakan tanda kutip satu pada atributnya karena untuk mendeklarasikan kutip di dalam kutip harus menggunakan tanda yang berbeda.

Contoh :

<p title="Penggunaan kutip 'didalam' kutip">Contoh penggunaan kutip di dalam kutip</p>

atau

<p title='Penggunaan kutip "didalam" kutip'>Contoh penggunaan kutip di dalam kutip</p>

Kamu tidak dapat menuliskan nilai atribut dengan campuran kutip satu dengan kutip dua. Berikut contoh yang salah :

<p title="Campuran kutip satu dengan kutip dua'>Contoh penggunaan kutip yang salah</p>