Pengertian atribut pada html
Atribut html adalah informasi tambahan yang disisipkan pada tag html, kegunaanya untuk memberikan inf
Atribut HTML adalah informasi tambahan yang disisipkan pada tag html, kegunaanya untuk memberikan informasi tambahan pada suatu elemen, seperti: tinggi, lebar, style, href dan lain lain.
Contoh: atribut href
<!DOCTYPE html> <html> <head> <title>Judul post</title> </head> <body> <a href="https://www.hendky.com">Link Hendky</a> </body> </html>
<a>
salah satu elemen HTML.
Kegunaanya untuk menampilkan link atau tautan dengan menambahkan nilai pada atribut href.href
salah satu atribut HTML.
Kegunaanya untuk memberikan link atau alamat url.
Pada artikel berikutnya Anda akan belajar lebih dalam tentang elemen <a> atau link.
Contoh: atribut src
<!DOCTYPE html> <html> <head> <title>Judul post</title> </head> <body> <img src="https://hendky.com/wp-content/uploads/2019/06/logo-hendky.png"> </body> </html>
<img>
salah satu elemen HTML.
Kegunaanya untuk menampilkan gambar dengan menambahkan nilai atribut src.src
salah satu atribut HTML.
Kegunaanya untuk memberikan link atau url gambar.
Pada artikel berikutnya Anda akan belajar lebih dalam tentang elemen <img> atau gambar.
Contoh: atribut width dan height
<!DOCTYPE html> <html> <head> <title>Judul post</title> </head> <body> <img src="https://hendky.com/wp-content/uploads/2019/06/logo-hendky.png" width="400" height="300"> </body> </html>
<img>
salah satu elemen HTML.width
salah satu atribut HTML.
Kegunaanya untuk memberikan nilai lebar pada elemen.height
salah satu atribut HTML.
Kegunaanya untuk memberikan nilai tinggi pada elemen.
Contoh: atribut alt
<img>
salah satu elemen HTML.alt
salah satu atribut HTML.
Kegunaanya untuk memberikan teks alternatif yang akan digunakan jika gambar gagal ditampilkan, atribut alt hanya digunakan untuk gambar saja.
Sebagai contoh saya menampilkan gambar yang salah:
<!DOCTYPE html> <html> <head> <title>Judul post</title> </head> <body> <img src="hendky.com/gambar-kucing-lucu.jpg" alt="gambar kucing persia"> </body> </html>
Hasilnya:

Biasanya gambar yang gagal dimuat disebabkan:
- memberikan nilai pada atribut src yang salah
- koneksi yang lambat
- tidak menggunakan format gambar yang didukung browser
Pada artikel berikutnya Anda akan belajar lebih dalam tentang elemen <img> atau gambar.
Contoh: atribut style
Atribut style digunakan untuk memberikan style pada elemen seperti: color, background, font-size dan lain lain.
Contoh:
<!DOCTYPE html> <html> <head> <title>Judul post</title> </head> <body> <p style="color:red">Hallo dunia</p> </body> </html>
Hasilnya:
Hallo dunia
Pada artikel berikutnya Anda akan belajar tentang css.
Contoh: atribut lang
<!DOCTYPE html> <html lang="en-ID"> <head> <title>Judul post</title> </head> <body> ... </body> </html>
Atribut lang
digunakan untuk mendeklarasikan jenis bahasa yang digunakan. Mendeklarasikan bahasa sangat penting untuk aplikasi aksesibilitas (pembaca layar) dan mesin pencari ( SEO ).
Contoh: atribut title
Atribut title
digunakan untuk menambahkan title pada elemen yang akan ditampilkan sebagai tooltip ketika Anda mengarahkan mouse ke elemen yang diberi atribut title.
Contoh:
<!DOCTYPE html> <html> <head> <title>Judul post</title> </head> <body> <p title="saya paragraf">Ini paragraf pertama.</p> </body> </html>
Hasilnya
Ini paragraf pertama.
Arahkan mouse Anda atau kursor Anda pada paragraf diatas yang diberi atribut title maka Anda akan melihat tooltip seperti gambar dibawah ini:

Gunakan atribut huruf kecil
Standar HTML5 tidak memerlukan nama atribut huruf kecil.
W3C merekomendasikan huruf kecil dalam HTML, dan menuntut huruf kecil untuk tipe dokumen yang lebih ketat seperti XHTML.
Gunakan kutipan pada setiap atribut
Disarankan:
<!DOCTYPE html> <html> <head> <title>Judul post</title> </head> <body> <a href="https://www.hendky.com">Link Hendky</a> </body> </html>
Tidak disarankan ( Buruk ):
<!DOCTYPE html> <html> <head> <title>Judul post</title> </head> <body> <a href=https://www.hendky.com>Link Hendky</a> </body> </html>
Standar HTML5 tidak memerlukan tanda kutip di sekitar nilai atribut.
Tetapi menghilangkan tanda kutip dapat menghasilkan kesalahan.
Sangat disarankan menggunakan tanda kutip.
Kutipan tunggal atau ganda?
Kutipan 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:
<!DOCTYPE html> <html> <head> <title>Judul post</title> </head> <body> <p title='belajar "HTML" dasar'>Paragraf pertama</p> </body> </html>
Atau sebaliknya:
<!DOCTYPE html> <html> <head> <title>Judul post</title> </head> <body> <p title="belajar 'HTML' dasar">Paragraf pertama</p> </body> </html>
Ringkasan pembelajaran:
Atribut | Kegunaanya |
---|---|
href | Menambahkan alamat url untuk tautan atau link |
src | Menambahkan alamat url untuk image |
width | Memberikan nilai lebar |
height | Memberikan nilai tinggi |
alt | Memberikan teks alternatif untuk gambar jika gagal dimuat |
style | Memberikan style pada elemen HTML |
title | Memberikan informasi tambahan pada elemen |
lang | Memberikan jenis bahasa pada akar dokumen HTML |