Atribut HTML: title - Membuat Text Tampil Saat Kursor pada Elemen


Definisi dan Penggunaan

Atribut title memberikan keterangan tambahan pada elemen. Text yang dimasukkan pada atribut title ini akan terlihat ketika kursor diletakkan diatas elemen yang bersangkutan.


Tipe Atribut



Sintak

	
    <elemen title='value'>
	  <!-- konten -->
	</elemen>
    
  
value adalah berupa text apa saja yang mendeskripsikan/menjelaskan elemen.



Practices

Atribut title digunakan untuk banyak kasus. Berikut adalah contoh-contoh penggunaan atribut title yang sering diterapkan oleh para developer:

  • Pada elemen link Atribut title banyak digunakan pada elemen a ( membuat link). Atribut ini sangat direkomendasikan dalam pembuatan link dengan anchor text (text yang tampil untuk mewakili link) yang tidak begitu mendeskripsikan tujuan link. Perhatikan contoh berikut:

    					
                        <a href='https://www.wiblogger.com' title='Kunjungi wiBlogger.com'>
    						Klik di sini
    					</a>
    					
    				

    Pada kode diatas, anchor link adalah berupa text Klik di sini. Ini tentu kurang mendeskripsikan apa yang terdapat pada link. Dengan mendefinisikan link melalui atribut title, kita dapat membantu mesin pencari dalam memahami apa yang terdapat pada link. Praktek ini juga salah satu praktek SEO On-Page yang selalu diterapkan para pelaku SEO. Untuk anchor link yang sudah mendeskripsikan link tujuan, direkomendasikan tetap mendefiniskan atribut title.

  • Pada elemen img (gambar) Praktek atribut title yang lebih umum lagi digunakan adalah pada elemen gambar. Seperti yang telah disinggung pada artikel Belajar SEO Pemula, dibutuhkan praktek tambahan untuk dapat membuat mesin pencari mengerti "tentang apa" gambar yang ditampilkan pada sebuah halaman. Untuk tujuan ini, selain menggunakan atribut alt, atribut title juga akan sangat membantu. Kedua atribut ini (alt dan title) didefinisikan pada elemen gambar untuk memperkuat SEO On-Page.

    Contoh HTML gambar:
    			<img src='/blogger.png' title='Logo blogger' alt='Logo blogger'/>
    		
Komentar