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
hrefmenentukan URL halaman yang dituju tautan:
Contoh
<a href="https://www.w3schools.com">Visit W3Schools</a>
Anda akan mempelajari lebih lanjut tentang tautan di bab Tautan HTML kami .
Atribut src
Tag <img>digunakan untuk menyematkan gambar di halaman HTML. Atribut srcmenentukan jalur ke gambar yang akan ditampilkan:
Contoh
<img src="img_girl.jpg">
Ada dua cara untuk menentukan URL dalam src
atribut:
1. URL Absolut - Tautan ke gambar eksternal yang dihosting di situs web lain. Contoh: src="https://www.w3schools.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 bisa tiba-tiba dihapus atau diubah.
2. URL Relatif - Tautan ke gambar yang di-host 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, itu akan menjadi relatif terhadap domain. Contoh: src="/images/img_girl.jpg".
Tip: Hampir selalu yang terbaik adalah menggunakan URL relatif. Mereka tidak akan rusak jika Anda mengubah domain.
Atribut lebar dan tinggi
Tag <img>juga harus berisi
atribut widthand
height, yang menentukan lebar dan tinggi gambar (dalam piksel):
Contoh
<img src="img_girl.jpg" width="500" height="600">
Atribut alt
altAtribut yang diperlukan untuk <img>
tag menentukan teks alternatif untuk gambar, jika gambar karena alasan tertentu tidak dapat ditampilkan. Hal ini dapat disebabkan oleh koneksi yang lambat, atau kesalahan pada srcatribut, atau jika pengguna menggunakan pembaca layar.
Contoh
<img src="img_girl.jpg" alt="Girl
with a jacket">
Contoh
Lihat apa yang terjadi jika kami mencoba menampilkan gambar yang tidak ada:
<img src="img_typo.jpg" alt="Girl
with a jacket">
Anda akan mempelajari lebih lanjut tentang gambar di bab Gambar HTML kami .
Atribut gaya
Atribut styledigunakan untuk menambahkan gaya ke elemen, seperti warna, font, ukuran, dan lainnya.
Contoh
<p style="color:red;">This is a red paragraph.</p>
Anda akan mempelajari lebih lanjut tentang gaya di bab Gaya HTML kami .
Atribut lang
Anda harus selalu menyertakan langatribut di dalam <html>tag, untuk mendeklarasikan bahasa halaman Web. Ini dimaksudkan untuk membantu mesin pencari dan browser.
Contoh berikut menentukan bahasa Inggris sebagai bahasa:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Kode negara juga dapat ditambahkan ke kode bahasa di lang
atribut. Jadi, dua karakter pertama menentukan bahasa halaman HTML, dan dua karakter terakhir menentukan negara.
Contoh berikut menentukan bahasa Inggris sebagai bahasa dan Amerika Serikat sebagai negara:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
Anda dapat melihat semua kode bahasa di Referensi Kode Bahasa HTML kami .
Judul Atribut
Atribut titlemendefinisikan beberapa informasi tambahan tentang suatu elemen.
Nilai atribut title akan ditampilkan sebagai tooltip saat Anda mengarahkan mouse ke elemen:
Contoh
<p title="I'm a tooltip">This is a paragraph.</p>
Kami Sarankan: 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, W3C merekomendasikan atribut huruf kecil dalam HTML, dan menuntut atribut huruf kecil untuk jenis dokumen yang lebih ketat seperti XHTML.
Di W3Schools kami selalu menggunakan nama atribut huruf kecil.
Kami Sarankan: Selalu Kutip Nilai Atribut
Standar HTML tidak memerlukan tanda kutip di sekitar nilai atribut.
Namun, W3C merekomendasikan kutipan dalam HTML, dan meminta kutipan untuk jenis dokumen yang lebih ketat seperti XHTML.
Bagus:
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>Buruk:
<a href=https://www.w3schools.com/html/>Visit our HTML tutorial</a>Terkadang Anda harus menggunakan tanda kutip. Contoh ini tidak akan menampilkan atribut judul dengan benar, karena mengandung spasi:
Contoh
<p
title=About W3Schools>
Di W3Schools kami selalu menggunakan tanda kutip di sekitar nilai atribut.
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 untuk menggunakan tanda kutip tunggal:
<p title='John "ShotGun" Nelson'>
Atau sebaliknya:
<p title="John 'ShotGun' Nelson">
Ringkasan Bab
- Semua elemen HTML dapat memiliki atribut
- Atribut
hrefdari<a>menentukan URL halaman yang dituju tautan - Atribut
srcdari<img>menentukan jalur ke gambar yang akan ditampilkan - Atribut
widthdanheightatribut<img>memberikan informasi ukuran untuk gambar - Atribut
altdari<img>menyediakan teks alternatif untuk sebuah gambar - Atribut
styledigunakan untuk menambahkan gaya ke elemen, seperti warna, font, ukuran, dan lainnya - Atribut
langtag<html>menyatakan bahasa halaman Web - Atribut
titlemendefinisikan beberapa informasi tambahan tentang suatu elemen
Latihan HTML
Referensi Atribut HTML
Daftar lengkap semua atribut untuk setiap elemen HTML, tercantum di: Referensi Atribut HTML kami .