<area>標記主要用於圖像地圖，通過該標記可以在圖像地圖中設定作用區域（又稱為熱點），這樣當用戶的鼠標移到指定的作用區域點擊時，會自動鏈接到預先設定好的頁面。其基本語法結構如下：
<area class=type id＝Value href＝url alt＝text shape＝area-shape coods＝value>
class和id：是分別指定熱點的類型和id號。
alt：用於設定熱點的替代性文字。
href：用於設定該熱點所鏈接的url地址。
shape和coords：是兩個主要的參數，用於設定熱點的形狀和大小。其基本用法如下：
<area shape="rect" coords="x1, y1,x2,y2" href=url>表示設定熱點的形狀為矩形，左上角頂點坐標為（X1,y1），右下角頂點坐標為（X2,y2）。
<area shape="circle" coords="x1, y1,r" href=url>表示設定熱點的形狀為圓形，圓心坐標為（X1,y1），半徑為r。
<area shape="poligon" coords="x1, y1,x2,y2 ......" href=url>表示設定熱點的形狀為多邊形，各頂點坐標依次為（X1,y1）、（X2,y2）、（x3,y3） ......。
備注：x1, y1,x2,y2 這幾個點的位置 是根據圖片而定的，不是根據窗口的大小而定。
<area>標記是在圖像地圖中划分作用區域的，因此其划分的作用區域必須在圖像地圖的區域內，所以在用 <area> 標記划分區域前必須用HTML的另一個標記<map>來設定圖像地圖的作用區域，並為指定的圖像地圖設定名稱，該標記的用法很簡單，即<map name="圖像地圖名稱"> ...... </map>。
下面通過一個例子來說明這兩個標記的用法：
這里是一幅新書架的圖片，要做的效果是：當鼠標點“網址大全”這本書時，新開一窗口，顯示關於這本書的簡介及訂單的網頁（urlall.htm）；當鼠標點“網站設計攻略”這本書時，新開一窗口，顯示關於這本書的簡介及訂單的網頁（siteall.htm）；當鼠標點“網頁技巧大全”這本書時，新開一窗口，顯示關於這本書的簡介及訂單的網頁（pagejqlall.htm）。制作方法：
1、插入圖片，並設置好圖像的有關參數，且在<img>標記中設置參數usemap="newbook" ismap，以表示對圖像地圖（newbook）的引用；
2、用<map>標記設定圖像地圖的作用區域，並取名為：newbook；
3、分別用<area>標記針對三本書的位置划分出三個矩形作用區域，並設定好其鏈接參數href。
制作完成，本例的源代碼如下：
<img src="http://www.webjx.com/images/logo.gif" width="207" height="148" alt="新書架" hspace="10" align="left" usemap="#newbook" border="0">
<map name="newbook">
<area shape="rect" coords="56,69,78,139" href="urlall.htm" target="_blank" alt="這里收集十萬多個網址。" title="這里收集十萬多個網址。">
<area shape="rect" coords="82,70,103,136" href="siteall.htm" target="_blank" alt="網站設計師的啟蒙讀本。" title="網站設計師的啟蒙讀本。">
<area shape="rect" coords="106,68,128,136" href="pageall.htm" target="_blank" alt="網頁制作者不可不讀的書。" title="網頁制作者不可不讀的書。">
</map>
在制作本文介紹的效果時應注意的幾點：
1、在<img>標記不要忘記設置usemap、ismap參數，且usemap的參數值必須與<map>標記中的name參數值相同，也就是說，“圖像地圖名稱”要一致；
2、同一“圖像地圖”中的所有熱點區域都要在圖像地圖的范圍內，即所有<area>標記均要在<map>與</map>之間；
3、在<area>標記中的 cords 參數設定的坐標格式要與shape參數設定的作用區域形狀配套，避免出現在shape參數設置的矩形作用區域，而在cords 中設置的卻是多邊形區域頂點坐標的現象出現。
HTML和XHTML之間的差異
在HTML中，<area>元素不需要結束標簽。
但XHTML中，<area>元素必須正確關閉。
必選屬性
DTD欄表明哪種文檔類型支持此屬性。S=Strict，T=Transitional，F=Frameset。
| 屬性 | 值 | 描述 | DTD |
|---|---|---|---|
| alt | 文本 | 為一個區域指定備選文本 | STF |
可選屬性
| 屬性 | 值 | 描述 | DTD |
|---|---|---|---|
| coords | 坐標 | 指定一個區域的坐標 | STF |
| href | URL | 指定一個區域的鏈接目標 | STF |
| nohref | nohref | 指出區域內沒有相應的鏈接 | STF |
| shape | default rect circle poly |
指定區域的形狀 | STF |
| target | _blank _parent _self _top |
指出在何處打開新頁面 | TF |
核心屬性
<area>標簽支持以下核心屬性：
| 屬性 | 值 | 描述 | DTD |
|---|---|---|---|
| accesskey | 字符 | 設置訪問元素的鍵盤快捷鍵 | STF |
| class | 類名 | 指明元素的類名 | STF |
| dir | rtl ltr |
指定元素里內容的文本方向 | STF |
| id | id | 指明元素的唯一id | STF |
| lang | 語言代碼 | 指定元素內容的語言代碼 | STF |
| style | 樣式定義 | 指定元素的內嵌樣式 | STF |
| tabindex | 數字 | 指定元素的Tab鍵順序 | STF |
| title | 文本 | 指定元素的提示文本 | STF |
| xml:lang | 語言代碼 | 在XHTML文檔中指定元素內容的語言代碼 | STF |
更多關於核心屬性的信息。
事件屬性
<area>標簽支持以下事件屬性:
| 屬性 | 值 | 描述 | DTD |
|---|---|---|---|
| onblur | 腳本 | 當元素失去焦點時執行腳本 | STF |
| onclick | 腳本 | 在元素區域內單擊鼠標（不區分左右鍵）時執行腳本 | STF |
| ondblclick | 腳本 | 在元素區域內雙擊鼠標（不區分左右鍵）時執行腳本 | STF |
| onfocus | 腳本 | 當元素取得焦點時執行腳本 | STF |
| onmousedown | 腳本 | 在元素區域內按下鼠標鍵（不區分左右鍵）時執行腳本 | STF |
| onmousemove | 腳本 | 當鼠標指針在元素區域內移動時執行腳本 | STF |
| onmouseout | 腳本 | 當鼠標指針移出元素區域時執行腳本 | STF |
| onmouseover | 腳本 | 當鼠標指針移入元素區域時執行腳本 | STF |
| onmouseup | 腳本 | 在元素區域內松開鼠標鍵（不區分左右鍵）時執行腳本 | STF |
| onkeydown | 腳本 | 按下一個鍵時執行腳本 | STF |
| onkeypress | 腳本 | 按下並松開一個鍵時執行腳本 | STF |
| onkeyup | 腳本 | 松開一個鍵時執行腳本 | STF |