Atribut: keterangan di dalam tag

Di pelajaran sebelumnya kamu sudah menulis ini:

<a href="https://id.wikipedia.org">Wikipedia</a>

Bagian href="https://id.wikipedia.org" itu bukan tag, dan bukan isi tautan. Ia adalah keterangan tambahan yang menempel pada tag. Namanya atributAtributKeterangan tambahan di dalam tag pembuka, seperti id, type, atau placeholder.Penjelasan lengkap →.

Tag sendirian sering belum cukup. <a> tahu bahwa ini tautan, tapi tautan ke mana? <img> tahu bahwa ini gambar, tapi gambar yang mana? Atribut yang menjawabnya.

Pola dasar: nama=“nilai”

Setiap atribut punya dua bagian, dipisah tanda sama dengan:

<a href="https://id.wikipedia.org">Wikipedia</a>

• Nama (href): jenis keterangannya.
• Nilai ("https://id.wikipedia.org"): isi keterangannya, ditulis di antara tanda kutip.

Aturan menulisnya

1. Ditulis di tag pembuka saja. Tag penutup tidak pernah punya atribut.
2. Satu spasi memisahkan nama tag dari atribut, dan antar atribut.
3. Boleh lebih dari satu, dan urutannya bebas.
4. Nilai dalam tanda kutip lurus ("..."). Hati-hati: kalau kamu menyalin dari Word atau chat, kadang tanda kutipnya melengkung (“ ”), dan itu tidak dikenali.

Contoh dua atribut sekaligus. Dua penulisan ini sama artinya:

<a href="https://id.wikipedia.org" target="_blank">Wikipedia</a>
<a target="_blank" href="https://id.wikipedia.org">Wikipedia</a>

Atribut target="_blank" membuat tautan terbuka di tab baru. Tanpa itu, tautan membuka di tab yang sama.

Atribut yang sering kamu temui

Kamu tidak perlu menghafal semuanya sekarang. Cukup kenali tampangnya.

Beberapa cuplikan:

<img src="gambar/kucing.svg" alt="Kucing oranye">
<p title="Ini tulisan petunjuk">Arahkan mouse ke sini.</p>
<h2 id="kontak">Kontak</h2>
<p class="penting">Jangan lupa kumpul besok.</p>

Tentang yang belum jelas:

• src dan alt di img ditunjukkan di sini hanya sebagai pratinjau. Penjelasan lengkapnya ada di pelajaran 6.
• id dan class dipakai untuk “menunjuk” elemen tertentu, misalnya untuk diberi warna. Sekarang cukup tahu bahwa keduanya atribut juga. IDID (nama elemen)Nama unik untuk satu elemen, supaya mudah ditunjuk oleh CSS atau JavaScript.Penjelasan lengkap → bersifat unik (satu nama untuk satu elemen saja), sedangkan classClassNama kelompok yang bisa ditempelkan ke banyak elemen, supaya semuanya didandani sama oleh CSS.Penjelasan lengkap → boleh dipakai bersama. Detailnya di pelajaran 7.
• title paling gampang dicoba: tahan mouse di atas elemennya beberapa detik, tulisannya muncul.

Coba sendiri: tambah atribut

Kotak berikut berisi halaman yang elemennya sudah ada tapi belum punya atribut. Tugasmu menambahkannya:

1. Beri tautan Wikipedia atribut href="https://id.wikipedia.org".
2. Beri <strong>HTML</strong> atribut title="Bahasa untuk membuat halaman web", lalu arahkan mouse ke kata HTML dan tahan sebentar.
3. Tambahkan atribut kedua pada tautan: target="_blank". Pisahkan dengan satu spasi dari atribut sebelumnya.

Perhatikan hasilnya: tautan yang tadinya cuma tulisan sekarang bisa diklik.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Atribut</title>
</head>
<body>
  <h1>Kenalan dengan atribut</h1>
  <p>Link ini belum punya tujuan: <a>Wikipedia</a></p>
  <p>Arahkan mouse ke tulisan ini: <strong>HTML</strong></p>

  <!-- Tantangan 1: beri link di atas atribut href="https://id.wikipedia.org" -->
  <!-- Tantangan 2: beri strong HTML atribut title="Bahasa untuk membuat halaman web" -->
  <!-- Tantangan 3: beri link atribut target="_blank" supaya terbuka di tab baru -->

</body>
</html>

Bonus: coba tukar urutan href dan target. Hasilnya sama, kan? Itu bukti urutan atribut bebas.

Kesalahan umum

• Lupa tanda kutip penutup. href="https://contoh.com tanpa kutip kedua membuat sisa tag ikut “tertelan” jadi nilai atribut.
• Tanda kutip melengkung hasil salin-tempel dari Word atau chat. Ganti dengan kutip lurus.
• Menaruh atribut di tag penutup. Salah: </a href="...">. Atribut hanya di pembuka.
• Tidak memberi spasi antar atribut: href="..."target="_blank". Pisahkan dengan spasi.
• Salah eja nama atribut. hreff atau scr (bukan src) tidak dikenali, dan browser diam saja.

Sekarang kamu sudah tahu tiga pondasi HTML: berkas, tag, dan atribut. Dengan itu, kamu siap menghadapi dua topik yang sering bikin pemula pusing: alamat berkas di pelajaran 5, lalu gambar di pelajaran 6.