Estimasi Waktu Baca: 2 menit

Deskripsi Tag

Tag <area> mendefinisikan area di dalam sebuah peta gambar.

Peta gambar sendiri merupakan suatu gambar dengan area yang dapat diklik.

Elemen <area> ini selalu didefinisikan di dalam elemen <map>.

Status: Didukung HTML 5

Sintaks Elemen

Berikut sintaks elemen <area>:


<img src="lokasi_file" usemap="#nama_map">
<map name="nama_map">
	<area shape="bentuk_area" coords="koordinat_area" title="info_area" href="url" alt="teks_alternatif">
</map>

Tag <area> sering didefinisikan bersamaan dengan atribut shape, coords, dan href (bila area ingin ditautkan). Jika atribut href digunakan maka juga dibutuhkan atribut alt.

Tak jarang juga penggunaan atribut title untuk memberi nama setiap area

Atribut

Beberapa atribut yang dapat ditambahkan pada elemen <area>.

AtributNilaiDeskripsi
altteksMenentukan teks alternatif.
(Dibutuhkan bila tag href ada)
coordskoordinatMenentukan koordinat area
downloadnama fileMenentukan target akan didownload saat pengguna mengklik hyperlink
hrefURLMenentukan target hyperlink untuk area terkait
hreflangkode bahasaMenentukan bahasa dari URL target
mediamedia queryMenentukan untuk perangkat/media apa URL target dioptimalkan
relalternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
Menentukan hubungan antara dokumen saat ini dan URL target.
shapedefault
rect
circle
poly
Menentukan bentuk area
target_blank
_parent
_self
_top
nama frame
Mendefinisikan dimana URL target akan dibuka
typetipe mediaMendefinisikan jenis media dari URL target

Atribut Global

Atribut global adalah atribut yang berlaku untuk semua tag di HTML.

Kunjungi link berikut untuk melihat daftar Atribut Global

Atribut Event

Atribut event adalah atribut yang akan dijalankan ketika terdapat suatu peristiwa atau interaksi dari user.

Dukungan Browser

Untuk mengetahui dukungan setiap browser dapat dilihat pada tabel berikut:

Elemen
<area>YaYaYaYaYa

Lebih Banyak Contoh

Penggunaan elemen <area> pada umumnya.


<img src="meja-kerja.jpg" usemap="#meja-kerja">
<map name="meja-kerja">
	<area shape="rect" coords="334,263,467,350" title="laptop" href="laptop.html" alt="Laptop">
	<area shape="rect" coords="99,328,147,384" title="pensil" href="pensil.html" alt="Pensil">
	<area shape="rect" coords="277,307,316,344" title="gelas" href="gelas.html" alt="Gelas">
</map>

Perlu Diperhatikan: Atribut usemap pada tag <img> dikaitkan dengan nama dari elemen <map>. Hal ini berfungsi untuk membuat hubungan antara peta dan gambar.

Pengaturan CSS Default

Pada umumnya browser akan menampilkan elemen <area> dengan nilai default sebagai berikut:


area {
  display: none;
}