HTML area Tag - Tutorial HTML

Tutorial HTML <area>

HTML area Tag - belajar html area. Element area mendefinisikan sebagai area yang berada di dalam gambar (peta gambar), dan dapat diklik oleh user dengan setting koordinat yang telah ditentukan.

Dalam penulisan pada html, html <area> harus di bungkus oleh html <map>, html <area> akan terintegrasi dengan html <img> yang disertai dengan atribut usemap

Atribut HTML <area>

Atribut	Nilai	Penjelasan
alt	teks	Menunjukkan sebuah alternate text pada area.
coords	koordinat	Menentukkan koordinat pada area
download	nama file	Menunjukkan bahwa target akan didownload ketika diklik
href	url/link	Menentukkan URL / Link.
hreflang	kode bahasa	Menentukkan bahasa yang digunakan pada target.
media	media query	Menentukkan media query yang digunakan pada dokumen pada url, yang berada pada area yang ditentukan.
rel	alternate author bookmark help license next nofollow noreferrer prefetch prev search tag	Menentukan hubungan antara dokumen yang ada dengan target pada URL
shape	default rect circle poly	Menentukkan bentuk dari area.
target	_blank _parent _self _top nama_frame	Menentukan bagaimana cara membuka halaman yang berada pada sebuah link.
type	media_type	Menentukkan tipe media dari yang berada pada target link.

Contoh HTML <area>

<img 
src="https://4.bp.blogspot.com/-39E4BBxkGv8/WjUb6w_hsaI/AAAAAAAABZM/tzU7J9m6v3MOosh8oaJvmKkgZKBULjlXwCLcBGAs/s1600/html-css-js.png" 
alt="image" 
usemap="#contoh" />

<map name="contoh">
    <area 
    alt="html" 
    title="HTML" 
    href="https://2.bp.blogspot.com/-g4B_KIO91h4/WDFLJg4ZqOI/AAAAAAAAAyA/k3c_rO02pkgsAahok-cDJ1NNDf-PXCXrQCLcB/s1600/html-tutorial.png" 
    shape="poly" 
    coords="23,66,55,66,59,28,19,27"/>
</map>

Contoh HTML <area>

<map name="contoh">
   <area 
   alt="html" 
   title="HTML" 
   href="//triksonic.blogspot.com/search/label/HTML" 
   shape="poly" 
   coords="23,66,55,66,59,28,19,27"/>
  
    <area 
    alt="css" 
    title="CSS" 
    href="//triksonic.blogspot.com/search/label/CSS" 
    shape="poly" 
    coords="78,66,109,66,113,28,74,27" />
  
    <area 
    alt="javascript" 
    title="JAVASCRIPT" 
    href="//triksonic.blogspot.com/search/label/Javascript" 
    shape="poly" 
    coords="82,118,47,119,45,80,85,80" />    
</map>

Global Attributes:

Element <area> mencakup Global Attributes HTML.

Event Attributes:

Element <area> mencakup Event Attributes HTML.

Browser Support HTML <area>

Desktop

Chrome	Ya
Safari	Ya
Firefox	1
Opera	Ya
IE	Ya
Edge	Ya

Mobile

Android webview	Ya
Chrome Android	Ya
Edge mobile	Ya
Firefox Android	4
IE mobile	Ya
Opera Android	Ya
iOS Safari	Ya

Default CSS :

Browser yang support dengan element <area>, biasanya mempunyai nilai default:

area { 
    display: none;
}