Atribut merupakan informasi tambahan untuk elemen. Atribut disimpan pada tag pembuka dan terdiri dari nama atribut dan nilai atribut. Nilai atribut diapit oleh tanda petik dan dipisahkan dari nama atribut dengan tanda sama dengan (=). Berikut contoh penulisannya:
<font face="Arial" size="30px" color="Blue"/>
Dimana "font" adalah nama atribut, "Arial, 30 px, dan blue" adalah nilai atribut, dan "face, size, dan color adalah tag.
Sebuah tag HTML dapat memiliki banyak atribut seperti contoh di atas. Tapi nilai atribut hanya boleh satu untuk masing-masing nama atribut.
Bagi search engine, gambar tidak berarti apa-apa. Agar sebuah gambar bermakna bagi search engine, maka kita harus membubuhkan alternate text berupa kata-kata yang berfungsi untuk menjelaskan gambar tersebut. Alternate text inilah yang akan dibaca oleh search engine. Untuk membuat alternate text pada gambar, kita membutuhkan atribut alt. Contoh penulisannya adalah sebagai berikut:
<img src="gambar.gif" alt="alternate text" />
Bagian “alternate text” pada contoh di atas diisi dengan kata-kata yang menjelaskan gambar tersebut. Jika yang ditampilkan adalah foto "Bendera", maka kita bisa menuliskan “Bendera negara Indonesia” sebagai alternate text-nya.
<img src="Bendera.jpg" alt="Bendera nagara Indonesia" />
Tanpa menyertakan atribut alt, sebuah gambar sebenarnya sudah bisa ditampilkan hanya dengan menuliskan tag <img /> plus atribut src. Namun untuk tujuan aksesibilitas, atribut ini wajib disertakan sebagaimana direkomendasikan W3C. Dengan menyertakan artibut alt ini, maka mereka yang kebetulan tidak mengaktifkan fasilitas gambar di browsernya, tidak akan kehilangan informasi dari gambar tersebut. Orang yang menggunakan screenreader juga akan sangat terbantu.
Meskipun demikian, atribut alt ini sering “disalahgunakan” demi tujuan SEO, sehingga terkadang kata-kata yang terbaca tidak menjelaskan gambar sama sekali. Memang tidak ada salahnya mengoptimasi atribut alt untuk search engine, namun sebaiknya dilakukan
secara proporsional dan terutama untuk membantu menjelaskan gambar pada pembaca (fulfills the same function as the image).
Atribut width dan height
Atribut width dan height digunakan untuk mendefinisikan ukuran lebar dan tinggi gambar. Atribut width dan height ini bukan suatu keharusan. Namun ada keuntungan yang kita peroleh dengan menyebutkan kedua atribut ini, yaitu gambar akan di-load lebih cepat oleh browser, karena browser tidak perlu membaca terlebih dahulu ukuran lebar dan tinggi gambar tersebut.
Lebar dan tinggi gambar biasanya menggunakan ukuran pixel. Meskipun demikian, kita tidak perlu menuliskan ukuran “px” tersebut pada kedua atribut ini, tetapi cukup dengan menyebutkan angkanya saja, misalnya 300. Perhatikan contoh berikut!
<img src="Bendera.jpg" alt="Bendera negara Indonesia" width="300" height="250" />
Atribut width dan height ini dapat pula digunakan untuk mengubah ukuran (resize) gambar, tapi hal ini tidak dianjurkan. Selain karena ukuran file bisa lebih besar (jika ukurannya diperbesar dari ukuran asli), browser pun tidak begitu pandai mengubah ukuran gambar ini.
Jika seandainya ada saran kritik, maupun pertanyaan dapat anda cantumkan.Apabila tidak merepotkan serta menyita waktu anda, saya minta komentar anda tentang artikel ini.
Terinspirasi oleh: Bang Joe Alfaraby
No comments:
Post a Comment