Cara Menambahkan Atribut ke Tag HTML

Bahasa HTML mencakup sejumlah elemen. Ini termasuk komponen situs web yang umum digunakan seperti paragraf, judul, tautan, dan gambar. Ada juga sejumlah elemen baru yang diperkenalkan dengan HTML5, termasuk header, nav, footer, dan lainnya. Semua elemen HTML ini digunakan untuk membuat struktur dokumen dan memberi makna. Untuk menambahkan lebih banyak makna pada elemen, Anda dapat memberi mereka atribut.

Tag pembuka HTML dasar dimulai dengan . Misalnya, tag paragraf pembuka akan ditulis seperti ini:

Untuk menambahkan atribut ke tag HTML Anda, Anda pertama-tama meletakkan spasi setelah nama tag (dalam hal ini adalah "p"). Kemudian Anda akan menambahkan nama atribut yang ingin Anda gunakan diikuti dengan tanda yang sama. Akhirnya, nilai atribut akan ditempatkan dalam tanda kutip. Sebagai contoh:

Tag dapat memiliki beberapa atribut. Anda akan memisahkan setiap atribut dari yang lain dengan spasi.

Elemen Dengan Atribut yang Diperlukan

Beberapa elemen HTML sebenarnya membutuhkan atribut jika Anda ingin mereka berfungsi sebagaimana dimaksud. Elemen gambar dan elemen tautan adalah dua contoh dari ini.

Elemen gambar membutuhkan atribut "src". Atribut itu memberi tahu browser gambar mana yang ingin Anda gunakan di lokasi itu. Nilai atribut akan menjadi path file ke gambar. Sebagai contoh:

Anda akan melihat bahwa saya menambahkan atribut lain ke elemen ini, "alt" atau atribut teks alternatif. Ini bukan secara teknis atribut yang diperlukan untuk gambar, tetapi ini adalah praktik terbaik untuk selalu menyertakan konten ini untuk aksesibilitas. Teks yang tercantum dalam nilai atribut alt adalah apa yang akan ditampilkan jika gambar gagal dimuat karena suatu alasan.

Elemen lain yang membutuhkan atribut khusus adalah anchor atau tag tautan. Elemen ini harus menyertakan atribut "href", yang merupakan singkatan dari "referensi hypertext." Itu adalah cara mewah untuk mengatakan "di mana tautan ini harus pergi." Sama seperti elemen gambar perlu mengetahui gambar mana yang dimuat, tag tautan harus Ketahuilah tempat yang seharusnya. Berikut ini bagaimana tampilan tag tautan:

Tautan itu sekarang akan membawa seseorang ke situs web yang ditentukan dalam nilai atribut. Dalam hal ini, ini adalah halaman utama.

Atribut sebagai Kait CSS

Penggunaan atribut lainnya adalah ketika mereka digunakan sebagai "kait" untuk gaya CSS. Karena standar web mendikte Anda harus menjaga struktur halaman (HTML) terpisah dari gaya (CSS), Anda menggunakan kait atribut ini di CSS untuk menentukan bagaimana halaman terstruktur akan ditampilkan di browser web. Misalnya, Anda dapat memiliki markup ini di dokumen HTML Anda.

Jika Anda ingin divisi tersebut memiliki warna latar belakang hitam (# 000) dan ukuran font 1,5em, Anda akan menambahkan ini ke CSS Anda:

.featured {background-color: # 000; ukuran font: 1,5em;}

Atribut class "featured" bertindak sebagai hook yang kita gunakan dalam CSS untuk menerapkan gaya ke area itu. Kami juga bisa memberi kami atribut ID di sini jika kami mau. Baik kelas dan ID adalah atribut universal, yang berarti bahwa mereka dapat ditambahkan ke elemen apa pun. Mereka juga dapat ditargetkan dengan gaya CSS tertentu untuk menentukan tampilan visual dari elemen tersebut.

Mengenai Javascript

Akhirnya, menggunakan atribut pada elemen HTML tertentu juga merupakan sesuatu yang dapat Anda gunakan dalam Javascript. Jika Anda memiliki skrip yang mencari elemen dengan atribut ID tertentu, itu adalah penggunaan lain dari bagian umum bahasa HTML ini.